<%

  var st = !!locals.showStaff;
  var label = function (s) { return (!st && lb.STAGE_CLIENT[s]) || lb.STAGE[s] || s; };
  var waitingNow = counts.client_review || 0;
  var CHIPS = [['', 'All', posts.length]].concat(['site', 'site_approval', 'topic', 'draft', 'client_review', 'changes', 'outreach', 'published', 'verified', 'cancelled'].map(function (k) { return [k, label(k), counts[k] || 0]; }));
%>
<%- include('../partials/lb-shell') %>

<p class="claim-lede"><% if (!posts.length) { %>No guest posts yet.<% } else if (waitingNow) { %><em><%= waitingNow %> article<%= waitingNow === 1 ? '' : 's' %></em> <%= st ? 'with the client for approval' : 'waiting for your approval' %>.<% } else { %><%= posts.length %> guest post<%= posts.length === 1 ? '' : 's' %>, <%= (counts.verified || 0) %> verified live.<% } %></p>
<p class="claim-sub"><%= st ? 'Pick an approved article from Content Approvals, the site and its links. Send it to the publisher, then mark it published with the live address: every link is checked the moment you do.' : 'Articles you approved, published on other sites with links to yours. Once live, every link is checked every two weeks on Live Links.' %></p>

<div class="bento" style="margin-top:18px">
  <% if (st) { %>
  <section class="card b12 rp-sec">
    <details class="rc-new"<%= posts.length ? '' : ' open' %>>
      <summary class="rp-sh" style="cursor:pointer"><div><div class="rp-kick">Staff</div><h3>+ New guest post</h3></div></summary>
      <form class="js-rep gpf" method="POST" action="/api/links/posts">
        <div class="gpf-sec">
          <div class="gpf-h"><span class="gpf-n">1</span><div><b>The article</b><span>Picked from Content Approvals. An article already used by another guest post is not listed.</span></div></div>
          <div class="gpf-grid">
            <label class="gpf-f gpf-wide"><span>Article</span><% if (contents.length) { %><select name="content" required><option value="">Pick an article…</option><% contents.forEach(function (c) { var ok = c.status === 'approved'; %><option value="<%= c._id %>"><%= c.title %><%= ok ? '' : ' (' + (lb.CSTATUS[c.status] || c.status).toLowerCase() + ')' %></option><% }) %></select><% } else { %><span class="gpf-empty">No article free to use. <a href="/link-building/content">Add one on Content Approvals →</a></span><% } %></label>
            <label class="gpf-f"><span>Site</span><select name="site"><option value="">New site, type it →</option><% sites.forEach(function (s) { %><option value="<%= s._id %>"><%= s.domain %><%= s.dr != null ? ' · DR ' + s.dr : '' %><%= s.status === 'proposed' ? ' (proposed)' : '' %></option><% }) %></select></label>
            <label class="gpf-f"><span>…or a new site</span><input name="domain" placeholder="publisher.com"></label>
          </div>
        </div>
        <div class="gpf-sec">
          <div class="gpf-h"><span class="gpf-n">2</span><div><b>Links in the article</b><span>One row per link to the client's site. The anchor type is worked out from the words.</span></div></div>
          <div class="gpf-in"><%- include('../partials/lb-link-rows', { rows: [], targets: targets, lb: lb }) %></div>
        </div>
        <div class="gpf-sec">
          <div class="gpf-h"><span class="gpf-n">3</span><div><b>Cost</b><span>Optional. Internal, never shown to the client.</span></div></div>
          <div class="gpf-grid">
            <label class="gpf-f"><span>Cost (internal)</span><input name="cost" type="number" min="0" step="1" placeholder="USD"></label>
          </div>
        </div>
        <div class="gpf-foot"><span>Starts as <b>Ready to send</b>. It goes to the publisher once its article is approved.</span><button class="btn btn-primary btn-sm" type="submit">Add guest post</button></div>
      </form>
    </details>
  </section>
  <% } %>

  <section class="card b12 rp-sec rep-fbox">
    <div class="rp-sh">
      <div><h3>Guest posts</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] === 'verified' || c[0] === 'published' ? 'pos' : 'muted-2' %>)"><% if (i) { %><i></i><% } %><%= c[1] %> <b><%= c[2] %></b></button><% }) %></div>
    </div>
    <% if (!posts.length) { %><div class="rp-empty"><b><%= st ? 'No guest posts yet' : 'Nothing here yet' %></b><%= st ? 'Start with + New guest post above.' : 'Guest posts appear here as your VOCTOS team starts them.' %></div><% } else { %>
    <ul class="rp-list">
      <% posts.forEach(function (p) { var n = lb.latest(p); var _ord = lb.orderOf(p); var at = _ord.indexOf(p.stage); %>
        <li class="rp-item<%= p.stage === 'changes' ? ' is-neg' : '' %><%= p.stage === 'cancelled' ? ' is-done' : '' %>" data-k="<%= p.stage %>">
          <div class="rp-lead" style="padding-top:4px"><img src="https://www.google.com/s2/favicons?domain=<%= p.domain %>&sz=32" alt="" width="18" height="18"></div>
          <div>
            <% var _pl = linksOf(p); %><div class="rp-src"><b style="color:var(--ink-2)"><%= p.domain %></b><% if (_pl.length === 1) { %><span>· → <%= lb.path(_pl[0].targetUrl) %></span><% if (_pl[0].anchor) { %><span>· “<%= _pl[0].anchor %>”</span><% } %><% } else { %><span title="<%= _pl.map(function (k) { return lb.path(k.targetUrl) + (k.anchor ? ' “' + k.anchor + '”' : ''); }).join('\n') %>">· <%= _pl.length %> links → <%= _pl.map(function (k) { return lb.path(k.targetUrl); }).join(', ') %></span><% } %><span>· <%= h.date(p.updatedAt) %></span></div>
            <a class="rp-t" href="/link-building/posts/<%= p._id %>"><%= p.title || 'Untitled' %></a>
            <% if (p.stage !== 'cancelled') { %><div class="lb-pipe"><% _ord.forEach(function (k, i) { if (k === 'changes' && p.stage !== 'changes') return; if (k === 'site_approval' && !cfg.requireSiteApproval && p.stage !== 'site_approval') return; %><span class="<%= k === p.stage ? (k === 'changes' ? 'bad' : 'now') : (i < at ? 'done' : '') %>"><%= label(k) %></span><% }) %></div><% } %>
            <% if (p.stage === 'changes' && p.clientNote) { %><p class="rp-q" style="--c:var(--neg)"><b><%= p.clientNoteBy || 'The client' %>:</b> <%= p.clientNote %></p><% } %>
          </div>
          <div class="rp-side">
            <span class="rp-lab sc-<%= lb.STAGE_C[p.stage] || 'accepted' %>"><%= label(p.stage) %></span>
            <% if (n) { %><span class="rr-meta">Version <%= n %><%= p.approvedVersion === n ? ' · approved' : '' %></span><% } %>
            <% if (!st && p.stage === 'client_review') { %><a class="btn btn-primary btn-sm" href="/link-building/posts/<%= p._id %>">Read and approve</a><% } %>
            <% if (st && p.cost != null) { %><span class="rr-meta" title="Internal, never shown to the client"><%= h.money(p.cost, p.currency) %></span><% } %>
            <% if (p.publishedUrl) { %><a class="btn btn-sm" href="<%= p.publishedUrl %>" target="_blank" rel="noopener">Live ↗</a><% } %>
          </div>
        </li>
      <% }) %>
    </ul>
    <% } %>
    <div class="rp-note"><b>How it works.</b> You approve each article on <a href="/link-building/content">Content Approvals</a>. We pick a site<%= cfg.requireSiteApproval ? ' (and ask you to approve it)' : '' %> and the pages it links to, and send it to the publisher. Once it is published, the link is checked every two weeks on <a href="/link-building/links">Live Links</a>, and counts toward the month after its first successful check.</div>
  </section>
</div>
<style>
  .gpf-sec{padding:18px 22px 20px; border-top:1px solid var(--line-2)} .gpf-sec:first-child{border-top:0}
  .gpf-h{display:flex; gap:12px; align-items:flex-start; margin-bottom:14px}
  .gpf-h b{display:block; font-size:14.5px; color:var(--ink)} .gpf-h span{display:block; font-size:12.5px; color:var(--muted); margin-top:2px}
  .gpf-n{flex:none; width:26px; height:26px; border-radius:8px; background:var(--surface-2); color:var(--ink-2); font-size:12.5px; font-weight:700; display:inline-flex !important; align-items:center; justify-content:center; margin:0 !important}
  .gpf-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 18px; padding-left:38px}
  .gpf-grid.gpf-dc{grid-template-columns:minmax(0, 3fr) minmax(0, 1fr)}
  .gpf-in{padding-left:38px}
  .gpf-wide{grid-column:1 / -1}
  .gpf-empty{font-size:13.5px; color:var(--muted); padding:10px 0} .gpf-empty a{color:var(--accent-strong); font-weight:600}
  .gpf-f{display:flex; flex-direction:column; gap:6px; min-width:0}
  .gpf-f > span{font-size:12.5px; font-weight:600; color:var(--ink)}
  .gpf-f input, .gpf-f select{width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); font:inherit; font-size:14px; box-sizing:border-box}
  .gpf-f input:focus, .gpf-f select:focus{outline:none; border-color:var(--accent-strong); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-strong) 18%, transparent)}
  .gpf-foot{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 22px; background:var(--surface-2); border-top:1px solid var(--line-2); font-size:12.5px; color:var(--muted)} .gpf-foot b{color:var(--ink-2)}
  @media (max-width:860px){ .gpf-grid, .gpf-grid.gpf-dc{grid-template-columns:minmax(0, 1fr); padding-left:0} .gpf-in{padding-left:0} .gpf-sec{padding:16px} }
  .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)}
</style>
<%- include('../partials/rep-foot') %>
