<%
var canManage = locals.showStaff;

function uploader(d){
  if (!d.uploadedBy) return 'your VOCTOS team';
  if (currentUser && String(d.uploadedBy._id) === String(currentUser._id)) return 'you';
  if (['staff','admin'].includes(d.uploadedBy.role)) return 'your VOCTOS team';
  return d.uploadedBy.name || 'a teammate';
}
function docCard(d){

  var open = d.fileUrl ? '<a class="btn btn-sm" href="'+h.esc(d.fileUrl)+'" target="_blank">Open</a>'
    : (d.status ? '<span class="chip '+(d.status==='Signed'||d.status==='Secure'?'pos':(d.status==='Final'?'draft':'teal'))+'">'+h.esc(d.status)+'</span>' : '<button class="btn btn-sm">Open</button>');
  var del = canManage ? '<form method="POST" action="/api/documents/'+d._id+'/delete" class="inline-form js-delete-form" data-confirm="Delete this document?" data-refresh="#documents-body" style="margin-left:6px"><button class="icon-btn" title="Delete" aria-label="Delete document">&times;</button></form>' : '';
  return '<div class="doc"><span class="dic">'+'<svg viewBox="0 0 16 16" width="18" height="18" fill="none" aria-hidden="true"><path d="M9 1.9H4.6a1.3 1.3 0 0 0-1.3 1.3v9.6a1.3 1.3 0 0 0 1.3 1.3h6.8a1.3 1.3 0 0 0 1.3-1.3V5.6z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/><path d="M9 1.9v3.7h3.7" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>'+'</span><div style="flex:1"><div class="dn">'+h.esc(d.name)+'</div><div class="dm">'+h.esc(d.fileType||'')+' · '+h.esc(d.meta||'')+' · added by '+h.esc(uploader(d))+'</div></div>'+open+del+'</div>';
}

var _legal = legal || [], _brand = brand || [], _creds = credentials || [], _notes = notes || [];
var _all   = _legal.concat(_brand, _creds, _notes);

var _files = _all.filter(function(d){ return d.fileUrl; });
var _cats  = [_legal, _brand, _creds, _notes].filter(function(a){ return a.length; }).length;

var _arrow = '<svg viewBox="0 0 12 12" fill="none" width="13" height="13" aria-hidden="true"><path d="M3 9L9 3M9 3H4.2M9 3v4.8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>';
var _svgUp   = '<svg viewBox="0 0 16 16" width="15" height="15" fill="none"><path d="M8 12.4V4.6M5.2 7.4L8 4.6l2.8 2.8M2.8 13.4h10.4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
var _svgDoc  = '<svg viewBox="0 0 16 16" width="15" height="15" fill="none"><path d="M9 1.9H4.6a1.3 1.3 0 0 0-1.3 1.3v9.6a1.3 1.3 0 0 0 1.3 1.3h6.8a1.3 1.3 0 0 0 1.3-1.3V5.6z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/><path d="M9 1.9v3.7h3.7" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>';
var _svgTag  = '<svg viewBox="0 0 16 16" width="15" height="15" fill="none"><path d="M2.6 7.4V2.6h4.8l6 6-4.8 4.8z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/><path d="M5 5h.01" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>';
var _svgKey  = '<svg viewBox="0 0 16 16" width="15" height="15" fill="none"><circle cx="5.4" cy="5.4" r="2.8" stroke="currentColor" stroke-width="1.4"/><path d="M7.5 7.5l5.1 5.1M10.4 12.6l1.2-1.2M12 11l1.2-1.2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>';

var _acts = [];

_acts.push({ href:'#legal',       lb:'Legal',       ic:_svgDoc, n:_legal.length });
_acts.push({ href:'#brand',       lb:'Brand',       ic:_svgTag, n:_brand.length });
_acts.push({ href:'#credentials', lb:'Credentials', ic:_svgKey, n:_creds.length + _notes.length });

  if (_acts.length && !_acts.some(function (a) { return a.lead; })) _acts[0].lead = true;
%>
<div class="pg-head" style="margin-bottom:0">
  <div>
    <div class="eyebrow">Business</div>
  </div>
  <div class="ph-right">
    <%- include('../partials/range-picker') %></div>
</div>

<h1 class="claim"><%= title %></h1>
<% if (_all.length) { %>
  <p class="claim-lede"><em><%= _all.length %></em> file<%= _all.length===1?'':'s' %> in your workspace.</p>
<% } else { %>
  <p class="claim-lede">No documents yet.</p>
<% } %>
<p class="claim-sub">Contracts, proposals, credentials and brand assets in one place. <%- h.ihelp('Who can see these',
  'Only your team and your VOCTOS account managers can open these files. Both can upload; only VOCTOS can remove a file.') %></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 %><% if (a.n) { %> <b class="qn"><%= a.n %></b><% } %></span></a>
    <% }) %>
  </div>
</div>

<div class="card card-p" id="add" style="margin-top:22px"<%= (locals.query && locals.query.new) ? '' : ' hidden' %>>
  <div class="card-h" style="padding:0 0 12px"><h3>Upload a document</h3><span class="rr-end"><a class="more js-panel-cancel" data-panel="#add" href="/documents">Cancel</a></span></div>

  <form class="addform" method="POST" action="/api/documents" enctype="multipart/form-data">
    <div class="fld" style="flex:1;min-width:220px"><label for="doc-new-file">File</label><input id="doc-new-file" type="file" name="file" required></div>
    <div class="fld" style="flex:1;min-width:180px"><label for="doc-new-name">Name (optional)</label><input id="doc-new-name" name="name" placeholder="Defaults to filename"></div>
    <div class="fld"><label for="doc-new-category">Category</label><select id="doc-new-category" name="category"><option value="legal">Legal</option><option value="brand">Brand</option><option value="credentials">Credentials</option><option value="notes">Notes</option></select></div>
    <button class="btn btn-primary btn-sm" type="submit">Upload</button>
  </form>
</div>

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

  <div class="vdark vd-cut vd-cut-sm b12">
    <span class="vn-fillet"></span>
    <a class="vn-cut js-panel-open" data-panel="#add" href="/documents?new=1#add">Upload <%- _arrow %></a>
    <div class="vd-k">Files on record</div>
    <div class="vd-row">
      <div class="vd-num tnum"><%- _all.length ? _all.length : '<span class="noval">—</span>' %></div>
    </div>
    <div class="vd-sub">Filed by your team or by VOCTOS.</div>

    <div class="ov-strip ov-2" style="margin-top:20px">
      <div class="ov"><div class="ovl">Openable now</div><div class="ovv tnum"><%- _files.length ? _files.length : '<span class="noval">—</span>' %></div>
        <div class="rr-meta" style="margin-top:5px">the rest are rows without an upload</div></div>
      <div class="ov"><div class="ovl">Sections in use</div><div class="ovv tnum"><%- _cats ? _cats : '<span class="noval">—</span>' %></div>
        <div class="rr-meta" style="margin-top:5px">of four</div></div>
    </div>
  </div>

  <div class="card shelf-c b3 sc-violet"><div class="cl">Legal &amp; commercial</div><div class="cv tnum"><%= _legal.length %></div></div>
  <div class="card shelf-c b3 sc-lime"><div class="cl">Brand assets</div><div class="cv tnum"><%= _brand.length %></div></div>
  <div class="card shelf-c b3 sc-navy"><div class="cl">Credentials</div><div class="cv tnum"><%= _creds.length %></div></div>
  <div class="card shelf-c b3 sc-sky"><div class="cl">Notes</div><div class="cv tnum"><%= _notes.length %></div></div>

  <% if (!_all.length) { %>

  <div class="voff b12">
    <div class="voff-h"><b>No documents yet.</b> Upload contracts, brand assets and credentials here.</div>
    <div class="voff-i">
      <span class="n">Legal &amp; commercial, brand assets, credentials, notes</span>
      <a class="js-panel-open" data-panel="#add" href="/documents?new=1#add">Upload the first one</a>
    </div>
  </div>
  <% } %>

  <div class="b12" id="legal">
    <div class="section-title">Legal &amp; commercial</div>
    <div class="grid g-3" style="margin:12px 0 0"><% _legal.forEach(function(d){ %><%- docCard(d) %><% }) %></div>
  </div>

  <div class="b12" id="brand">
    <div class="section-title">Brand assets</div>
    <div class="grid g-3" style="margin:12px 0 0"><% _brand.forEach(function(d){ %><%- docCard(d) %><% }) %></div>
  </div>

  <div class="b12" id="credentials">
    <div class="section-title">Credentials &amp; notes</div>
    <div class="grid g-3" style="margin:12px 0 0"><% _creds.concat(_notes).forEach(function(d){ %><%- docCard(d) %><% }) %></div>
  </div>
</div>
