<%

  var st = !!locals.showStaff;
  var LAB = { draft: 'Draft', review: st ? 'With the client' : 'Waiting for you', changes: 'Changes asked', approved: 'Approved', published: 'Live' };
  var SC = { draft: 'accepted', review: 'waiting', changes: 'changes', approved: 'approved', published: 'resolved' };
  var host = function (u) { try { return new URL(u).hostname.replace(/^www\./, ''); } catch (e) { return ''; } };
  var where = function (a) { return a.publishedUrl ? host(a.publishedUrl) : a.destination === 'other' ? 'Another site' : 'Your WordPress'; };
  var targets = function (a) { return String(a.targetKeyword || '').split('\n').filter(Boolean); };

  var shown = st ? items : items.filter(function (a) { return a.status !== 'draft'; });
  var waitingNow = counts.review, back = counts.changes;
  var CHIPS = [['', 'All', shown.length], ['review', LAB.review, counts.review], ['changes', 'Changes asked', counts.changes], ['approved', 'Approved', counts.approved], ['published', 'Live', counts.published]];
  if (st) CHIPS.splice(1, 0, ['draft', 'Draft', counts.draft]);
%>
<%- include('../partials/rep-shell') %>

<p class="claim-lede"><% if (!shown.length) { %>No articles yet.<% } else if (waitingNow) { %><em><%= waitingNow %> article<%= waitingNow === 1 ? '' : 's' %></em> <%= st ? 'with the client for approval' : 'waiting for your approval' %>.<% } else if (st && back) { %><em><%= back %> article<%= back === 1 ? '' : 's' %></em> sent back with changes.<% } else { %><em><%= counts.published %></em> article<%= counts.published === 1 ? '' : 's' %> live.<% } %></p>
<p class="claim-sub"><%= st ? 'Articles, press releases and profile pages that push negative results down on Google. Write one, send it to the client, and publish it once they approve.' : 'Articles we write in your name to push negative results down on Google. Read each one before it goes live, then approve it or tell us what to change.' %></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="rep-form rp-body" method="POST" action="/api/reputation/content" enctype="multipart/form-data" id="rc-form">
        <div class="full"><label for="rc-title">Headline</label><input id="rc-title" name="title" required placeholder="The article's headline"></div>
        <div><label for="rc-kind">Kind of article</label><select id="rc-kind" name="repKind"><% Object.keys(KINDS).forEach(function (k) { %><option value="<%= k %>"><%= KINDS[k].label %></option><% }) %></select></div>
        <div><label for="rc-dest">Where it goes</label><select id="rc-dest" name="destination" class="rc-dest"><option value="wp">Your WordPress</option><option value="other">Another site (paste the link once it is live)</option></select></div>
        <div class="full"><label for="rc-target">Google searches it should show up for</label><input id="rc-target" name="targetKeyword" list="rc-q" placeholder="Pick from your tracked searches, or type one. Separate several with commas."><datalist id="rc-q"><% queries.forEach(function (q) { %><option value="<%= q %>"><% }) %></datalist></div>
        <div class="rc-wp"><label for="rc-cat">Category</label>
          <% if (categories.length) { %><select id="rc-cat" name="wpCategoryId"><option value="">No category</option><% categories.forEach(function (c) { %><option value="<%= c.id %>"><%= c.name %></option><% }) %></select>
          <% } else { %><div class="rp-help" style="padding-top:8px"><%= catError || 'No categories.' %></div><% } %></div>
        <div class="rc-wp"><label for="rc-img">Featured image</label><input id="rc-img" type="file" name="file" accept="image/*"></div>
        <div class="full"><label for="rc-mt">SEO title</label><input id="rc-mt" name="metaTitle" maxlength="120" placeholder="Optional. Blank uses the title."></div>
        <div class="full"><label for="rc-md">Meta description</label><input id="rc-md" name="metaDescription" maxlength="320" placeholder="Optional. About 155 characters."></div>
        <div class="full"><label for="rc-body">Article text</label><textarea id="rc-body" name="content" data-rte rows="10" data-placeholder="Write the article here. Headings, lists and links carry through to WordPress."></textarea></div>
        <div class="full"><button class="btn btn-primary btn-sm" type="submit">Save as draft</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"><% CHIPS.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] === 'published' || c[0] === 'approved' ? 'pos' : 'muted-2' %>)"><% if (i) { %><i></i><% } %><%= c[1] %> <b><%= c[2] %></b></button><% }) %></div>
    </div>
    <% if (!shown.length) { %><div class="rp-empty"><b><%= st ? 'No articles written yet' : 'No articles 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">
      <% shown.forEach(function (a) { var t = targets(a); %>
        <li class="rp-item<%= a.status === 'changes' ? ' is-neg' : '' %>" data-k="<%= a.status %>" id="c-<%= a._id %>">
          <div class="rp-lead" style="padding-top:4px"><% if (a.publishedUrl) { %><img src="https://www.google.com/s2/favicons?domain=<%= host(a.publishedUrl) %>&sz=32" alt="" width="18" height="18"><% } else { %><span class="rc-ico"><%= (KINDS[a.repKind] || KINDS.article).label.charAt(0) %></span><% } %></div>
          <div>
            <div class="rp-src"><span><%= (KINDS[a.repKind] || KINDS.article).label %></span><span>· <%= where(a) %></span><span>· <%= h.date(a.updatedAt) %></span></div>
            <a class="rp-t" href="/reputation/content/<%= a._id %>"><%= a.title || 'Untitled' %></a>
            <% if (t.length) { %><div class="rp-chips"><% t.forEach(function (q) { %><span class="rp-lab plain" style="font-weight:500" <%- h.dirAttr(q) %>><%= q %></span><% }) %></div><% } %>
            <% if (a.status === 'changes' && a.clientNote) { %><p class="rp-q" style="--c:var(--neg)"><b><%= a.clientNoteBy || 'The client' %>:</b> <%= a.clientNote %></p><% } %>
            <% if (a.status === 'published' && a.rank) { %><div class="rp-why">On Google: <b><%= a.rank.pos ? '#' + a.rank.pos : 'not in the top 20 yet' %></b><%= a.rank.query ? ' for ' + a.rank.query : '' %>, checked <%= h.date(a.rank.at) %></div><% } else if (a.status === 'published') { %><div class="rp-why">Tracked from the next Google check.</div><% } %>
          </div>
          <div class="rp-side">
            <span class="rp-lab sc-<%= SC[a.status] || 'accepted' %>"><%= LAB[a.status] || a.status %></span>
            <% if (!st && a.status === 'review') { %><a class="btn btn-primary btn-sm" href="/reputation/content/<%= a._id %>">Read and approve</a><% } %>
            <% if (st && (a.status === 'draft' || a.status === 'changes')) { %><form class="js-rep" method="POST" action="/api/reputation/content/<%= a._id %>/status"><input type="hidden" name="status" value="review"><button class="btn btn-sm">Send for approval</button></form><% } %>
            <% if (st && a.status === 'approved') { %><a class="btn btn-primary btn-sm" href="/reputation/content/<%= a._id %>#go-live"><%= a.destination === 'wp' ? 'Publish' : 'Add the live link' %></a><% } %>
            <% if (a.publishedUrl) { %><a class="btn btn-sm" href="<%= a.publishedUrl %>" target="_blank" rel="noopener">View live ↗</a><% } %>
          </div>
        </li>
      <% }) %>
    </ul>
    <% } %>
    <div class="rp-note"><b>How it works.</b> VOCTOS writes the article and sends it to you to read. You approve it or tell us what to change. Once it is live, we track where it ranks on <a href="/reputation/suppression">Suppression</a>, next to the negative results it should push down.</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:11.5px; font-weight:700}
  .rep-form .rc-wp[hidden]{display:none}
</style>
<script>
(function () {

  function sync(sel) { var f = sel.closest('form'); if (!f) return; f.querySelectorAll('.rc-wp').forEach(function (x) { x.hidden = sel.value !== 'wp'; }); }
  document.querySelectorAll('.rc-dest').forEach(sync);
  if (window.__rcBound) return; window.__rcBound = true;
  document.addEventListener('change', function (e) { if (e.target.matches && e.target.matches('.rc-dest')) sync(e.target); });
})();
</script>
<%- include('../partials/rep-foot') %>
