<%

  var st = !!locals.showStaff;
  var cl = crisis.checklist || [], sts = crisis.statements || [], tl = (crisis.timeline || []).slice().reverse();
  var done = cl.filter(function (x) { return x.done; }).length;
%>
<%- include('../partials/rep-shell') %>

<% if (!crisis.on) { %>
  <p class="claim-lede">Crisis mode is <em>off</em>.</p>
  <p class="claim-sub">When on: Google daily, AI answers weekly, every step logged here.</p>
  <% if (st) { %><form class="js-rep" method="POST" action="/api/reputation/crisis" data-confirm="Turn crisis mode on? Daily Google checks use more SerpApi searches." style="margin-top:16px"><button class="btn btn-primary" name="on" value="1">Turn crisis mode on</button></form><% } %>
<% } else { %>
  <p class="claim-lede">Crisis mode on since <em><%= h.date(crisis.since) %></em><%= crisis.by ? ' (' + crisis.by + ')' : '' %>.</p>
  <p class="claim-sub">Google daily · AI weekly · <%= done %>/<%= cl.length %> steps done</p>
<% } %>

<% if (crisis.on || cl.length || tl.length) { %>
<div class="bento" style="margin-top:18px">
  <section class="card b6 rp-sec">
    <div class="rp-sh"><div><h3>Checklist</h3></div><div class="rp-sm"><span><%= done %>/<%= cl.length %></span></div></div>
    <% if (cl.length) { %><div class="cr-prog"><i style="width:<%= cl.length ? Math.round(done / cl.length * 100) : 0 %>%"></i></div><% } %>
    <ul class="rp-list">
      <% cl.forEach(function (x, i) { %>
        <li class="cr-item">
          <% if (st) { %><form class="js-rep" method="POST" action="/api/reputation/crisis"><button class="cr-tick <%= x.done ? 'on' : '' %>" name="check" value="<%= i %>" aria-label="<%= x.done ? 'Mark as not done' : 'Mark as done' %>"><%= x.done ? '✓' : '' %></button></form><% } else { %><span class="cr-tick <%= x.done ? 'on' : '' %>"><%= x.done ? '✓' : '' %></span><% } %>
          <div><div class="cr-t <%= x.done ? 'done' : '' %>"><%= x.text %></div><% if (x.done && x.by) { %><div class="rp-sm"><%= x.by %>, <%= h.date(x.at) %></div><% } %></div>
        </li>
      <% }) %>
    </ul>
    <% if (st) { %><form class="js-rep rp-note" method="POST" action="/api/reputation/crisis" style="display:flex; gap:8px"><input class="rp-in" name="checkText" placeholder="Add a step" style="flex:1"><button class="btn btn-sm">Add</button></form><% } %>
  </section>

  <section class="card b6 rp-sec">
    <div class="rp-sh"><div><h3>Statements</h3></div></div>
    <% if (!sts.length) { %><div class="rp-empty"><b>No statements yet</b><%= st ? 'Start with a short holding statement.' : '' %></div><% } %>
    <ul class="rp-list">
      <% sts.forEach(function (s, i) { %>
        <li class="rp-body" style="border-top:1px solid var(--line-2)">
          <div style="display:flex; justify-content:space-between; gap:8px; align-items:center"><b style="font-size:14px; color:var(--ink)"><%= s.title %></b><span class="rp-lab <%= s.approved ? 'sc-approved' : 'sc-waiting' %>"><%= s.approved ? 'Approved' : 'Draft' %></span></div>
          <div class="rp-box" style="background:transparent; padding:6px 0 0; max-height:none" <%- h.dirAttr(s.text) %>><%= s.text %></div>
          <% if (st) { %><form class="js-rep" method="POST" action="/api/reputation/crisis" style="margin-top:8px"><button class="btn btn-sm" name="stApprove" value="<%= i %>"><%= s.approved ? 'Back to draft' : 'The client approved it' %></button></form><% } %>
        </li>
      <% }) %>
    </ul>
    <% if (st) { %>
      <form class="js-rep rep-form rp-note" method="POST" action="/api/reputation/crisis">
        <div class="full"><label>Title</label><input name="stTitle" placeholder="Holding statement"></div>
        <div class="full"><label>Text</label><textarea name="stText" rows="4" placeholder="Short and factual. No blame. Say when the next update will come."></textarea></div>
        <div><button class="btn btn-sm btn-primary">Save statement</button></div>
      </form>
    <% } %>
  </section>

  <section class="card b12 rp-sec">
    <div class="rp-sh"><div><h3>Log</h3></div></div>
    <% if (st) { %><form class="js-rep rp-band" method="POST" action="/api/reputation/crisis" style="display:flex; gap:8px"><input class="rp-in" name="event" placeholder="What happened, or what we did" style="flex:1"><button class="btn btn-sm">Add to log</button></form><% } %>
    <div class="rp-body"><ul class="rep-log"><% tl.forEach(function (l) { %><li><b><%= l.by %></b> · <%= h.date(l.at) %><%= h.time ? ' ' + h.time(l.at) : '' %> · <%= l.text %></li><% }) %></ul></div>
  </section>

  <% if (st && crisis.on) { %>
  <section class="card b12 rp-sec"><div class="rp-body" style="display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap">
    <span class="rp-sm">Once things calm down, turn it off and Google goes back to every two weeks.</span>
    <form class="js-rep" method="POST" action="/api/reputation/crisis" data-confirm="Turn crisis mode off?"><button class="btn btn-sm" name="on" value="0">Turn crisis mode off</button></form>
  </div></section>
  <% } %>
</div>
<% } %>
<style>
  .cr-prog{height:6px; background:var(--surface-2)} .cr-prog i{display:block; height:100%; background:var(--pos); transition:width .4s}
  .cr-item{display:flex; gap:12px; align-items:flex-start; padding:11px 22px; border-top:1px solid var(--line-2)} .cr-item:first-child{border-top:0}
  .cr-item form{margin:0}
  .cr-tick{width:22px; height:22px; border-radius:7px; border:1.5px solid var(--line); background:var(--surface); color:#fff; font-size:13px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex:none}
  .cr-tick.on{background:var(--pos); border-color:var(--pos)}
  .cr-t{font-size:13.5px; color:var(--ink); line-height:1.45} .cr-t.done{text-decoration:line-through; color:var(--muted)}
</style>
<%- include('../partials/rep-foot') %>
