<section>
  <div class="admin-header">
    <h1>Sent Emails</h1>
    <div>
      <a class="button button-secondary" href="/admin/crm/drafts">Review queue</a>
      <a href="/admin/crm">&larr; Back to pipeline</a>
    </div>
  </div>
  <p class="hint">Every campaign email that has actually gone out via Outlook (<code>outlook-sync/send-approved-drafts.ps1</code>), most recent first. These also appear in the Sent Items folder of the jambo@zucegroup.com Outlook account on the machine that sends them.</p>

  <% if (!drafts.length) { %>
    <div class="dash-empty-state">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 6-10 7L2 6"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg>
      <p>Nothing sent yet.</p>
    </div>
  <% } else { %>
    <table class="admin-table">
      <thead><tr><th>Prospect</th><th>Direction</th><th>Subject</th><th>Sent</th><th></th></tr></thead>
      <tbody>
        <% drafts.forEach(function(d) { %>
          <tr>
            <td><%= d.Prospect ? d.Prospect.companyName : 'Unknown' %></td>
            <td><%= d.direction %></td>
            <td><%= d.subject %></td>
            <td><%= d.updatedAt.toLocaleString() %></td>
            <td><a href="/admin/crm/drafts/<%= d.id %>">View</a></td>
          </tr>
        <% }) %>
      </tbody>
    </table>
  <% } %>
</section>
