pediatric-ai-scribe-v3/public/components/my-resources.html

<div class="card">
  <div class="card-header">
    <h3><i class="fas fa-folder-open"></i> My Resources</h3>
    <span style="font-size:12px;color:var(--g500);">Only you can see these</span>
  </div>
  <div style="padding:16px;display:flex;flex-direction:column;gap:14px;">
    <p style="margin:0;font-size:13px;color:var(--g600);line-height:1.5;">
      Build a teaching deck or handout on any topic &mdash; grounded in the clinical library,
      the literature, or both &mdash; then revise it below and download it as PowerPoint,
      Word or PDF.
    </p>
    <div class="admin-row">
      <label for="mr-topic" class="admin-row-label">Topic</label>
      <input id="mr-topic" type="text" class="admin-control" placeholder="e.g. febrile seizures in under-fives" maxlength="300">
    </div>

    <div class="admin-row">
      <label for="mr-kind" class="admin-row-label">Format</label>
      <div style="flex:1;display:flex;gap:10px;align-items:center;flex-wrap:wrap;min-width:0;">
        <select id="mr-kind" class="admin-control" style="max-width:220px;">
          <option value="presentation">Presentation (slides)</option>
          <option value="article">Article (prose)</option>
        </select>
        <label style="font-size:12px;color:var(--g600);display:flex;align-items:center;gap:6px;">
          Slides
          <input id="mr-slide-count" type="number" min="3" max="30" value="8" style="width:70px;font-size:13px;padding:5px 8px;border:1px solid var(--g300);border-radius:6px;">
        </label>
        <label style="font-size:12px;color:var(--g600);display:flex;align-items:center;gap:6px;" id="mr-word-wrap" hidden>
          Words
          <input id="mr-word-count" type="number" min="200" max="3000" step="100" value="800" style="width:90px;font-size:13px;padding:5px 8px;border:1px solid var(--g300);border-radius:6px;">
        </label>
      </div>
    </div>

    <div class="admin-row" id="mr-model-row" hidden>
      <label for="mr-model" class="admin-row-label">Model</label>
      <div style="flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;">
        <select id="mr-model" class="admin-control" style="max-width:320px;"></select>
      </div>
    </div>

    <!-- One group rather than four rows. Each option hides itself when an
         administrator has not enabled it, so nothing appears that a person
         could tick and then be refused. -->
    <!-- The look, chosen by the person who knows the room it will be shown in.
         Hidden until the catalogue loads, so it never flashes as an empty row. -->
    <div class="admin-row" id="mr-theme-row" hidden>
      <label for="mr-theme" class="admin-row-label">Theme</label>
      <div style="flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;">
        <select id="mr-theme" class="admin-control" style="max-width:320px;"></select>
        <p id="mr-theme-hint" style="margin:0;font-size:12px;color:var(--g500);"></p>
        <!-- A sample deck in this theme: every layout, placeholder text. The
             file is the preview — opened in PowerPoint it cannot promise a look
             the real download does not deliver. -->
        <div id="mr-theme-preview" hidden style="margin-top:4px;"></div>
      </div>
    </div>

    <div class="admin-row" style="align-items:flex-start;">
      <strong class="admin-row-label">Draw on</strong>
      <div style="flex:1;display:flex;flex-direction:column;gap:8px;min-width:0;">
        <label style="display:flex;align-items:center;gap:8px;font-size:13px;">
          <input type="checkbox" id="mr-use-corpus" checked>
          The clinical library
        </label>
        <label style="display:flex;align-items:center;gap:8px;font-size:13px;" id="mr-pubmed-row" hidden>
          <input type="checkbox" id="mr-pubmed">
          PubMed &mdash; cite published literature
          <span style="font-size:12px;color:var(--g500);">The query goes to NCBI.</span>
        </label>
        <label style="display:flex;align-items:center;gap:8px;font-size:13px;flex-wrap:wrap;" id="mr-web-row" hidden>
          <input type="checkbox" id="mr-web-search">
          The web &mdash; for anything newer than the library
          <span style="font-size:12px;color:var(--g500);">The query leaves this network; keep the topic non-identifying.</span>
        </label>
        <label style="display:flex;align-items:center;gap:8px;font-size:13px;" id="mr-images-row" hidden>
          <input type="checkbox" id="mr-with-images">
          Add illustrations &mdash; say how many in Instructions, or leave it to the model
        </label>
        <!-- Filled in when the instructions ask for a figure the options do not
             allow. Silence there is the failure worth avoiding. -->
        <p id="mr-image-hint" style="margin:0;font-size:12px;color:#92400e;" hidden></p>
      </div>
    </div>

    <!-- Details: what the resource is about, at length — a list of topics to
         cover, a case, a curriculum. Folded away so the short form stays short;
         opened by the people who need to paste something long. -->
    <details class="admin-row" id="mr-details-wrap" style="display:block;">
      <summary style="cursor:pointer;font-size:13px;font-weight:600;color:var(--g700);">Details <span style="color:var(--g400);font-weight:400;">(optional — a list of topics to cover, a case, an outline)</span></summary>
      <textarea id="mr-details" class="admin-control" maxlength="12000" style="margin-top:8px;min-height:120px;resize:vertical;font-family:inherit;" placeholder="Paste or type what the resource should cover, one item per line if you like. Everything here is treated as what to cover, not as instructions on how."></textarea>
    </details>

    <div class="admin-row" style="align-items:flex-start;">
      <label for="mr-refinement" class="admin-row-label">Instructions <span style="color:var(--g400);font-weight:400;">(optional)</span></label>
      <textarea id="mr-refinement" class="admin-control" style="min-height:70px;resize:vertical;font-family:inherit;" placeholder="e.g. for FY1s, case-based, emphasise red flags, use 3 diagrams"></textarea>
    </div>

    <div style="border-top:1px solid var(--g100);padding-top:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
      <button id="btn-mr-generate" class="btn-sm btn-primary" type="button"><i class="fas fa-wand-magic-sparkles"></i> Generate</button>
      <span id="mr-status" role="status" style="font-size:12px;color:var(--g600);"></span>
    </div>

    <!-- The status of an illustration the model asked for. The picture itself
         goes into the deck and the Images tab below, never into this page. -->
    <div id="mr-images" style="display:flex;flex-direction:column;gap:10px;"></div>
  </div>
</div>

<!-- Modify — change something already generated rather than starting again.
     The markdown is what is stored, so "redo slide 4" is a text edit; the
     resource keeps its id, its downloads and its place in the library. -->
<div class="card" style="margin-top:14px;">
  <div class="card-header">
    <h3><i class="fas fa-pen-to-square"></i> Modify</h3>
    <span style="font-size:12px;color:var(--g500);">Revise one you already have</span>
  </div>
  <div style="padding:16px;display:flex;flex-direction:column;gap:14px;">
    <div class="admin-row">
      <label for="mr-modify-target" class="admin-row-label">Resource</label>
      <select id="mr-modify-target" class="admin-control" style="max-width:420px;"></select>
    </div>

    <!-- The same choices as generating. A modification can need material the
         original never had — "add what the 2024 trial showed" is a request for
         sources, not a rewording — so the options are offered again rather
         than inherited from whatever was ticked at the time. -->
    <div class="admin-row" style="align-items:flex-start;">
      <strong class="admin-row-label">Draw on</strong>
      <div style="flex:1;display:flex;flex-direction:column;gap:8px;min-width:0;">
        <label style="display:flex;align-items:center;gap:8px;font-size:13px;">
          <input type="checkbox" id="mr-modify-corpus" checked>
          The clinical library
        </label>
        <label style="display:flex;align-items:center;gap:8px;font-size:13px;" id="mr-modify-pubmed-row" hidden>
          <input type="checkbox" id="mr-modify-pubmed">
          PubMed &mdash; cite published literature
          <span style="font-size:12px;color:var(--g500);">The query goes to NCBI.</span>
        </label>
        <label style="display:flex;align-items:center;gap:8px;font-size:13px;flex-wrap:wrap;" id="mr-modify-web-row" hidden>
          <input type="checkbox" id="mr-modify-web-search">
          The web &mdash; for anything newer than the library
          <span style="font-size:12px;color:var(--g500);">The query leaves this network.</span>
        </label>
        <label style="display:flex;align-items:center;gap:8px;font-size:13px;" id="mr-modify-images-row" hidden>
          <input type="checkbox" id="mr-modify-images">
          Add illustrations
        </label>
        <p id="mr-modify-image-hint" style="margin:0;font-size:12px;color:#92400e;" hidden></p>
      </div>
    </div>

    <div class="admin-row" style="align-items:flex-start;">
      <label for="mr-modify-instructions" class="admin-row-label">What to change</label>
      <div style="flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;">
        <textarea id="mr-modify-instructions" class="admin-control" style="min-height:70px;resize:vertical;font-family:inherit;" placeholder="e.g. split slide 4 into two, drop the pharmacology, add a summary slide at the end"></textarea>
        <p style="margin:0;font-size:12px;color:var(--g500);">
          The previous version is replaced.
        </p>
      </div>
    </div>

    <div style="border-top:1px solid var(--g100);padding-top:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
      <button id="btn-mr-modify" class="btn-sm btn-primary" type="button"><i class="fas fa-pen-to-square"></i> Apply changes</button>
      <span id="mr-modify-status" role="status" style="font-size:12px;color:var(--g600);"></span>
    </div>
  </div>
</div>

<div class="card" style="margin-top:14px;">
  <div class="card-header">
    <h3><i class="fas fa-book"></i> Library</h3>
    <div style="display:flex;align-items:center;gap:6px;">
      <!-- Two views of the same library. Documents is what this card has always
           shown; Images is every picture this account has generated, wherever it
           was made, because a figure is worth keeping after the deck it was
           drawn for has been replaced. -->
      <div role="tablist" aria-label="Library view" class="lib-tabs">
        <button id="tab-mr-docs" role="tab" aria-selected="true" aria-controls="mr-list" class="lib-tab" type="button">Documents</button>
        <button id="tab-mr-images" role="tab" aria-selected="false" aria-controls="mr-images-panel" class="lib-tab" type="button">Images</button>
      </div>
      <button id="btn-mr-refresh" class="btn-sm btn-ghost" type="button"><i class="fas fa-rotate"></i> Refresh</button>
    </div>
  </div>
  <div id="mr-docs-search" style="padding:12px 16px 0;">
    <input id="mr-search" type="search" class="admin-control" placeholder="Search your resources by title or topic" autocomplete="off">
  </div>
  <!-- Bounded rather than unlimited: a long library otherwise pushes everything
       else off the page. Tall enough to show several at a glance, and it
       collapses to the content when there are only a few. -->
  <div id="mr-list" role="tabpanel" aria-labelledby="tab-mr-docs" style="padding:12px 16px;display:flex;flex-direction:column;gap:6px;max-height:360px;overflow-y:auto;"></div>

  <!-- A grid rather than a list: a picture is recognised by looking at it, and a
       row of filenames would defeat the point of keeping them. Auto-fill so it
       reflows to one or two columns on a phone without a breakpoint. -->
  <div id="mr-images-panel" role="tabpanel" aria-labelledby="tab-mr-images" hidden
       style="padding:12px 16px;max-height:420px;overflow-y:auto;">
    <p id="mr-images-empty" style="margin:0;font-size:12px;color:var(--g500);">Loading…</p>
    <div id="mr-images-grid" class="img-grid"></div>
    <div style="display:flex;justify-content:center;padding-top:10px;">
      <button id="btn-mr-images-more" class="btn-sm btn-ghost" type="button" hidden>Load more</button>
    </div>
  </div>
</div>