<% if (!selected) { %>
<div class="pg-head" style="margin-bottom:0">
  <div>
    <div class="eyebrow">Delivery / Upload Centre</div>
  </div>
  <div class="ph-right"><%- include('../partials/demo-toggle') %></div>
</div>
<h1 class="claim"><%= title %></h1>
<p class="claim-lede">Choose a client to start.</p>
<p class="claim-sub">Every form here writes straight to that client's own portal (a document, an invoice, a task) with no draft state and no review queue behind it. Nothing on this page happens until you pick who it's for.</p>
<div class="bento" style="margin-top:22px">
  <div class="card b12">
    <div class="card-h"><h3>Clients</h3><span class="hint"><%= workspaces.length %></span></div>
    <div class="card-p" style="display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px">
      <% workspaces.forEach(function (w) { %>
        <a class="card card-p" href="/staff/upload?w=<%= w.slug %>" style="display:flex; align-items:center; gap:10px; text-decoration:none">

          <span class="cl-badge" style="flex:none; width:30px; height:30px; border-radius:8px; background:var(--fill-strong); color:var(--on-fill-strong); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--fs-sm)"><%= (w.badge || w.name || '?').slice(0, 2).toUpperCase() %></span>
          <span class="strong"><%= w.name %></span>
        </a>
      <% }) %>
    </div>
  </div>
</div>
<% } else { %>
<%
  var wid = selected._id;
  var money = locals.money || { billing: true, internal: true };

  var _inv    = invoices || [];
  var _shown  = documents.length + meetings.length + roadmap.length + tasks.length + reports.length
              + (money.billing ? _inv.length : 0);

  var _svgEye  = '<svg viewBox="0 0 16 16" width="15" height="15" fill="none"><path d="M1.6 8s2.4-4.2 6.4-4.2S14.4 8 14.4 8s-2.4 4.2-6.4 4.2S1.6 8 1.6 8z" stroke="currentColor" stroke-width="1.4"/><circle cx="8" cy="8" r="1.9" stroke="currentColor" stroke-width="1.4"/></svg>';
  var _svgDoc  = '<svg viewBox="0 0 16 16" width="15" height="15" fill="none"><path d="M9 1.8H4.6a1.4 1.4 0 00-1.4 1.4v9.6a1.4 1.4 0 001.4 1.4h6.8a1.4 1.4 0 001.4-1.4V5.6z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/><path d="M9 1.8v3.8h3.8" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>';
  var _svgTask = '<svg viewBox="0 0 16 16" width="15" height="15" fill="none"><path d="M2.6 4.6l1.6 1.6 2.6-2.8M2.6 11l1.6 1.6 2.6-2.8M9.4 4.4h4M9.4 11.2h4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>';
  var _svgRep  = '<svg viewBox="0 0 16 16" width="15" height="15" fill="none"><rect x="2.4" y="2.4" width="11.2" height="11.2" rx="1.6" stroke="currentColor" stroke-width="1.3"/><path d="M5.4 10.6V7.4M8 10.6V5.4M10.6 10.6V8.8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>';
  var _svgDial = '<svg viewBox="0 0 16 16" width="15" height="15" fill="none"><circle cx="8" cy="8" r="5.9" stroke="currentColor" stroke-width="1.3"/><circle cx="8" cy="8" r="2.6" stroke="currentColor" stroke-width="1.3"/></svg>';

  var _acts = [];
  _acts.push({ href: '/staff/view/' + selected.slug,              lb: 'See it as they will', ic: _svgEye, lead: true });
  _acts.push({ href: '#documents',                                lb: 'Documents',           ic: _svgDoc });
  _acts.push({ href: '#tasks',                                    lb: 'Tasks',               ic: _svgTask });
  _acts.push({ href: '#reports',                                  lb: 'Reports',             ic: _svgRep });
  _acts.push({ href: '/staff/mission-control?w=' + selected.slug, lb: 'Mission Control',     ic: _svgDial });
%>

<div id="staff-upload-view">
<div class="pg-head" style="margin-bottom:0">
  <div>
    <div class="eyebrow">Delivery</div>
  </div>
  <div class="ph-right" style="display:flex; gap:8px; align-items:center">
    <%- include('../partials/demo-toggle') %>
    <form method="GET" action="/staff/upload" class="picker-wrap">
      <label for="upClient">Client</label>
      <select id="upClient" class="picker" name="w" onchange="this.form.submit()">
        <% workspaces.forEach(function(w){ %><option value="<%= w.slug %>" <%= w.slug===selected.slug?'selected':'' %>><%= w.name %></option><% }) %>
      </select>
    </form>
  </div>
</div>

<h1 class="claim"><%= title %></h1>
<% if (_shown) { %>
  <p class="claim-lede"><em><%= _shown %></em> recent items sit on <%= selected.name %>'s portal.</p>
<% } else { %>
  <p class="claim-lede">Nothing has been filed for <%= selected.name %> yet.</p>
<% } %>
<p class="claim-sub">Documents, invoices, meetings, roadmap, tasks and reports for the client picked above. Everything appears on their pages <b>immediately</b>.</p>

<div class="qbar">
  <div class="qbar-acts">
    <% _acts.forEach(function (a) { %>
      <a class="qact<%= a.lead ? ' qact-lead' : '' %>" href="<%= a.href %>"><%- a.ic %><span><%= a.lb %></span></a>
    <% }) %>
  </div>
</div>

<div class="bento" style="margin-top:22px">

  <div class="vdark vd-cut vd-cut-sm b12">
    <span class="vn-fillet"></span>
    <a class="vn-cut" href="#documents">Upload a file
      <svg viewBox="0 0 12 12" fill="none" width="13" height="13" aria-hidden="true"><path d="M6 9.6V2.4M3.2 5.2L6 2.4l2.8 2.8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </a>
    <div class="vd-k">Adding to <%= selected.name %></div>
    <div class="vd-row">
      <div class="vd-num tnum"><%- _shown ? _shown : '<span class="noval">—</span>' %></div>
    </div>
    <div class="vd-sub">The newest items of each kind, already visible to <%= selected.name %>. Check the client picker before adding anything.</div>

    <div class="ov-strip ov-2" style="margin-top:20px">
      <div class="ov"><div class="ovl">Documents</div><div class="ovv tnum"><%- documents.length ? documents.length : '<span class="noval">—</span>' %></div></div>
      <div class="ov"><div class="ovl">Reports</div><div class="ovv tnum"><%- reports.length ? reports.length : '<span class="noval">—</span>' %></div></div>
      <div class="ov"><div class="ovl">Meetings</div><div class="ovv tnum"><%- meetings.length ? meetings.length : '<span class="noval">—</span>' %></div></div>
      <div class="ov"><div class="ovl">Roadmap items</div><div class="ovv tnum"><%- roadmap.length ? roadmap.length : '<span class="noval">—</span>' %></div></div>
      <div class="ov"><div class="ovl">Tasks</div><div class="ovv tnum"><%- tasks.length ? tasks.length : '<span class="noval">—</span>' %></div></div>
      <% if (money.billing) { %>
      <div class="ov"><div class="ovl">Invoices</div><div class="ovv tnum"><%- _inv.length ? _inv.length : '<span class="noval">—</span>' %></div></div>
      <% } %>
    </div>
  </div>

  <details class="aa-note b12"><summary>Where these land</summary><div class="aa-note-b">Uploads appear on the client's Documents or Reports page <b>immediately</b>, with no draft step. Pick the client and destination first.
      <br><br>
      The list under each form shows the newest few items, to confirm your upload landed.</div></details>

  <div class="card shelf-c b3 sc-violet"><div class="cl">Documents</div><div class="cv tnum"><%- documents.length ? documents.length : '<span class="noval">—</span>' %></div></div>
  <div class="card shelf-c b3 sc-lime"><div class="cl">Meetings</div><div class="cv tnum"><%- meetings.length ? meetings.length : '<span class="noval">—</span>' %></div></div>
  <div class="card shelf-c b3 sc-navy"><div class="cl">Tasks</div><div class="cv tnum"><%- tasks.length ? tasks.length : '<span class="noval">—</span>' %></div></div>
  <div class="card shelf-c b3 sc-sky"><div class="cl">Reports</div><div class="cv tnum"><%- reports.length ? reports.length : '<span class="noval">—</span>' %></div></div>

  <div class="card b12" id="documents">
    <div class="card-h"><h3>Documents</h3><span class="hint">contracts, brand files, notes</span></div>

    <form class="card-p formrow" method="POST" action="/api/documents" enctype="multipart/form-data">
      <input type="hidden" name="workspaceId" value="<%= wid %>">
      <div class="fld" style="flex:1 1 100%"><label for="up-doc-file">File</label><input id="up-doc-file" type="file" name="file" required></div>
      <div class="fld" style="flex:1 1 200px"><label for="up-doc-name">Display name <span class="rr-meta">(optional)</span></label><input id="up-doc-name" name="name" placeholder="Uses the filename"></div>
      <div class="fld" style="width:160px"><label for="up-doc-cat">Category</label>
        <select id="up-doc-cat" name="category"><option value="legal">Legal</option><option value="brand">Brand</option><option value="credentials">Credentials</option><option value="notes">Notes</option></select>
      </div>
      <div class="actions"><button class="btn btn-primary btn-sm" type="submit">Upload</button></div>
    </form>
    <% if(documents.length){ %>

      <div class="card-p" style="border-top:1px solid var(--line-2); display:flex; flex-direction:column; gap:7px; font-size:var(--fs-sm)">
        <% documents.forEach(function(d){ %>
          <div class="row-between"><span><%= d.name %></span><span class="rr-meta"><%= d.fileType %>, <%= d.meta %></span></div>
        <% }) %>
      </div>
    <% } %>
  </div>

  <% if (money.billing) { %>
  <div class="card b12" id="invoices">
    <div class="card-h"><h3>Invoices</h3><span class="hint">what they owe</span></div>

    <form class="card-p formrow js-ajax-form" data-refresh="#staff-upload-view" method="POST" action="/api/invoices">
      <input type="hidden" name="workspaceId" value="<%= wid %>">
      <div class="fld" style="width:150px"><label for="up-inv-number">Number</label><input id="up-inv-number" name="number" placeholder="auto"></div>
      <div class="fld" style="flex:1 1 160px"><label for="up-inv-period">Period</label><input id="up-inv-period" name="period" placeholder="August 2026"></div>
      <div class="fld" style="width:130px"><label for="up-inv-amount">Amount (<%= selected.subscription && selected.subscription.currency || 'USD' %>)</label><input id="up-inv-amount" name="amount" type="number" min="0.01" step="0.01" required></div>
      <div class="fld" style="width:150px"><label for="up-inv-due">Due date</label><input id="up-inv-due" name="dueDate" type="date" required></div>
      <div class="fld" style="flex:1 1 100%"><label for="up-inv-desc">Description</label><input id="up-inv-desc" name="description" placeholder="What this invoice covers" required></div>
      <div class="actions"><button class="btn btn-primary btn-sm" type="submit">Create invoice</button></div>
    </form>
    <% if(_inv.length){ %>

      <div class="card-p" style="border-top:1px solid var(--line-2); display:flex; flex-direction:column; gap:7px; font-size:var(--fs-sm)">
        <% _inv.forEach(function(i){ %>
          <div class="row-between"><span><%= i.number %> <span class="rr-meta"><%= i.period || '' %></span></span><span><%= h.money(i.amount, i.currency || (selected.subscription && selected.subscription.currency)) %> <span class="chip <%= i.status==='paid'?'pos':'warn' %>"><%= i.status %></span></span></div>
        <% }) %>
      </div>
    <% } %>
  </div>
  <% } %>

  <div class="card b12" id="meetings">
    <div class="card-h"><h3>Meetings</h3><span class="hint">calls and reviews</span></div>
    <form class="card-p formrow js-ajax-form" data-refresh="#staff-upload-view" method="POST" action="/api/meetings">
      <input type="hidden" name="workspaceId" value="<%= wid %>">
      <div class="fld" style="flex:1 1 100%"><label for="up-mtg-title">Title</label><input id="up-mtg-title" name="title" placeholder="Monthly Strategy Review" required></div>
      <div class="fld" style="flex:1 1 200px"><label for="up-mtg-start">Date &amp; time</label><input id="up-mtg-start" name="startsAt" type="datetime-local" required></div>
      <div class="fld" style="width:120px"><label for="up-mtg-min">Minutes</label><input id="up-mtg-min" name="durationMin" type="number" value="45"></div>
      <div class="fld" style="flex:1 1 100%"><label for="up-mtg-link">Join link <span class="rr-meta">(Zoom / Meet / Teams)</span></label><input id="up-mtg-link" name="zoomLink" type="url" placeholder="https://…"></div>
      <div class="actions"><button class="btn btn-primary btn-sm" type="submit">Schedule</button></div>
    </form>
    <% if(meetings.length){ %>

      <div class="card-p" style="border-top:1px solid var(--line-2); display:flex; flex-direction:column; gap:7px; font-size:var(--fs-sm)">
        <% meetings.forEach(function(m){ %>
          <div class="row-between"><span><%= m.title %></span><span class="rr-meta"><%= h.date(m.startsAt) %><%= m.zoomLink ? '' : ', no link' %></span></div>
        <% }) %>
      </div>
    <% } %>
  </div>

  <div class="card b12" id="roadmap">
    <div class="card-h"><h3>Roadmap</h3><span class="hint">the plan they follow</span></div>
    <form class="card-p formrow js-ajax-form" data-refresh="#staff-upload-view" method="POST" action="/api/roadmap">
      <input type="hidden" name="workspaceId" value="<%= wid %>">
      <div class="fld" style="flex:1 1 160px"><label for="up-rm-month">Month</label><input id="up-rm-month" name="month" placeholder="Month 1 (Aug)" required></div>
      <div class="fld" style="flex:1 1 140px"><label for="up-rm-phase">Phase</label><input id="up-rm-phase" name="phase" placeholder="Foundation"></div>
      <div class="fld" style="flex:1 1 100%"><label for="up-rm-title">Title</label><input id="up-rm-title" name="title" placeholder="Technical SEO audit &amp; fixes" required></div>
      <div class="fld" style="flex:1 1 180px"><label for="up-rm-meta">Detail</label><input id="up-rm-meta" name="meta" placeholder="Short description"></div>
      <div class="fld" style="width:140px"><label for="up-rm-status">Status</label><select id="up-rm-status" name="status"><option value="todo">To do</option><option value="prog">In progress</option><option value="done">Done</option></select></div>
      <div class="actions"><button class="btn btn-primary btn-sm" type="submit">Add item</button></div>
    </form>
    <% if(roadmap.length){ %>

      <div class="card-p" style="border-top:1px solid var(--line-2); display:flex; flex-direction:column; gap:4px; font-size:var(--fs-sm)">
        <% roadmap.forEach(function(r){ %>
          <div class="editrow">
            <div class="row-between" style="gap:10px">
              <span><span class="rr-meta"><%= r.month %></span> <%= r.title %></span>
              <span style="display:flex; align-items:center; gap:7px; flex:none">
                <form method="POST" action="/api/roadmap/<%= r._id %>/status" class="inline-form js-ajax-form" data-refresh="#staff-upload-view">
                  <input type="hidden" name="workspaceId" value="<%= wid %>">
                  <select name="status" onchange="this.form.submit()" class="minisel">
                    <option value="todo" <%= r.status==='todo'?'selected':'' %>>To do</option>
                    <option value="prog" <%= r.status==='prog'?'selected':'' %>>In progress</option>
                    <option value="done" <%= r.status==='done'?'selected':'' %>>Done</option>
                  </select>
                </form>
                <details><summary class="more" style="cursor:pointer; list-style:none">Edit</summary>
                  <form class="editform js-ajax-form" data-refresh="#staff-upload-view" method="POST" action="/api/roadmap/<%= r._id %>">
                    <input type="hidden" name="workspaceId" value="<%= wid %>">
                    <div class="fld"><label for="<%= 'up-rm-edit-month-'+r._id %>">Month</label><input id="<%= 'up-rm-edit-month-'+r._id %>" name="month" value="<%= r.month || '' %>"></div>
                    <div class="fld"><label for="<%= 'up-rm-edit-phase-'+r._id %>">Phase</label><input id="<%= 'up-rm-edit-phase-'+r._id %>" name="phase" value="<%= r.phase || '' %>"></div>
                    <div class="fld"><label for="<%= 'up-rm-edit-title-'+r._id %>">Title</label><input id="<%= 'up-rm-edit-title-'+r._id %>" name="title" value="<%= r.title || '' %>"></div>
                    <div class="fld"><label for="<%= 'up-rm-edit-meta-'+r._id %>">Detail</label><input id="<%= 'up-rm-edit-meta-'+r._id %>" name="meta" value="<%= r.meta || '' %>"></div>
                    <div class="fld"><label for="<%= 'up-rm-edit-pct-'+r._id %>">Progress %</label><input id="<%= 'up-rm-edit-pct-'+r._id %>" name="pct" type="number" min="0" max="100" value="<%= r.pct || 0 %>"></div>
                    <button class="btn btn-primary btn-sm" type="submit">Save</button>
                  </form>
                </details>
                <form method="POST" action="/api/roadmap/<%= r._id %>/delete" class="inline-form js-delete-form" data-confirm="Delete this roadmap item?" data-refresh="#staff-upload-view">
                  <input type="hidden" name="workspaceId" value="<%= wid %>">
                  <button class="icon-btn" title="Delete" aria-label="Delete roadmap item">&times;</button>
                </form>
              </span>
            </div>
          </div>
        <% }) %>
      </div>
    <% } %>
  </div>

  <div class="card b12" id="tasks">
    <div class="card-h"><h3>Tasks</h3><span class="hint">delivery work</span></div>
    <form class="card-p formrow js-ajax-form" data-refresh="#staff-upload-view" method="POST" action="/api/tasks">
      <input type="hidden" name="workspaceId" value="<%= wid %>">
      <div class="fld" style="flex:1 1 100%"><label for="up-tk-title">Title</label><input id="up-tk-title" name="title" placeholder="Rewrite the pillar page" required></div>
      <div class="fld" style="width:150px"><label for="up-tk-cat">Category</label>
        <select id="up-tk-cat" name="category"><% ['SEO','GEO','Content','Technical','Backlinks','Schema','AEO','AI'].forEach(function(c){ %><option><%= c %></option><% }) %></select>
      </div>
      <div class="fld" style="width:130px"><label for="up-tk-priority">Priority</label><select id="up-tk-priority" name="priority"><option value="high">High</option><option value="med" selected>Medium</option><option value="low">Low</option></select></div>
      <div class="fld" style="width:150px"><label for="up-tk-due">Due</label><input id="up-tk-due" name="due" type="date"></div>
      <div class="actions"><button class="btn btn-primary btn-sm" type="submit">Add task</button></div>
    </form>
    <% if(tasks.length){ %>

      <div class="card-p" style="border-top:1px solid var(--line-2); display:flex; flex-direction:column; gap:4px; font-size:var(--fs-sm)">
        <% tasks.forEach(function(t){ %>
          <div class="editrow">
            <div class="row-between" style="gap:10px">
              <span><%= t.title %> <span class="rr-meta"><%= t.category %><%= t.due ? ', due ' + h.date(t.due) : '' %></span></span>
              <span style="display:flex; align-items:center; gap:7px; flex:none">
                <form method="POST" action="/api/tasks/<%= t._id %>/status" class="inline-form js-ajax-form" data-refresh="#staff-upload-view">
                  <input type="hidden" name="workspaceId" value="<%= wid %>">
                  <select name="status" onchange="this.form.submit()" class="minisel">
                    <option value="todo" <%= t.status==='todo'?'selected':'' %>>To do</option>
                    <option value="in_progress" <%= t.status==='in_progress'?'selected':'' %>>In progress</option>
                    <option value="review" <%= t.status==='review'?'selected':'' %>>Review</option>
                    <option value="done" <%= t.status==='done'?'selected':'' %>>Done</option>
                  </select>
                </form>
                <details><summary class="more" style="cursor:pointer; list-style:none">Edit</summary>
                  <form class="editform js-ajax-form" data-refresh="#staff-upload-view" method="POST" action="/api/tasks/<%= t._id %>">
                    <input type="hidden" name="workspaceId" value="<%= wid %>">
                    <div class="fld"><label for="<%= 'up-tk-edit-title-'+t._id %>">Title</label><input id="<%= 'up-tk-edit-title-'+t._id %>" name="title" value="<%= t.title || '' %>"></div>
                    <div class="fld"><label for="<%= 'up-tk-edit-desc-'+t._id %>">Description</label><input id="<%= 'up-tk-edit-desc-'+t._id %>" name="description" value="<%= t.description || '' %>"></div>
                    <div class="fld"><label for="<%= 'up-tk-edit-cat-'+t._id %>">Category</label>
                      <select id="<%= 'up-tk-edit-cat-'+t._id %>" name="category"><% ['SEO','GEO','Content','Technical','Backlinks','Schema','AEO','AI'].forEach(function(c){ %><option <%= t.category===c?'selected':'' %>><%= c %></option><% }) %></select>
                    </div>
                    <div class="fld"><label for="<%= 'up-tk-edit-pri-'+t._id %>">Priority</label>
                      <select id="<%= 'up-tk-edit-pri-'+t._id %>" name="priority"><option value="high" <%= t.priority==='high'?'selected':'' %>>High</option><option value="med" <%= t.priority==='med'?'selected':'' %>>Medium</option><option value="low" <%= t.priority==='low'?'selected':'' %>>Low</option></select>
                    </div>
                    <div class="fld"><label for="<%= 'up-tk-edit-due-'+t._id %>">Due</label><input id="<%= 'up-tk-edit-due-'+t._id %>" name="due" type="date" value="<%= t.due ? new Date(t.due).toISOString().slice(0,10) : '' %>"></div>
                    <div class="fld"><label for="<%= 'up-tk-edit-appr-'+t._id %>">Client approval</label>
                      <select id="<%= 'up-tk-edit-appr-'+t._id %>" name="needsApproval"><option value="0" <%= t.needsApproval?'':'selected' %>>Not needed</option><option value="1" <%= t.needsApproval?'selected':'' %>>Waiting on client</option></select>
                    </div>
                    <button class="btn btn-primary btn-sm" type="submit">Save</button>
                  </form>
                </details>
                <form method="POST" action="/api/tasks/<%= t._id %>/delete" class="inline-form js-delete-form" data-confirm="Delete this task?" data-refresh="#staff-upload-view">
                  <input type="hidden" name="workspaceId" value="<%= wid %>">
                  <button class="icon-btn" title="Delete" aria-label="Delete task">&times;</button>
                </form>
              </span>
            </div>
          </div>
        <% }) %>
      </div>
    <% } %>
  </div>

  <div class="card b12" id="reports">
    <div class="card-h"><h3>Reports</h3><span class="hint">the file you wrote</span></div>

    <form class="card-p formrow" method="POST" action="/api/reports" enctype="multipart/form-data">
      <input type="hidden" name="workspaceId" value="<%= wid %>">

      <div class="fld" style="flex:1 1 100%"><label for="up-rep-files">Report files <span class="rr-meta">(PDF, DOCX, PPTX… Optional, pick more than one at once)</span></label><input id="up-rep-files" type="file" name="files" multiple></div>
      <div class="fld" style="flex:1 1 200px"><label for="up-rep-title">Title <span class="rr-meta">(optional)</span></label><input id="up-rep-title" name="title" placeholder="Uses the filename"></div>
      <div class="fld" style="width:150px"><label for="up-rep-kind">Period</label><select id="up-rep-kind" name="kind"><option value="monthly">Monthly</option><option value="quarterly">Quarterly</option><option value="yearly">Yearly</option></select></div>
      <div class="fld" style="width:160px"><label for="up-rep-pub">Published</label><input id="up-rep-pub" name="publishedAt" type="date"></div>
      <div class="fld" style="flex:1 1 100%"><label for="up-rep-note">Note for the client <span class="rr-meta">(optional)</span></label><input id="up-rep-note" name="note" placeholder="One line on what's inside"></div>
      <div class="actions"><button class="btn btn-primary btn-sm" type="submit">Upload report</button></div>
    </form>
    <% if(reports.length){ %>

      <div class="card-p" style="border-top:1px solid var(--line-2); display:flex; flex-direction:column; gap:8px; font-size:var(--fs-sm)">
        <% reports.forEach(function(r){ %>
          <div class="row-between" style="gap:10px">
            <span><% if(r.fileUrl){ %><a href="<%= r.fileUrl %>" target="_blank" rel="noopener"><%= r.title || r.kind %></a><% } else { %><%= r.title || r.kind %><% } %>
              <span class="rr-meta"><%= r.kind %><%= r.fileSize ? ', ' + r.fileSize : '' %></span></span>
            <form method="POST" action="/api/reports/<%= r._id %>/delete" class="inline-form js-delete-form" data-confirm="Remove this report?" data-refresh="#staff-upload-view">
              <input type="hidden" name="workspaceId" value="<%= wid %>">
              <button class="icon-btn" title="Remove" aria-label="Remove report">&times;</button>
            </form>
          </div>
        <% }) %>
      </div>
    <% } %>
  </div>

</div>
</div>
<% } %>
