<%

var list = locals.done || [];
var st = locals.doneStats || {};

var groups = [];
list.forEach(function (t) {
  var dt = t.updatedAt ? new Date(t.updatedAt) : null;
  var key = dt ? dt.toLocaleDateString('en-GB', { month: 'long', year: 'numeric' }) : 'Undated';
  var g = groups.find(function (x) { return x.key === key; });
  if (!g) { g = { key: key, items: [] }; groups.push(g); }
  g.items.push(t);
});
%>
<div class="card">
  <div class="card-h">
    <h3>What we've done</h3>
    <span class="hint">closed PPC work</span>
    <a class="more" href="/tasks">All tasks<%= st.open ? ' · ' + st.open + ' open' : '' %></a>
  </div>

  <% if (!list.length) { %>
    <div class="card-p">

      <div class="muted" style="font-size:var(--fs-sm);line-height:1.65">
        No completed tasks yet. Finished PPC work appears here with who did it and when.
      </div>
    </div>
  <% } else { %>
    <div class="card-p" style="padding-bottom:6px;display:flex;gap:9px;flex-wrap:wrap">
      <% if (st.month) { %><span class="chip pos"><%= st.month %> this month</span><% } %>
      <% if (st.quarter) { %><span class="chip flat"><%= st.quarter %> in the last 90 days</span><% } %>
      <% if (st.open) { %><span class="chip teal"><%= st.open %> in progress</span><% } %>
    </div>

    <div class="card-p" style="padding-top:6px">
      <div class="timeline">
        <% groups.forEach(function (g) { %>
          <div class="tl-month">
            <div class="tl-label"><%= g.key.split(' ')[0] %>
              <div class="sub"><%= g.key.split(' ')[1] %> · <%= g.items.length %> item<%= g.items.length > 1 ? 's' : '' %></div>
            </div>
            <div class="tl-items">
              <% g.items.forEach(function (t) { %>
                <div class="tl-item">
                  <span class="tl-check done">✓</span>
                  <div style="min-width:0;flex:1">
                    <div class="ti-name"><%= t.title %></div>
                    <% if (t.description) { %>
                      <div class="ti-meta" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap"><%= t.description %></div>
                    <% } %>
                  </div>
                  <div class="tl-prog">
                    <% if (t.priority === 'high') { %><span class="pri high">High</span><% } %>
                    <span class="ti-meta" style="white-space:nowrap"><%= h.date(t.updatedAt) %></span>
                    <% if (t.owner) { %>
                      <%- include('./avatar', { url: t.owner.avatarUrl, initials: t.owner.initials || (t.owner.name || '?').slice(0, 2).toUpperCase(), color: t.owner.avatarColor, name: t.owner.name, cls: 'kav', style: 'margin:0;' }) %>
                    <% } %>
                  </div>
                </div>
              <% }) %>
            </div>
          </div>
        <% }) %>
      </div>
    </div>

    <div class="card-p" style="border-top:1px solid var(--line);padding-top:13px">

      <div class="muted" style="font-size:var(--fs-xs);line-height:1.55">
        <span class="ihelp-w" tabindex="0" role="button" aria-label="Where this list comes from"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="6.4" stroke="currentColor" stroke-width="1.4"/><path d="M8 7.1v4M8 4.9v.1" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg> Where this list comes from
          <span class="ihelp-pop" role="tooltip"><b>Where this list comes from</b>
            Each line is a completed task. Requests you send from the Keywords page show up here too.
          </span>
        </span>
      </div>
    </div>
  <% } %>
</div>
