<%

  var st = !!locals.showStaff;
  var keyOf = function (c) { return c.status === 'approved' ? (c.usedBy ? 'used' : 'approved') : c.status; };
  var label = function (k) { return (!st && k === 'client_review') ? 'Waiting for you' : lb.CSTATUS[k] || k; };
  var KEYS = st ? ['draft', 'client_review', 'changes', 'approved', 'used', 'archived'] : ['client_review', 'changes', 'approved', 'used'];
  var CH = [['', 'All', items.length]].concat(KEYS.map(function (k) { return [k, label(k), counts[k] || 0]; }));
  var wait = counts.client_review || 0;
%>
<%- include('../partials/lb-shell') %>

<p class="claim-lede"><% if (!items.length) { %>No articles yet.<% } else if (wait) { %><em><%= wait %> article<%= wait === 1 ? '' : 's' %></em> <%= st ? 'with the client for approval' : 'waiting for your approval' %>.<% } else { %><%= counts.approved || 0 %> approved article<%= counts.approved === 1 ? '' : 's' %> ready for a guest post<%= counts.used ? ', ' + counts.used + ' already placed' : '' %>.<% } %></p>
<p class="claim-sub"><%= st ? 'Write each article here and send it to the client. Once approved, pick it on Guest Posts: an article goes into one guest post only.' : 'Articles we will publish on other sites with a link to yours. Read each one and approve it, or tell us what to change. Nothing goes out without your yes.' %></p>

<div class="bento" style="margin-top:18px">
  <% if (st) { %>
  <section class="card b12 rp-sec">
    <details class="rc-new"<%= items.length ? '' : ' open' %>>
      <summary class="rp-sh" style="cursor:pointer"><div><div class="rp-kick">Staff</div><h3>+ New article</h3></div></summary>
      <form class="js-rep gpf" method="POST" action="/api/links/content">
        <div class="gpf-sec"><div class="gpf-grid">
          <label class="gpf-f gpf-wide"><span>Title</span><input name="title" required placeholder="The article's headline"></label>
          <div class="gpf-f gpf-wide"><span>Draft links <em>(optional now: the Google Doc, images, references…)</em></span><%- include('../partials/lb-multi', { name: 'docUrl', values: [], placeholder: 'https://docs.google.com/document/d/…', add: '+ Add another link' }) %></div>
          <label class="gpf-f gpf-wide"><span>…or paste the text</span><textarea name="text" rows="3" placeholder="Optional"></textarea></label>
        </div></div>
        <div class="gpf-foot"><span>Starts as <b>Being written</b>. Send it to the client from the article's page.</span><button class="btn btn-primary btn-sm" type="submit">Add article</button></div>
      </form>
    </details>
  </section>
  <% } %>

  <section class="card b12 rp-sec rep-fbox">
    <div class="rp-sh"><div><h3>Articles</h3></div>
      <div class="rp-filters rep-f"><% CH.forEach(function (c, i) { if (i && !c[2]) return; %><button type="button" class="rp-chip<%= i ? '' : ' on' %>" data-f="<%= c[0] %>" style="--c:var(--<%= c[0] === 'changes' ? 'neg' : c[0] === 'approved' || c[0] === 'used' ? 'pos' : 'muted-2' %>)"><% if (i) { %><i></i><% } %><%= c[1] %> <b><%= c[2] %></b></button><% }) %></div>
    </div>
    <% if (!items.length) { %><div class="rp-empty"><b><%= st ? 'No articles yet' : 'Nothing to read yet' %></b><%= st ? 'Start with + New article above.' : 'Articles show up here when VOCTOS sends them to you.' %></div><% } else { %>
    <ul class="rp-list">
      <% items.forEach(function (c) { var k = keyOf(c); var n = lb.latest(c); var post = c.usedBy && usedOf.get(String(c.usedBy)); %>
        <li class="rp-item<%= k === 'changes' ? ' is-neg' : '' %><%= k === 'archived' ? ' is-done' : '' %>" data-k="<%= k %>">
          <div class="rp-lead" style="padding-top:2px"><span class="rc-ico">✎</span></div>
          <div>
            <div class="rp-src"><span><%= n ? 'Version ' + n : 'No draft yet' %></span><span>· <%= h.date(c.updatedAt) %></span><% if (post) { %><span>· in a guest post on <b style="color:var(--ink-2)"><%= post.domain %></b></span><% } %></div>
            <a class="rp-t" href="/link-building/content/<%= c._id %>" <%- h.dirAttr(c.title) %>><%= c.title %></a>
            <% if (k === 'changes' && c.clientNote) { %><p class="rp-q" style="--c:var(--neg)"><b><%= c.clientNoteBy || 'The client' %>:</b> <%= c.clientNote %></p><% } %>
          </div>
          <div class="rp-side">
            <span class="rp-lab sc-<%= lb.CSTATUS_C[k] %>"><%= label(k) %></span>
            <% if (!st && c.status === 'client_review') { %><a class="btn btn-primary btn-sm" href="/link-building/content/<%= c._id %>">Read and approve</a><% } %>
            <% if (st && k === 'approved') { %><a class="btn btn-sm" href="/link-building/posts">Use in a guest post</a><% } %>
            <% if (post) { %><a class="btn btn-sm" href="/link-building/posts/<%= c.usedBy %>">The guest post</a><% } %>
          </div>
        </li>
      <% }) %>
    </ul>
    <% } %>
    <div class="rp-note"><b>How it works.</b> We write the article and send it to you to read. You approve that version or tell us what to change; a change after your approval comes back to you. Approved articles go into a guest post on <a href="/link-building/posts">Guest Posts</a>, one article per post.</div>
  </section>
</div>
<style>
  .rc-new > summary{list-style:none; border-bottom:0} .rc-new > summary::-webkit-details-marker{display:none} .rc-new[open] > summary{border-bottom:1px solid var(--line-2)}
  .rc-ico{display:inline-flex; width:22px; height:22px; border-radius:7px; align-items:center; justify-content:center; background:var(--surface-2); color:var(--ink-2); font-size:12px}
</style>
<%- include('../partials/rep-foot') %>
