<%

  var st = !!locals.showStaff;
  var STATUS = { planned: 'Planned', live: 'Live', indexed: 'Google has it', ranking: 'In the top 20' };
  var STC = { planned: 'accepted', live: 'waiting', indexed: 'in_progress', ranking: 'resolved' };
  var TYPES = { site: 'Page on your site', profile: 'Profile', review: 'Review site', pr: 'Press or interview', wikidata: 'Wikidata', directory: 'Directory listing', video: 'Video', other: 'Other' };
  var APP = { '': '', waiting: 'Waiting for your OK', approved: 'Approved', changes: 'Changes asked' };
  var APC = { waiting: 'waiting', approved: 'approved', changes: 'changes' };
  var path = function (u) { try { var x = new URL(u); return x.hostname.replace(/^www\./, '') + (x.pathname.length > 1 ? decodeURIComponent(x.pathname).slice(0, 50) : ''); } catch (e) { return u || ''; } };
  var host = function (u) { try { return new URL(u).hostname.replace(/^www\./, ''); } catch (e) { return ''; } };
  var negLabel = {}; negatives.forEach(function (n) { negLabel[n.key] = n.title || n.domain || n.key; });
  var lastRank = function (a, q) { var r = (a.ranks || []).filter(function (x) { return x.query === q; }); return r.length ? r[r.length - 1] : null; };
  var firstRank = function (a, q) { var r = (a.ranks || []).filter(function (x) { return x.query === q && x.pos; }); return r.length ? r[0] : null; };
  var last = chart[chart.length - 1], first = chart[0];
%>
<%- include('../partials/rep-shell') %>

<p class="claim-lede"><% if (last) { %><% if (last.neg) { %><em><%= last.neg %> negative result<%= last.neg === 1 ? '' : 's' %></em> on page one<%= chart.length > 1 && first.neg !== last.neg ? ' (' + first.neg + ' on ' + h.date(first.at) + ')' : '' %>.<% } else { %><em>No negative results</em> on page one.<% } %><% } else { %>Counter pages for negative results.<% } %></p>
<p class="claim-sub">Real pages only. Anything in your name needs your approval.</p>

<div class="bento" style="margin-top:18px">
  <section class="card b12 rp-sec">
    <div class="rp-sh"><div><div class="rp-kick"><%= last ? 'Search: ' + last.query : 'Google' %></div><h3>Page one over time</h3></div></div>
    <div class="rp-body">
      <% if (!chart.length) { %><div class="rp-empty"><b>No Google checks yet</b></div><% } else { %>
      <div class="sp-chart">
        <% chart.forEach(function (c) { var tot = Math.max(10, c.neg + c.good + c.neutral + c.other); %>
          <div class="sp-col" title="<%= h.date(c.at) %>: <%= c.good %> yours or positive, <%= c.neutral %> neutral, <%= c.neg %> negative">
            <div class="sp-bar"><i class="o" style="flex:<%= tot - c.neg - c.good - c.neutral %>"></i><i class="n" style="flex:<%= c.neutral %>"></i><i class="g" style="flex:<%= c.good %>"></i><i class="x" style="flex:<%= c.neg %>"></i></div>
            <b class="<%= c.neg ? 'bad' : '' %>"><%= c.neg %></b><span><%= h.date(c.at) %></span>
          </div>
        <% }) %>
      </div>
      <div class="rp-filters" style="margin-top:14px; font-size:12px"><span class="rp-lab rc-negative" style="font-weight:500">Negative</span><span class="rp-lab rc-positive" style="font-weight:500">Yours or positive</span><span class="rp-lab rc-neutral" style="font-weight:500">Neutral</span><span class="rp-lab rc-unclassified" style="font-weight:500">Other</span><span class="rp-sm">Number = negative results on page one.</span></div>
      <% } %>
    </div>
  </section>

  <section class="card b12 rp-sec">
    <div class="rp-sh"><div><h3>Counter pages</h3></div><div class="rp-sm"><span><%= assets.length %></span></div></div>
    <% if (!assets.length) { %><div class="rp-empty"><b>None yet</b></div><% } else { %>
    <ul class="rp-list">
      <% assets.forEach(function (a) { %>
        <li class="rp-item" id="a-<%= a._id %>">
          <div class="rp-lead" style="padding-top:4px"><img src="https://www.google.com/s2/favicons?domain=<%= host(a.url) %>&sz=32" alt="" width="18" height="18" style="border-radius:4px"></div>
          <div>
            <div class="rp-src"><span><%= TYPES[a.type] %></span><span>· <%= path(a.url) %></span></div>
            <a class="rp-t" href="<%= a.url %>" target="_blank" rel="noopener nofollow"><%= a.title || path(a.url) %></a>
            <% if ((a.targets || []).length) { %><div class="rp-chips"><% a.targets.forEach(function (q) { var lr = lastRank(a, q), fr = firstRank(a, q); %><span class="rp-lab plain" style="font-weight:500" <%- h.dirAttr(q) %>><%= q %>: <b><%= lr && lr.pos ? '#' + lr.pos : 'not in top 20 yet' %></b><%= fr && lr && lr.pos && fr.pos !== lr.pos ? ' (was #' + fr.pos + ')' : '' %></span><% }) %></div><% } %>
            <% if ((a.against || []).length) { %><div class="rp-why">Meant to push down: <% a.against.forEach(function (k, i) { %><b><%= String(negLabel[k] || k).slice(0, 60) %></b><%= i < a.against.length - 1 ? ', ' : '' %><% }) %></div><% } %>
            <% if (a.approval === 'waiting' && !st) { %>
              <form class="js-rep" method="POST" action="/api/reputation/assets/<%= a._id %>/approve" style="display:flex; gap:8px; margin-top:12px">
                <button class="btn btn-primary btn-sm" name="decision" value="approve">Approve</button>
                <button class="btn btn-sm" name="decision" value="changes">Ask for changes</button>
              </form>
            <% } %>
            <% if (st && (!a.approval || a.approval === 'changes')) { %>
              <form class="js-rep" method="POST" action="/api/reputation/assets/<%= a._id %>" style="margin-top:10px"><button class="btn btn-sm" name="needsApproval" value="1">Send to the client for approval</button></form>
            <% } %>
          </div>
          <div class="rp-side">
            <% if (st) { %>
              <form class="rp-ctl" method="POST" action="/api/reputation/assets/<%= a._id %>"><select class="rp-sel sc-<%= STC[a.status] %>" name="status" data-auto="reload" aria-label="Status"><% Object.keys(STATUS).forEach(function (k) { %><option value="<%= k %>" <%= a.status === k ? 'selected' : '' %>><%= STATUS[k] %></option><% }) %></select></form>
            <% } else { %><span class="rp-lab sc-<%= STC[a.status] %>"><%= STATUS[a.status] %></span><% } %>
            <% if (a.approval) { %><span class="rp-lab sc-<%= APC[a.approval] %>"><%= st && a.approval === 'waiting' ? 'With the client' : APP[a.approval] %></span><% } %>
          </div>
        </li>
      <% }) %>
    </ul>
    <% } %>
  </section>

  <% if (st) { %>
  <section class="card b12 rp-sec">
    <div class="rp-sh"><div><div class="rp-kick">Staff</div><h3>Add a counter page</h3></div></div>
    <form class="js-rep rep-form rp-body" method="POST" action="/api/reputation/assets">
      <div class="full"><label>Link (where it is, or where it will be)</label><input name="url" placeholder="https://"></div>
      <div><label>Title</label><input name="title"></div>
      <div><label>Kind of page</label><select name="type"><% Object.keys(TYPES).forEach(function (k) { %><option value="<%= k %>"><%= TYPES[k] %></option><% }) %></select></div>
      <div><label>Status</label><select name="status"><option value="planned">Planned</option><option value="live">Live</option></select></div>
      <div class="full"><label>Searches it should rank for (one per line)</label><textarea name="targets" rows="2"><%= queries.slice(0, 1).join('\n') %></textarea></div>
      <div class="full"><label>Negative results it should push down</label>
        <select name="against" multiple size="<%= Math.min(5, Math.max(2, negatives.length)) %>"><% negatives.forEach(function (n) { %><option value="<%= n.url %>" <%= against && n.url === against ? 'selected' : '' %>><%= (n.title || n.domain || n.key).slice(0, 90) %></option><% }) %></select>
        <% if (!negatives.length) { %><div class="rp-sm" style="margin-top:4px">No pages are labelled negative yet.</div><% } %></div>
      <div class="full"><label style="text-transform:none; display:flex; gap:8px; align-items:center; font-size:13px; color:var(--ink)"><input type="checkbox" name="needsApproval" value="1" style="width:auto"> It goes out in the client's name, so they need to approve it</label></div>
      <div><button class="btn btn-primary btn-sm">Add page</button></div>
    </form>
  </section>
  <% } %>
</div>
<style>
  .sp-chart{display:flex; align-items:flex-end; gap:12px; height:180px}
  .sp-col{flex:1; max-width:72px; height:100%; display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0}
  .sp-bar{flex:1; width:100%; display:flex; flex-direction:column; gap:2px; border-radius:10px; overflow:hidden}
  .sp-bar i{display:block} .sp-bar i.o{background:#DDE1E7} .sp-bar i.n{background:#B4BBC5} .sp-bar i.g{background:var(--pos)} .sp-bar i.x{background:var(--neg)}
  .sp-col b{font-size:13px; color:var(--ink)} .sp-col b.bad{color:var(--neg)} .sp-col span{font-size:11px; color:var(--muted-2); white-space:nowrap}
</style>
<%- include('../partials/rep-foot') %>
