<%

  var st = !!locals.showStaff;
  var Q = [
    ['person', 'About a person, not only the company'],
    ['personalData', 'Shows personal details (phone, address, ID, bank details, private photos)'],
    ['changed', 'Page changed or removed, but Google shows the old version'],
    ['falseFact', 'False statement of fact (not an opinion)'],
    ['courtOrder', 'Covered by a court order'],
    ['payToRemove', 'Site charges to remove it'],
    ['euUk', 'Person lives in the EU or UK'],
    ['review', 'Google Maps review'],
    ['policy', 'Breaks the site\'s rules (spam, hate, fake, conflict of interest)'],
    ['social', 'On a social or community site (Facebook, Reddit, YouTube, Trustpilot…)'],
    ['ai', 'Appears in ChatGPT answers'],
    ['honestOpinion', 'Honest negative opinion or experience']
  ];
  var STATUS = { draft: 'Draft', submitted: 'Submitted', under_review: 'Being reviewed', approved: 'Approved', rejected: 'Rejected', appealed: 'Appealed' };
  var STC = { draft: 'accepted', submitted: 'waiting', under_review: 'waiting', approved: 'resolved', rejected: 'rejected', appealed: 'in_progress' };
  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 caseOf = {}; cases.forEach(function (c) { caseOf[String(c._id)] = c; });
  var WHY = { 'for individuals only': 'People only', 'does not fit what you described': 'Doesn\'t apply' };
%>
<%- include('../partials/rep-shell') %>

<p class="claim-lede">Removal requests, <em>official routes only</em>.</p>
<p class="claim-sub">Check eligibility before filing. Google is rechecked after every decision.</p>

<div class="bento" style="margin-top:18px">
  <section class="card b5 rp-sec">
    <div class="rp-sh"><div><div class="rp-kick">Step 1</div><h3>Describe the content</h3></div></div>
    <form method="GET" action="/reputation/removals" class="rp-body">
      <input type="hidden" name="check" value="1">
      <% if (pre) { %><input type="hidden" name="case" value="<%= pre._id %>"><div class="rm-for">Case: <b><%= pre.title %></b></div><% } %>
      <div class="rm-qs">
        <% Q.forEach(function (q) { %><label class="rm-q"><input type="checkbox" name="<%= q[0] %>" value="1" <%= answers[q[0]] ? 'checked' : '' %>><span><%= q[1] %></span></label><% }) %>
      </div>
      <button class="btn btn-primary btn-sm" style="margin-top:14px" type="submit">Check routes</button>
    </form>
  </section>

  <section class="card b7 rp-sec">
    <% if (!checked) { %>
      <div class="rp-sh"><div><div class="rp-kick">Step 2</div><h3>The official routes</h3></div><div class="rp-sm"><span>Tick what applies</span></div></div>
      <ul class="rp-list">
        <% ROUTES.forEach(function (r) { %><li class="rp-item"><div class="rp-lead">·</div><div><div class="rp-src"><%= r.channel %><% if (r.who === 'person') { %><span class="rp-lab plain" style="font-weight:500">People only</span><% } %></div><div class="rp-t" style="font-size:14px"><%= r.name %></div><p class="rp-sn"><%= r.note %></p></div><div class="rp-side"></div></li><% }) %>
      </ul>
    <% } else { %>
      <div class="rp-sh"><div><div class="rp-kick">Step 2</div><h3><%= result.open.length %> route<%= result.open.length === 1 ? '' : 's' %> open</h3></div><div class="rp-sm"><a href="/reputation/removals<%= pre ? '?case=' + pre._id : '' %>">Start over</a></div></div>
      <% result.warnings.forEach(function (w) { %><div class="rm-warn"><%= w %></div><% }) %>
      <ul class="rp-list">
        <% result.open.forEach(function (r) { %>
          <li class="rp-item">
            <div class="rp-lead"><span class="rm-ok">✓</span></div>
            <div>
              <div class="rp-src"><%= r.channel %></div>
              <div class="rp-t" style="font-size:14px"><%= r.name %></div>
              <p class="rp-sn"><%= r.note %></p>
              <% if (st) { %>
                <form class="js-rep rm-draft" method="POST" action="/api/reputation/removals">
                  <input type="hidden" name="route" value="<%= r.id %>">
                  <input class="rp-in" name="url" placeholder="Link to remove" value="<%= pre && pre.source && pre.source.url || '' %>">
                  <select class="rp-in" name="case"><option value="">No case</option><% cases.forEach(function (c) { %><option value="<%= c._id %>" <%= pre && String(pre._id) === String(c._id) ? 'selected' : '' %>><%= String(c.title).slice(0, 60) %></option><% }) %></select>
                  <select class="rp-in" name="filedBy"><option value="representative">Filed by VOCTOS</option><option value="client">Filed by the client</option></select>
                  <label class="rp-sm"><input type="checkbox" name="authorised" value="1"> written consent on file</label>
                  <button class="btn btn-sm btn-primary">Create request</button>
                </form>
              <% } %>
            </div>
            <div class="rp-side"><% if (r.link) { %><a class="btn btn-sm" href="<%= r.link %>" target="_blank" rel="noopener">Official form ↗</a><% } %></div>
          </li>
        <% }) %>
      </ul>
      <% if (result.closed.length) { %>
        <details class="rp-det" style="padding:0 22px 16px"><summary><%= result.closed.length %> route<%= result.closed.length === 1 ? '' : 's' %> that don't apply</summary>
          <ul class="rp-list" style="margin-top:6px"><% result.closed.forEach(function (r) { %><li class="rp-item is-done" style="padding-left:0; padding-right:0"><div class="rp-lead">✕</div><div><div class="rp-src"><%= r.channel %></div><div style="font-size:13.5px; color:var(--ink)"><%= r.name %></div><div class="rp-why"><%= WHY[r.why] || r.why %></div></div><div class="rp-side"></div></li><% }) %></ul>
        </details>
      <% } %>
    <% } %>
  </section>

  <section class="card b12 rp-sec">
    <div class="rp-sh"><div><div class="rp-kick">Step 3</div><h3>Requests</h3></div><div class="rp-sm"><span><%= requests.length %></span></div></div>
    <% if (!requests.length) { %><div class="rp-empty"><b>No requests yet</b></div><% } else { %>
    <ul class="rp-list">
      <% requests.forEach(function (r) { var cs = r.case && caseOf[String(r.case)]; %>
        <li class="rp-item" id="r-<%= r._id %>">
          <div class="rp-lead"><img src="https://www.google.com/s2/favicons?domain=<%= (function () { try { return new URL(r.url).hostname; } catch (e) { return 'google.com'; } })() %>&sz=32" alt="" width="18" height="18" style="border-radius:4px"></div>
          <div>
            <div class="rp-src"><span><%= r.channel %>: <%= r.kind %></span></div>
            <% if (r.url) { %><a class="rp-t" href="<%= r.url %>" target="_blank" rel="noopener nofollow" style="font-size:14px"><%= path(r.url) %></a><% } %>
            <div class="rp-why">
              <%= r.filedBy === 'client' ? 'Filed by the client.' : (r.authorised ? 'Filed by VOCTOS, consent on file.' : 'Filed by VOCTOS. Consent missing.') %>
              Started <%= h.date(r.dates && r.dates.draft || r.createdAt) %><%= r.dates && r.dates.submitted ? ', submitted ' + h.date(r.dates.submitted) : '' %><%= r.dates && r.dates.decided ? ', decided ' + h.date(r.dates.decided) : '' %>.<%= r.ticket ? ' Reference: ' + r.ticket + '.' : '' %>
              <% if (cs) { %><a href="/reputation/cases?status=all&open=<%= cs._id %>#c-<%= cs._id %>">Case</a><% } %>
            </div>
            <% if (r.outcome) { %><p class="rp-sn">Platform reply: <%= r.outcome %></p><% } %>
            <% if (r.recheck && r.recheck.at) { %><div class="rp-chips"><span class="rp-lab <%= r.recheck.stillShowing ? 'sc-open' : 'sc-resolved' %>"><%= r.recheck.stillShowing ? 'Still on Google ' + r.recheck.where : 'No longer in tracked searches' %></span><span class="rp-sm">checked <%= h.date(r.recheck.at) %></span></div><% } else if (r.recheckAt) { %><div class="rp-why">Recheck on <%= h.date(r.recheckAt) %>.</div><% } %>
            <% if ((r.evidence || []).length) { %><div class="rep-feat" style="margin-top:8px"><% r.evidence.forEach(function (u) { %><a href="<%= u %>" target="_blank" rel="noopener nofollow"><span><%= path(u) %></span></a><% }) %></div><% } %>
            <% if (st) { %>
              <form class="js-rep cs-form" method="POST" action="/api/reputation/removals/<%= r._id %>">
                <label class="grow">What the platform said<input class="rp-in" name="outcome" placeholder="Their reply or decision"></label>
                <label class="grow">Proof (links only)<input class="rp-in" name="evidence" placeholder="Screenshot or archive links"></label>
                <button class="btn btn-sm">Save</button>
              </form>
              <div style="display:flex; gap:8px; margin-top:8px; flex-wrap:wrap"><% if (!ws.isDemo) { %><form class="js-rep" method="POST" action="/api/reputation/removals/<%= r._id %>/recheck"><button class="btn btn-sm">Check Google now</button></form><% } %></div>
            <% } %>
            <details class="rp-det"><summary>History</summary><ul class="rep-log"><% (r.log || []).slice().reverse().forEach(function (l) { %><li><b><%= l.by === 'system' ? 'Portal' : l.by %></b> · <%= h.date(l.at) %> · <%= l.text %></li><% }) %></ul></details>
          </div>
          <div class="rp-side">
            <% if (st) { %>
              <form class="rp-ctl" method="POST" action="/api/reputation/removals/<%= r._id %>">
                <select class="rp-sel sc-<%= STC[r.status] %>" name="status" data-auto="reload" aria-label="Status"><% Object.keys(STATUS).forEach(function (k) { %><option value="<%= k %>" <%= r.status === k ? 'selected' : '' %>><%= STATUS[k] %></option><% }) %></select>
                <input class="rp-in" name="ticket" placeholder="Reference" value="<%= r.ticket || '' %>" data-auto style="width:120px">
              </form>
            <% } else { %><span class="rp-lab sc-<%= STC[r.status] %>"><%= STATUS[r.status] %></span><% } %>
          </div>
        </li>
      <% }) %>
    </ul>
    <% } %>
    <div class="rp-note">No ID documents are stored here. Routes that need ID (Google "Results about you", OpenAI) are filed by the person directly. Off limits: fake DMCA notices, unfounded legal claims, impersonation, paying sites to remove content.</div>
  </section>
</div>
<style>
  .rm-for{font-size:13px; color:var(--muted); margin-bottom:12px} .rm-for b{color:var(--ink)}
  .rm-qs{display:flex; flex-direction:column; gap:2px}
  .rm-q{display:flex; gap:10px; align-items:flex-start; padding:8px 10px; border-radius:10px; font-size:13.5px; color:var(--ink); cursor:pointer; line-height:1.45}
  .rm-q:hover{background:var(--surface-2)} .rm-q input{margin-top:3px; accent-color:var(--accent-strong)}
  .rm-q:has(input:checked){background:color-mix(in srgb, var(--accent-strong) 9%, transparent)}
  .rm-ok{display:inline-flex; width:24px; height:24px; border-radius:50%; align-items:center; justify-content:center; background:var(--pos-tint); color:var(--pos); font-size:13px}
  .rm-warn{margin:14px 22px 0; padding:12px 14px; border-radius:12px; background:var(--warn-tint); color:var(--warn-ink); font-size:13px; line-height:1.55}
  .rm-draft{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:10px; padding:10px; border-radius:12px; background:var(--surface-2)} .rm-draft input[name=url]{flex:1; min-width:200px}
  .cs-form{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-top:12px; padding:12px; border-radius:12px; background:var(--surface-2)}
  .cs-form label{display:flex; flex-direction:column; gap:4px; font-size:11.5px; color:var(--muted)} .cs-form label.grow{flex:1; min-width:200px}
</style>
<%- include('../partials/rep-foot') %>
