{% extends "base.html" %}
{% block title %}Import Queue{% endblock %}

{% block styles %}
<style>
.queue-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 20px;
}

.queue-title {
  margin: 0;
  border: none;
  padding: 0;
}

.queue-history {
  margin-top: 32px;
}

.queue-history summary {
  font-family: var(--serif-display);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  margin-bottom: 12px;
}

.queue-history summary:hover {
  color: var(--ink);
}

/* On mobile, the vendor column can be long; allow wrapping */
@media (max-width: 480px) {
  td, th { padding: 8px 8px; }
}
</style>
{% endblock %}

{% block content %}
<section>
  <div class="queue-header">
    <h2 class="queue-title">Import Queue</h2>
    <span class="text-muted" style="font-size:0.85rem;">
      {% set pending_count = pending_rows | selectattr('status', 'ne', 'unimplemented') | list | length %}
      {{ pending_count }} pending email{{ 's' if pending_count != 1 }}
    </span>
  </div>

  {% if not pending_rows %}
    <p class="text-muted">
      No emails pending.
      Run <code>make poll</code> to fetch new ones from the mail folder.
    </p>
  {% else %}
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th>Vendor</th>
            <th>Date</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {% for row in pending_rows %}
          {% set clickable = row.status not in ('unimplemented',) %}
          <tr {% if clickable %}style="cursor:pointer;"
              onclick="location.href='/import/{{ row.message_id | urlencode }}'"
              {% endif %}>
            <td>{{ row.vendor or row.sender }}</td>
            <td class="text-muted" style="font-size:0.88rem;white-space:nowrap;">
              {{ row.received_at.strftime('%d %b %Y') if row.received_at else '—' }}
            </td>
            <td>
              <span class="badge badge-{{ row.status }}">
                {{ row.status | replace('_', ' ') }}
              </span>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% endif %}

  {% if history_rows %}
  <div class="queue-history">
    <details>
      <summary>{{ history_rows | length }} recently imported</summary>
      <div class="table-wrap">
        <table>
          <thead>
            <tr>
              <th>Vendor</th>
              <th>Date</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            {% for row in history_rows %}
            <tr style="cursor:pointer;"
                onclick="location.href='/import/{{ row.message_id | urlencode }}'">
              <td>{{ row.vendor or row.sender }}</td>
              <td class="text-muted" style="font-size:0.88rem;white-space:nowrap;">
                {{ row.received_at.strftime('%d %b %Y') if row.received_at else '—' }}
              </td>
              <td>
                <span class="badge badge-{{ row.status }}">
                  {{ row.status | replace('_', ' ') }}
                </span>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </details>
  </div>
  {% endif %}

</section>
{% endblock %}