<%

  var st = !!locals.showStaff;
  var active = targets.filter(function (t) { return t.active !== false; });
  var KIND = { service: 'Service page', product: 'Product page', article: 'Article', money: 'Money page', home: 'Home page', other: 'Page' };
  var AC = { branded: '#1F4E79', partial: '#3A86C8', exact: '#E2A03F', generic: '#9AA3AE', naked: '#8E6BBF' };
%>
<%- include('../partials/lb-shell') %>

<p class="claim-lede"><% if (!active.length) { %>No target pages yet.<% } else { %><%= active.length %> page<%= active.length === 1 ? '' : 's' %> on <%= brand %>'s site we are building links to.<% } %></p>
<p class="claim-sub">Which pages get links, with which words, and how many each already has. The anchor mix is kept natural: rules are set per client, not one ratio for everyone.</p>

<div class="bento" style="margin-top:18px">
  <section class="card b12 rp-sec">
    <div class="rp-sh"><div><div class="rp-kick">Anchor mix</div><h3>Live links by anchor type</h3></div><div class="rp-sm"><%= mix.total %> live link<%= mix.total === 1 ? '' : 's' %> from guest posts</div></div>
    <div class="rp-body">
      <% if (!mix.total) { %><div class="rp-help">Shown once there are live links from guest posts.</div><% } else { %>
      <div class="lb-bar" style="height:14px"><% Object.keys(lb.ANCHOR).forEach(function (k) { if (!mix.n[k]) return; %><i style="width:<%= mix.n[k] / mix.total * 100 %>%; background:<%= AC[k] %>" title="<%= lb.ANCHOR[k] %>: <%= mix.n[k] %>"></i><% }) %></div>
      <div class="rp-filters" style="margin-top:10px; font-size:12px"><% Object.keys(lb.ANCHOR).forEach(function (k) { %><span class="rp-lab" style="--c:<%= AC[k] %>; font-weight:500"><%= lb.ANCHOR[k] %> <b><%= mix.pct(k) %>%</b></span><% }) %></div>
      <% mix.warn.forEach(function (w) { %><div class="lb-warn"><%= w %></div><% }) %>
      <% } %>
    </div>
  </section>

  <% if (st) { %>
  <section class="card b12 rp-sec">
    <details class="rc-new"<%= targets.length ? '' : ' open' %>><summary class="rp-sh" style="cursor:pointer; list-style:none"><div><div class="rp-kick">Staff</div><h3>+ Add a target page</h3></div></summary>
      <form class="rep-form rp-body js-rep" method="POST" action="/api/links/targets">
        <div class="full"><label>Page address</label><input name="url" required placeholder="https://client.com/page"></div>
        <div><label>Name</label><input name="title" placeholder="Pricing page"></div>
        <div><label>Kind</label><select name="kind"><% Object.keys(KIND).forEach(function (k) { %><option value="<%= k %>"><%= KIND[k] %></option><% }) %></select></div>
        <div><label>Priority</label><select name="priority"><option value="high">High</option><option value="medium" selected>Medium</option><option value="low">Low</option></select></div>
        <div><label>Links wanted</label><input name="goal" type="number" min="0"></div>
        <div class="full"><label>Keywords</label><input name="keywords" placeholder="Separate with commas"></div>
        <div class="full"><label>Planned anchors</label><input name="anchors" placeholder="Separate with commas"></div>
        <div class="full"><button class="btn btn-primary btn-sm" type="submit">Add page</button></div>
      </form>
    </details>
  </section>
  <% } %>

  <section class="card b12 rp-sec">
    <div class="rp-sh"><div><h3>Target pages</h3></div></div>
    <% if (!targets.length) { %><div class="rp-empty"><b>No pages in the plan yet</b><%= st ? 'Add the client pages that should earn links.' : 'Your VOCTOS team adds the pages we build links to.' %></div><% } else { %>
    <div class="lb-wrap"><table class="lb-tbl">
      <thead><tr><th>Page</th><th>Priority</th><th>Live links</th><th>Sites</th><th>In progress</th><th>Planned anchors</th></tr></thead>
      <tbody>
      <% targets.forEach(function (t) { var p = per.get(String(t._id)) || { live: 0, domains: new Set(), planned: 0 }; %>
        <tr style="<%= t.active === false ? 'opacity:.55' : '' %>">
          <td><a href="<%= t.url %>" target="_blank" rel="noopener" style="font-weight:600; color:var(--ink)"><%= t.title || lb.path(t.url) %></a><div class="rr-meta"><%= KIND[t.kind] || 'Page' %> · <%= lb.path(t.url) %><%= t.active === false ? ' · off the plan' : '' %></div><% if ((t.keywords || []).length) { %><div class="rr-meta"><%= t.keywords.join(', ') %></div><% } %></td>
          <td><span class="rp-lab plain"><%= t.priority %></span></td>
          <td><b><%= p.live %></b><%= t.goal ? ' / ' + t.goal : '' %><% if (t.goal) { %><div class="lb-meter" style="width:90px"><i style="width:<%= Math.min(100, p.live / t.goal * 100) %>%"></i></div><% } %></td>
          <td><%= p.domains.size %></td>
          <td><%= p.planned %></td>
          <td class="rr-meta"><%= (t.anchors || []).join(', ') || '—' %>
            <% if (st) { %><form class="js-rep" method="POST" action="/api/links/targets/<%= t._id %>" style="margin-top:6px"><input type="hidden" name="<%= t.active === false ? 'active' : 'remove' %>" value="1"><button class="btn btn-sm" type="submit" style="padding:2px 8px; font-size:11.5px"><%= t.active === false ? 'Back on the plan' : 'Take off the plan' %></button></form><% } %></td>
        </tr>
      <% }) %>
      </tbody>
    </table></div>
    <% } %>
  </section>
</div>
<style>.rc-new > summary::-webkit-details-marker{display:none} .rc-new[open] > summary{border-bottom:1px solid var(--line-2)}</style>
<%- include('../partials/rep-foot') %>
