<%

  var st = !!locals.showStaff;
  var n = lb.latest(c);
  var v = (c.versions || []).find(function (x) { return x.n === n; });
  var approvedNow = c.status === 'approved' && c.approvedVersion === n;
  var k = c.status === 'approved' ? (c.usedBy ? 'used' : 'approved') : c.status;
%>
<%- include('../partials/lb-shell') %>

<p class="claim-sub" style="margin-top:4px"><span class="rp-lab sc-<%= lb.CSTATUS_C[k] %>"><%= (!st && c.status === 'client_review') ? 'Waiting for you' : lb.CSTATUS[k] %></span><% if (post) { %> &nbsp;In a guest post on <a href="/link-building/posts/<%= c.usedBy %>"><b><%= post.domain %></b></a><% if (post.publishedUrl) { %> · <a href="<%= post.publishedUrl %>" target="_blank" rel="noopener">live ↗</a><% } %><% } %></p>

<div class="bento" style="margin-top:18px">
  <% if (c.status === 'client_review' && v) { %>
  <section class="card b12 rp-sec" style="border-color:color-mix(in srgb, var(--accent-strong) 40%, var(--line))">
    <div class="rp-sh"><div><div class="rp-kick"><%= st ? 'With the client' : 'Waiting for you' %></div><h3>Version <%= n %> to approve</h3></div><div class="rp-sm">Sent <%= h.date(v.at) %></div></div>
    <div class="rp-body">
      <% var _vl = (v.links && v.links.length) ? v.links : (v.docUrl ? [v.docUrl] : []); if (_vl.length) { %><p style="margin:0 0 10px; display:flex; gap:8px; flex-wrap:wrap"><% _vl.forEach(function (u, i) { %><a class="btn btn-sm<%= i ? '' : ' btn-primary' %>" href="<%= u %>" target="_blank" rel="noopener"><%= i ? lb.host(u) + ' ↗' : 'Open the draft ↗' %></a><% }) %></p><% } %>
      <% if (v.text) { %><div class="rp-box" <%- h.dirAttr(v.text) %>><%= v.text %></div><% } %>
      <% if (v.note) { %><div class="rp-why"><b>Note:</b> <%= v.note %></div><% } %>
      <div class="rp-ctl row" style="gap:10px; align-items:flex-start">
        <form class="js-rep" method="POST" action="/api/links/content/<%= c._id %>/decision"><input type="hidden" name="version" value="<%= n %>"><input type="hidden" name="decision" value="approve"><button class="btn btn-primary btn-sm" type="submit"><%= st ? 'Record approval' : 'Approve this version' %></button></form>
        <form class="js-rep" method="POST" action="/api/links/content/<%= c._id %>/decision" style="display:flex; gap:8px; flex:1; min-width:260px"><input type="hidden" name="version" value="<%= n %>"><input type="hidden" name="decision" value="changes"><input class="rp-in" name="note" placeholder="What would you like changed?" style="flex:1"><button class="btn btn-sm" type="submit">Ask for changes</button></form>
      </div>
      <div class="rp-why">You approve this exact version. If we change it afterwards, it comes back to you first.</div>
    </div>
  </section>
  <% } %>

  <% if (c.status === 'changes' && c.clientNote) { %>
  <section class="card b12 rp-sec"><div class="rp-body"><p class="rp-q" style="--c:var(--neg); margin:0"><b><%= c.clientNoteBy || 'The client' %> asked for changes on <%= h.date(c.clientNoteAt) %>:</b> <%= c.clientNote %></p></div></section>
  <% } %>

  <% if (st && c.status !== 'archived') { %>
  <section class="card b12 rp-sec">
    <div class="rp-sh"><div><div class="rp-kick">Staff</div><h3>Next step</h3></div></div>
    <div class="rp-body" style="display:flex; flex-direction:column; gap:14px">
      <form class="js-rep rep-form" method="POST" action="/api/links/content/<%= c._id %>/version" style="margin:0">
        <div class="full"><label>Add version <%= n + 1 %>: links</label><%- include('../partials/lb-multi', { name: 'docUrl', values: [], placeholder: 'https://docs.google.com/document/d/…', add: '+ Add another link' }) %></div>
        <div class="full"><textarea name="text" rows="3" placeholder="…or paste the text"></textarea></div>
        <div class="full" style="display:flex; gap:8px"><input name="note" placeholder="What changed (optional)" style="flex:1"><button class="btn btn-sm" type="submit">Save version <%= n + 1 %></button></div>
        <% if (approvedNow) { %><div class="full rp-help">Version <%= n %> is approved. A new version goes back to the client before it can be used.</div><% } %>
      </form>
      <div style="display:flex; gap:8px; flex-wrap:wrap; align-items:center">
        <% if (n && ['draft', 'changes'].includes(c.status)) { %>
          <% if (cfg.requireContentApproval) { %><form class="js-rep" method="POST" action="/api/links/content/<%= c._id %>/stage"><input type="hidden" name="to" value="client_review"><button class="btn btn-primary btn-sm" type="submit">Send version <%= n %> to the client</button></form>
          <% } else { %><form class="js-rep" method="POST" action="/api/links/content/<%= c._id %>/stage"><input type="hidden" name="to" value="approved_internal"><button class="btn btn-primary btn-sm" type="submit">Mark ready to use</button></form><% } %>
        <% } %>
        <% if (approvedNow && !c.usedBy) { %><a class="btn btn-primary btn-sm" href="/link-building/posts">Use it in a guest post</a><% } %>
        <% if (!c.usedBy) { %><form class="js-rep" method="POST" action="/api/links/content/<%= c._id %>/stage" data-confirm="Archive this article?"><input type="hidden" name="to" value="archived"><button class="btn btn-sm" type="submit">Archive</button></form><% } %>
      </div>
      <form class="js-rep" method="POST" action="/api/links/content/<%= c._id %>" style="display:flex; gap:8px; margin:0"><input class="rp-in" name="title" value="<%= c.title %>" style="flex:1"><button class="btn btn-sm" type="submit">Rename</button></form>
    </div>
  </section>
  <% } else if (st) { %>
  <section class="card b12 rp-sec"><div class="rp-body"><form class="js-rep" method="POST" action="/api/links/content/<%= c._id %>/stage"><input type="hidden" name="to" value="restore"><button class="btn btn-sm" type="submit">Restore</button></form></div></section>
  <% } %>

  <section class="card b7 rp-sec">
    <div class="rp-sh"><div><h3>Versions</h3></div></div>
    <% if (!(c.versions || []).length) { %><div class="rp-empty"><b>No draft yet</b><%= st ? 'Add the first version above.' : 'The article is being written.' %></div><% } else { %>
    <ul class="rp-list"><% c.versions.slice().reverse().forEach(function (x) { %>
      <li class="rp-item" style="grid-template-columns:40px minmax(0, 1fr) auto"><div class="rp-lead">v<%= x.n %></div><div><div class="rp-src"><%= h.date(x.at) %><%= x.by ? ' · ' + x.by : '' %></div><% ((x.links && x.links.length) ? x.links : (x.docUrl ? [x.docUrl] : [])).forEach(function (u) { %><a class="lb-url" style="display:block" href="<%= u %>" target="_blank" rel="noopener"><%= u %></a><% }) %><% if (x.text) { %><details class="rp-det"><summary>Read the text</summary><div class="rp-box" <%- h.dirAttr(x.text) %>><%= x.text %></div></details><% } %><% if (x.note) { %><div class="rp-why"><%= x.note %></div><% } %></div><div class="rp-side"><% if (c.approvedVersion === x.n) { %><span class="rp-lab sc-approved">Approved<%= c.approvedBy ? ' by ' + c.approvedBy : '' %></span><% } %></div></li>
    <% }) %></ul>
    <% } %>
  </section>

  <section class="card b5 rp-sec">
    <div class="rp-sh"><div><h3>History</h3></div></div>
    <div class="rp-body"><ul class="rep-log"><% (c.log || []).slice().reverse().forEach(function (e) { %><li><b><%= e.by %></b> <%= e.what %> <span class="rr-meta">· <%= h.date(e.at) %></span></li><% }) %></ul></div>
  </section>
</div>
<%- include('../partials/rep-foot') %>
