<%
  var canManage = locals.showStaff;

  var _past  = past || [];
  var _summ  = _past.filter(function (m) { return m.summary; }).length;

  var _items = [];
  _past.forEach(function (m) { _items = _items.concat(m.actionItems || []); });
  var _open  = _items.filter(function (a) { return !a.done; }).length;

  var _durRows = _past.filter(function (m) { return m.durationMin; });
  var _avgDur  = _durRows.length
    ? Math.round(_durRows.reduce(function (s, m) { return s + m.durationMin; }, 0) / _durRows.length)
    : null;

  var _nextLink = next && next.zoomLink ? next.zoomLink : null;

  var _svgCal = '<svg viewBox="0 0 16 16" width="15" height="15" fill="none"><rect x="2.4" y="3.4" width="11.2" height="10.2" rx="1.6" stroke="currentColor" stroke-width="1.4"/><path d="M5.4 1.9v2.6M10.6 1.9v2.6M2.4 6.8h11.2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>';
  var _svgMsg = '<svg viewBox="0 0 16 16" width="15" height="15" fill="none"><path d="M13.6 10.2a1.4 1.4 0 0 1-1.4 1.4H4.9L2.4 14V3.2a1.4 1.4 0 0 1 1.4-1.4h8.4a1.4 1.4 0 0 1 1.4 1.4z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>';
  var _svgDoc = '<svg viewBox="0 0 16 16" width="15" height="15" fill="none"><path d="M3.4 2.2h5.2l4 4v7.6a.8.8 0 0 1-.8.8H3.4a.8.8 0 0 1-.8-.8V3a.8.8 0 0 1 .8-.8z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8.6 2.2v4.2h4" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>';

  var _acts = [];

  if (canManage) _acts.push({ href:'/messages', lb:'Message the client', ic:_svgMsg });
  _acts.push({ href:'#past', lb:'Past calls', ic:_svgDoc, n:_past.length });

  if (_acts.length && !_acts.some(function (a) { return a.lead; })) _acts[0].lead = true;
%>
<div class="pg-head" style="margin-bottom:0">
  <div>
    <div class="eyebrow">Business</div>
  </div>
  <div class="ph-right">
    <%- include('../partials/range-picker') %></div>
</div>

<h1 class="claim"><%= title %></h1>
<% if (next) { %>
  <p class="claim-lede">Your next call is <em><%= h.date(next.startsAt) %></em>.</p>
<% } else if (_past.length) { %>
  <p class="claim-lede">We have sat down together <em><%= _past.length %></em> time<%= _past.length === 1 ? '' : 's' %>.</p>
<% } else { %>
  <p class="claim-lede">No call has been booked yet.</p>
<% } %>
<p class="claim-sub"><%
  if (next) { %><%= next.title %> at <%= h.time(next.startsAt) %><% if (next.durationMin) { %>, <%= next.durationMin %> minutes<% } %>. <%- h.ihelp('Meeting summaries', 'Summaries and action items come from the call recording and are reviewed by your account manager.') %><%
  } else if (_past.length) { %>No upcoming calls. Past calls and summaries are below. <%- h.ihelp('Meeting summaries', 'Summaries and action items come from the call recording and are reviewed by your account manager.') %><%
  } else { %>Upcoming calls, recordings, and a summary after every meeting. <%- h.ihelp('Meeting summaries', 'Summaries and action items come from the call recording and are reviewed by your account manager.') %><% }
%></p>

<div class="qbar">
  <div class="qbar-acts">
    <% _acts.forEach(function (a) { %>
      <a class="qact<%= a.lead ? ' qact-lead' : '' %>" href="<%= a.href %>"><%- a.ic %><span><%= a.lb %><% if (a.n) { %> <b class="qn"><%= a.n %></b><% } %></span></a>
    <% }) %>
  </div>

  <% if (next) { %>
  <div class="qmeet">
    <div class="qmeet-d">
      <b><%= new Date(next.startsAt).getDate() %></b>
      <span><%= new Date(next.startsAt).toLocaleDateString('en-GB', { month: 'short' }) %></span>
    </div>
    <div style="min-width:0">
      <div class="qmeet-t"><%= next.title %></div>
      <div class="qmeet-m"><%= h.time(next.startsAt) %><% if ((next.attendees||[]).length) { %> · <%= next.attendees.length %> attending<% } %><% if (next.repeat) { %> · repeats <%= next.repeat %><% } %></div>
    </div>
    <% if (_nextLink) { %><a class="btn btn-primary btn-sm" href="<%= _nextLink %>" target="_blank" rel="noopener">Join</a><% } %>

    <% if (canManage && _nextLink) { %>
      <% var _nt = next.notetakerStatus || 'none'; %>

      <% if (_nt === 'none' || _nt === 'failed' || _nt === 'joining') { %>

        <form method="POST" action="/api/meetings/<%= next._id %>/notetaker" class="inline-form js-async-run">
          <button class="btn btn-sm" type="submit" title="Sends an AI bot into the call to record and transcribe it"><svg class="i-inl" viewBox="0 0 16 16" width="13" height="13" fill="none" aria-hidden="true"><rect x="3" y="5" width="10" height="8" rx="2" stroke="currentColor" stroke-width="1.3"/><path d="M8 2.5V5M6 9h.01M10 9h.01" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg><%= _nt === 'failed' ? ' Retry' : (_nt === 'joining' ? ' Send now' : '') %></button>
        </form>
      <% } else { %>
        <span class="rr-meta" style="white-space:nowrap"><svg class="i-inl" viewBox="0 0 16 16" width="13" height="13" fill="none" aria-hidden="true"><rect x="3" y="5" width="10" height="8" rx="2" stroke="currentColor" stroke-width="1.3"/><path d="M8 2.5V5M6 9h.01M10 9h.01" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg> <%= ({ joining: 'joining…', recording: 'recording…', processing: 'writing summary…', done: 'summarized' })[_nt] || _nt %></span>
      <% } %>
    <% } %>
  </div>
  <% } %>
</div>

<% if (canManage) { %>

<% var _schedOpen = !!(locals.query && locals.query.new); %>
<div class="card card-p" id="schedule"<%= _schedOpen ? '' : ' hidden' %> style="margin-top:22px">
  <div class="card-h" style="padding:0 0 12px"><h3>Schedule a meeting</h3><span class="rr-end"><a class="more js-panel-cancel" data-panel="#schedule" href="/meetings">Cancel</a></span></div>
  <form class="addform js-ajax-form" id="newmeetingform" method="POST" action="/api/meetings"
        data-refresh="#meetings-body" data-hide-after="#schedule" data-reset-after="#newmeetingform">
    <div class="fld" style="flex:1;min-width:220px"><label for="mtg-new-title">Title</label><input id="mtg-new-title" name="title" placeholder="e.g. Monthly Strategy Review" required></div>
    <div class="fld"><label for="mtg-new-starts">Date &amp; time</label><input id="mtg-new-starts" name="startsAt" type="datetime-local" required></div>
    <div class="fld" style="width:110px"><label for="mtg-new-duration">Duration (min)</label><input id="mtg-new-duration" name="durationMin" type="number" value="45"></div>
    <div class="fld" style="min-width:240px"><label for="mtg-new-zoom">Join link <span class="rr-meta">(Zoom / Meet / Teams)</span></label><input id="mtg-new-zoom" name="zoomLink" type="url" placeholder="https://…"></div>

    <div class="fld" style="width:160px"><label for="mtg-new-repeat">Repeats</label>
      <select id="mtg-new-repeat" name="repeat">
        <option value="">Does not repeat</option>
        <option value="daily">Daily</option>
        <option value="weekly">Weekly</option>
        <option value="monthly">Monthly</option>
      </select></div>
    <div class="fld" id="mtg-new-until-f" style="width:170px" hidden><label for="mtg-new-until">Until <span class="rr-meta">(optional)</span></label><input id="mtg-new-until" name="repeatUntil" type="date"></div>
    <button class="btn btn-primary btn-sm" type="submit">Schedule</button>
    <div class="rr-meta" id="mtg-new-repeat-hint" style="flex:1 1 100%" hidden aria-live="polite"></div>
  </form>
</div>

<script>
(function () {
  var form = document.getElementById('newmeetingform');
  if (!form) return;
  var sel = form.querySelector('#mtg-new-repeat'), untilF = form.querySelector('#mtg-new-until-f');
  var until = form.querySelector('#mtg-new-until'), start = form.querySelector('#mtg-new-starts');
  var hint = form.querySelector('#mtg-new-repeat-hint');
  var SPAN = { daily: 1, weekly: 6, monthly: 12 }, MAX_MONTHS = 24, MAX_CALLS = 400;
  var DAYS = ['Sundays', 'Mondays', 'Tuesdays', 'Wednesdays', 'Thursdays', 'Fridays', 'Saturdays'];
  function addMonths(d, n) { var x = new Date(d); x.setMonth(x.getMonth() + n); return x; }
  function nth(s, k, n) {
    var at = function (y, m, d) { return new Date(y, m, d, s.getHours(), s.getMinutes()); };
    if (k === 'daily') return at(s.getFullYear(), s.getMonth(), s.getDate() + n);
    if (k === 'weekly') return at(s.getFullYear(), s.getMonth(), s.getDate() + 7 * n);
    var y = s.getFullYear(), m = s.getMonth() + n;
    return at(y, m, Math.min(s.getDate(), new Date(y, m + 1, 0).getDate()));
  }
  function day(d) { return d.toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'short', year: 'numeric' }); }
  function sync() {
    var k = sel.value;
    untilF.hidden = !k;
    if (!k) { hint.hidden = true; hint.textContent = ''; return; }
    hint.hidden = false;
    var s = start.value ? new Date(start.value) : null;
    if (!s || isNaN(s)) { hint.textContent = 'Pick the date and time of the first call.'; return; }
    var cap = addMonths(s, MAX_MONTHS), end = null, m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(until.value || '');
    if (m) end = new Date(+m[1], +m[2] - 1, +m[3], 23, 59, 59);
    if (end && end < s) { hint.textContent = 'The end date is before the first call.'; return; }
    if (!end) end = addMonths(s, SPAN[k]);
    if (end > cap) end = cap;
    var n = 1, last = s;
    for (var i = 1; n < MAX_CALLS; i++) { var d = nth(s, k, i); if (d > end) break; n++; last = d; }
    var how = k === 'daily' ? 'every day' : (k === 'weekly' ? 'every week on ' + DAYS[s.getDay()] : 'every month on day ' + s.getDate());
    hint.textContent = n + ' call' + (n === 1 ? '' : 's') + ', ' + how + ', from ' + day(s) + ' to ' + day(last) + '.' + (until.value ? '' : ' Pick an end date to change that.');
  }
  [sel, start, until].forEach(function (el) { el.addEventListener('change', sync); el.addEventListener('input', sync); });
  form.addEventListener('reset', function () { setTimeout(sync, 0); });
  sync();
})();
</script>
<% } %>

<div class="bento" id="meetings-body" style="margin-top:22px">

  <div class="vdark vd-cut b8">
    <span class="vn-fillet"></span>
    <% if (canManage) { %>
      <a class="vn-cut js-panel-open" data-panel="#schedule" href="/meetings?new=1#schedule">Schedule a call
        <svg viewBox="0 0 12 12" fill="none" width="13" height="13" aria-hidden="true"><path d="M6 2.4v7.2M2.4 6h7.2" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>
      </a>
    <% } else { %>
      <a class="vn-cut" href="/messages">Ask for a call
        <svg viewBox="0 0 12 12" fill="none" width="13" height="13" aria-hidden="true"><path d="M3 9L9 3M9 3H4.2M9 3v4.8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </a>
    <% } %>
    <div class="vd-k">Calls on record</div>
    <div class="vd-row">
      <div class="vd-num tnum"><%- _past.length ? _past.length : '<span class="noval">—</span>' %></div>
    </div>
    <div class="vd-sub">
      <% if (next) { %>
        Next up is <b><%= next.title %></b> on <b><%= h.date(next.startsAt) %></b> at <%= h.time(next.startsAt) %><% if ((next.attendees||[]).length) { %>, with <%= (next.attendees||[]).join(', ') %><% } %>.<% if (!_nextLink) { %> <%= canManage ? 'No join link yet. Add one when scheduling.' : 'Your VOCTOS team will send the join link.' %><% } %>
      <% } else if (_past.length) { %>
        Calls held in this range.
      <% } else { %>
        No calls yet.
      <% } %>
    </div>

    <div class="ov-strip ov-2" style="margin-top:20px">

      <div class="ov"><div class="ovl">Next call</div><div class="ovv tnum" style="font-size:var(--fs-lg)"><%- next ? h.date(next.startsAt) : '<span class="noval">—</span>' %></div>
        <div class="rr-meta" style="margin-top:5px"><%= next ? (_nextLink ? 'join link ready' : 'no join link yet') : 'nothing in the diary' %></div></div>
      <div class="ov"><div class="ovl">With a summary</div><div class="ovv tnum"><%- _summ ? _summ : '<span class="noval">—</span>' %></div>
        <div class="rr-meta" style="margin-top:5px">of <%= _past.length %> call<%= _past.length === 1 ? '' : 's' %> held</div></div>
      <div class="ov"><div class="ovl">Action items</div><div class="ovv tnum"><%- _items.length ? _items.length : '<span class="noval">—</span>' %></div>
        <div class="rr-meta" style="margin-top:5px"><%= _open %> still open</div></div>

      <div class="ov"><div class="ovl">Average length</div><div class="ovv tnum"><%- _avgDur != null ? _avgDur + 'm' : '<span class="noval">—</span>' %></div>
        <div class="rr-meta" style="margin-top:5px">over the <%= _durRows.length %> with a length recorded</div></div>
    </div>
  </div>

  <% var _ser = locals.series || [], _s0 = _ser[0]; %>
  <div class="card card-p rr b4">
    <div class="rr-lbl">Cadence</div>
    <% if (_s0) { %>
      <div class="rr-title"><%= _s0.label %>, <%= h.time(_s0.next.startsAt) %></div>
      <div class="rr-meta"><b style="color:var(--ink)"><%= _s0.title %></b>. Next on <%= h.date(_s0.next.startsAt) %>; <%= _s0.left %> call<%= _s0.left === 1 ? '' : 's' %> booked, the last on <%= h.date(_s0.last) %>.</div>
      <% if (_ser.length > 1) { %>
        <div class="rr-meta" style="margin-top:6px">Also repeating: <% _ser.slice(1).forEach(function (sr, i) { %><%= i ? ', ' : '' %><b style="color:var(--ink)"><%= sr.title %></b> (<%= sr.label.toLowerCase() %>)<% }) %>.</div>
      <% } %>
      <% if (canManage) { %>
      <div class="rr-actions">
        <form method="POST" action="/api/meetings/<%= _s0.next._id %>/delete" class="inline-form js-delete-form" data-confirm="Stop repeating “<%= _s0.title %>”? Its <%= _s0.left %> upcoming call<%= _s0.left === 1 ? '' : 's' %> will be removed. Calls already held stay." data-refresh="#meetings-body" style="flex:1; display:flex">
          <input type="hidden" name="scope" value="following">
          <button class="btn btn-sm" type="submit" style="flex:1">Stop repeating</button>
        </form>
      </div>
      <% } %>
    <% } else { %>
      <div class="rr-title">No repeating call</div>
      <div class="rr-meta"><%= canManage ? 'Book a call and set it to repeat daily, weekly or monthly.' : 'Your calls are booked one at a time.' %></div>
      <div class="rr-actions">
        <% if (canManage) { %><a class="btn btn-sm js-panel-open" data-panel="#schedule" href="/meetings?new=1#schedule" style="flex:1">Schedule a repeating call</a>
        <% } else { %><a class="btn btn-sm" href="/messages" style="flex:1">Ask for a regular call</a><% } %>
      </div>
    <% } %>
  </div>

  <%

    var CAL = locals.calendar || { year: new Date().getFullYear(), month: new Date().getMonth(), meetings: [] };
    var calFirst = new Date(CAL.year, CAL.month, 1);
    var calDaysInMonth = new Date(CAL.year, CAL.month + 1, 0).getDate();
    var calLead = (calFirst.getDay() + 6) % 7;
    var calTrail = (7 - ((calLead + calDaysInMonth) % 7)) % 7;
    var calByDay = {};
    (CAL.meetings || []).forEach(function (cm) {
      var d = new Date(cm.startsAt).getDate();
      (calByDay[d] = calByDay[d] || []).push(cm);
    });
    var calToday = new Date();
    var calIsThisMonth = calToday.getFullYear() === CAL.year && calToday.getMonth() === CAL.month;
    var calMonthLabel = calFirst.toLocaleDateString('en-GB', { month: 'long', year: 'numeric' });
    var calQ = function (d) { return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0'); };
    var calPrevQ = calQ(new Date(CAL.year, CAL.month - 1, 1));
    var calNextQ = calQ(new Date(CAL.year, CAL.month + 1, 1));
    var CAL_DOW = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

    var CAL_MAX_PER_DAY = 3;
  %>

  <%
    var _upNow = Date.now() - 90 * 60000;
    var _up = (CAL.meetings || []).filter(function (cm) { return cm.status !== 'past' && new Date(cm.startsAt).getTime() >= _upNow; });
    if (next && !_up.some(function (cm) { return String(cm._id) === String(next._id); })) _up.unshift(next);
    _up.sort(function (a, b) { return new Date(a.startsAt) - new Date(b.startsAt); });
    var _lv = function (d) { d = new Date(d); var p = function (n) { return String(n).padStart(2, '0'); }; return d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate()) + 'T' + p(d.getHours()) + ':' + p(d.getMinutes()); };
  %>
  <% if (canManage && _up.length) { %>
  <div class="card card-p b12" id="upcoming-calls">
    <div class="card-h" style="padding:0 0 8px"><h3>Upcoming calls</h3><span class="hint"><%= _up.length %></span></div>
    <% _up.forEach(function (cm) { %>
      <div class="upc-row">
        <div class="upc-when"><b><%= h.date(cm.startsAt) %></b><span><%= h.time(cm.startsAt) %></span></div>
        <div class="upc-main">
          <div class="rr-title"><%= cm.title %><% if (cm.repeat) { %> <span class="chip flat">repeats <%= cm.repeat %></span><% } %></div>
          <div class="rr-meta"><%= cm.zoomLink ? cm.zoomLink.replace(/^https?:\/\//, '') : 'No join link yet' %></div>
        </div>
        <details class="upc-edit">
          <summary class="btn btn-sm">Edit</summary>
          <form class="addform js-ajax-form" method="POST" action="/api/meetings/<%= cm._id %>/edit" data-refresh="#meetings-body">
            <div class="fld" style="flex:1;min-width:200px"><label>Title</label><input name="title" value="<%= cm.title %>" required></div>
            <div class="fld"><label>Date &amp; time</label><input name="startsAt" type="datetime-local" value="<%= _lv(cm.startsAt) %>" required></div>
            <div class="fld" style="width:110px"><label>Duration (min)</label><input name="durationMin" type="number" min="5" max="600" value="<%= cm.durationMin || '' %>" placeholder="same"></div>
            <div class="fld" style="min-width:220px;flex:1"><label>Join link</label><input name="zoomLink" type="url" value="<%= cm.zoomLink || '' %>" placeholder="https://…"></div>
            <button class="btn btn-primary btn-sm" type="submit">Save</button>
          </form>
        </details>
        <form method="POST" action="/api/meetings/<%= cm._id %>/delete" class="inline-form js-delete-form" data-confirm="Delete “<%= cm.title %>” on <%= h.date(cm.startsAt) %>? Its notetaker booking is cancelled too." data-refresh="#meetings-body"><button class="icon-btn" title="Delete" aria-label="Delete meeting">&times;</button></form>
      </div>
    <% }) %>
  </div>
  <style>
    .upc-row{display:grid; grid-template-columns:92px minmax(0, 1fr) auto auto; gap:12px; align-items:start; padding:12px 0; border-top:1px solid var(--line)}
    .upc-row:first-of-type{border-top:0}
    .upc-when{display:flex; flex-direction:column; line-height:1.3}
    .upc-when span{color:var(--muted); font-size:13px}
    .upc-main .rr-meta{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
    .upc-edit summary{list-style:none; cursor:pointer}
    .upc-edit summary::-webkit-details-marker{display:none}
    .upc-edit[open]{grid-column:1 / -1; order:5}
    .upc-edit[open] summary{margin-bottom:10px}
    @media (max-width:700px){ .upc-row{grid-template-columns:minmax(0, 1fr) auto auto} .upc-when{grid-column:1 / -1; flex-direction:row; gap:8px} }
  </style>
  <% } %>

  <div class="card card-p b12" id="calendar">
    <div class="card-h" style="padding:0 0 12px">
      <h3>Calendar</h3><span class="hint"><%= calMonthLabel %></span>
      <span class="rr-end" style="display:flex; gap:6px">
        <a class="btn btn-sm" href="/meetings?month=<%= calPrevQ %>#calendar" aria-label="Previous month">‹</a>
        <a class="btn btn-sm" href="/meetings?month=<%= calNextQ %>#calendar" aria-label="Next month">›</a>
      </span>
    </div>
    <div class="cal">
      <% CAL_DOW.forEach(function (d) { %><div class="cal-dow"><%= d %></div><% }) %>
      <% for (var calI = 0; calI < calLead; calI++) { %><div class="cal-day out"></div><% } %>
      <% for (var calDay = 1; calDay <= calDaysInMonth; calDay++) { %>
        <% var calIsToday = calIsThisMonth && calToday.getDate() === calDay; %>
        <% var calDayMeetings = calByDay[calDay] || []; %>
        <div class="cal-day<%= calIsToday ? ' today' : '' %>">
          <div class="cal-daynum"><%= calDay %></div>
          <% if (calDayMeetings.length) { %>
          <div class="cal-evs">
            <% calDayMeetings.slice(0, CAL_MAX_PER_DAY).forEach(function (cm) { %>
              <% var calLbl = h.time(cm.startsAt) + ' ' + cm.title; var calTip = calLbl + (cm.repeat ? ' (repeats ' + cm.repeat + ')' : ''); %>
              <% if (cm.status === 'past') { %>

                <a class="cal-ev cal-past" href="#m-<%= cm._id %>" title="<%= calTip %>"><%= calLbl %></a>
              <% } else if (cm.zoomLink) { %>
                <a class="cal-ev cal-upcoming" href="<%= cm.zoomLink %>" target="_blank" rel="noopener" title="<%= calTip %>"><%= calLbl %></a>
              <% } else { %>
                <span class="cal-ev cal-upcoming" title="<%= calTip %>"><%= calLbl %></span>
              <% } %>
            <% }) %>
            <% if (calDayMeetings.length > CAL_MAX_PER_DAY) { %><div class="cal-more">+<%= calDayMeetings.length - CAL_MAX_PER_DAY %> more</div><% } %>
          </div>
          <% } %>
        </div>
      <% } %>
      <% for (var calT = 0; calT < calTrail; calT++) { %><div class="cal-day out"></div><% } %>
    </div>
    <div class="rr-meta" style="margin-top:10px; display:flex; align-items:center; gap:14px">
      <span><span class="cal-ev cal-upcoming" style="padding:2px 8px">&nbsp;</span> upcoming</span>
      <span><span class="cal-ev cal-past" style="padding:2px 8px">&nbsp;</span> held</span>
    </div>
  </div>

  <%

    var _hasAI = past[0] && past[0].actionItems && past[0].actionItems.length;
    var _pastSpan = _hasAI ? 'b8' : 'b12';
  %>

  <div class="card <%= _pastSpan %>" id="past">
    <div class="card-h"><h3>Past meetings</h3><span class="rr-end"></span></div>
    <div class="card-p" style="display:flex; flex-direction:column; gap:12px">
      <% if(!_past.length){ %>
        <%- include('../partials/empty', { title: 'No past calls yet', line: 'Recordings and summaries appear here after each call.', cta: canManage ? { href: '/meetings?new=1#schedule', label: 'Schedule a meeting', cls: 'js-panel-open', attrs: ' data-panel="#schedule"' } : { href: '/messages', label: 'Ask for a call' }, pad: 'sm' }) %>
      <% } %>
      <% past.forEach(function(m){ %>

        <div id="m-<%= m._id %>" style="border:1px solid var(--line); border-radius:var(--r); padding:14px">
          <div class="row-between"><div style="font-weight:600"><%= m.title %></div><span class="rr-meta"><%= h.date(m.startsAt) %><% if(m.durationMin){ %> · <%= m.durationMin %> min<% } %></span></div>
          <% if(m.summary){ %><div class="rr-meta" style="margin-top:8px"><b style="color:var(--ink)">AI summary:</b> <%= m.summary %><% if(m.transcript){ %> <span title="Generated from the AI notetaker's own recording, not a pasted transcript"><svg class="i-inl" viewBox="0 0 16 16" width="13" height="13" fill="none" aria-hidden="true"><rect x="3" y="5" width="10" height="8" rx="2" stroke="currentColor" stroke-width="1.3"/><path d="M8 2.5V5M6 9h.01M10 9h.01" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></span><% } %></div><% } %>

          <% if(canManage && m.notetakerStatus && !['none','done'].includes(m.notetakerStatus)){ %>
            <div class="rr-meta" style="margin-top:4px"><svg class="i-inl" viewBox="0 0 16 16" width="13" height="13" fill="none" aria-hidden="true"><rect x="3" y="5" width="10" height="8" rx="2" stroke="currentColor" stroke-width="1.3"/><path d="M8 2.5V5M6 9h.01M10 9h.01" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg> AI notetaker: <%= ({ joining: 'joining…', recording: 'recording…', processing: 'writing summary…', failed: 'failed (try Summarize below with a pasted transcript instead)' })[m.notetakerStatus] || m.notetakerStatus %></div>
          <% } %>
          <div style="margin-top:10px; display:flex; gap:14px; font-size:var(--fs-sm)">
            <span style="color:var(--teal-600); font-weight:600">▶ Recording</span>
            <span style="color:var(--teal-600); font-weight:600; display:inline-flex; align-items:center; gap:5px"><svg viewBox="0 0 16 16" width="13" height="13" fill="none" aria-hidden="true"><path d="M9 1.9H4.6a1.3 1.3 0 0 0-1.3 1.3v9.6a1.3 1.3 0 0 0 1.3 1.3h6.8a1.3 1.3 0 0 0 1.3-1.3V5.6z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/><path d="M9 1.9v3.7h3.7" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>Summary</span>
            <% if(m.actionItems&&m.actionItems.length){ %><span style="color:var(--teal-600); font-weight:600">✓ <%= m.actionItems.length %> action items</span><% } %>
            <% if(canManage){ %><form method="POST" action="/api/meetings/<%= m._id %>/delete" class="inline-form js-delete-form" data-confirm="Delete this meeting?" data-refresh="#meetings-body" style="margin-left:auto"><button class="icon-btn" title="Delete" aria-label="Delete meeting">&times;</button></form><% } %>
          </div>
          <% if(canManage){ %>
          <details class="addbox" style="margin:10px 0 0">
            <summary style="padding:6px 12px;font-size:var(--fs-sm)">Summarize</summary>

            <form class="addform js-async-run" method="POST" action="/api/meetings/<%= m._id %>/summarize" style="margin-top:8px">
              <div class="fld" style="flex:1 1 100%"><label for="mtg-transcript-<%= m._id %>">Paste transcript / notes</label><textarea id="mtg-transcript-<%= m._id %>" name="transcript" rows="3" required style="width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface);font-size:var(--fs-base);font-family:inherit"></textarea></div>
              <button class="btn btn-primary btn-sm" type="submit">Summarize with AI</button>
            </form>
          </details>
          <% } %>
        </div>
      <% }) %>
    </div>
  </div>

  <% if (_hasAI) { %>

  <div class="card card-p b4">
    <div class="card-h" style="padding:0 0 12px"><h3>Action items</h3><span class="hint">from last call</span></div>

    <div style="display:flex; flex-direction:column; gap:10px; font-size:var(--fs-sm)">
      <% past[0].actionItems.forEach(function(a){ %>
        <div style="display:flex; gap:9px"><span class="tl-check <%= a.done?'done':'todo' %>" style="width:18px;height:18px"><%= a.done?'✓':'' %></span> <%= a.text %></div>
      <% }) %>
    </div>
  </div>
  <% } %>
</div>
