{% extends "base.html" %}
{% block title %}Purge Rules{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto space-y-4">

  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-2xl font-bold">Purge Rules</h1>
      <p class="text-sm text-base-content/60 mt-0.5">
        Emails from these senders older than the configured threshold will be deleted when <code class="text-xs">howl purge</code> runs.
      </p>
    </div>
    <button class="btn btn-primary btn-sm"
            hx-get="/purge/new"
            hx-target="#purge-tbody"
            hx-swap="afterbegin">
      + Add Rule
    </button>
  </div>

  <div class="card bg-base-100 shadow-sm overflow-x-auto">
    <table class="table table-sm">
      <thead>
        <tr>
          <th>Email Address</th>
          <th>Display Name</th>
          <th>Delete After</th>
          <th>Status</th>
          <th>Notes</th>
          <th>Added</th>
          <th></th>
        </tr>
      </thead>
      <tbody id="purge-tbody">
        {% for rule in rules %}
          {% include "purge_rule_row.html" %}
        {% else %}
        <tr id="purge-empty-row">
          <td colspan="7" class="text-center text-base-content/50 py-8">
            No purge rules yet. Click <strong>+ Add Rule</strong> to get started.
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <div class="text-xs text-base-content/40">
    {{ rules | length }} rule{{ 's' if rules | length != 1 else '' }} total &nbsp;·&nbsp;
    {{ rules | selectattr('is_active') | list | length }} active
  </div>

</div>
{% endblock %}