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>

    <!-- An illustration the model asked for. It renders here rather than in an
         image history, because this feature does not have one and telling
         someone to look somewhere that does not exist is worse than silence. -->
    <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>