{% if rule %}
<tr id="purge-row-{{ rule.id }}">
  <form hx-put="/purge/{{ rule.id }}"
        hx-target="#purge-row-{{ rule.id }}"
        hx-swap="outerHTML"
        hx-encoding="application/x-www-form-urlencoded">
    <td><input name="email_address" class="input input-bordered input-xs w-full font-mono" value="{{ rule.email_address }}" required /></td>
    <td><input name="display_name" class="input input-bordered input-xs w-full" value="{{ rule.display_name or '' }}" /></td>
    <td><input name="older_than_days" type="number" class="input input-bordered input-xs w-16" value="{{ rule.older_than_days }}" min="1" /></td>
    <td>
      <label class="flex items-center gap-1 cursor-pointer">
        <input type="checkbox" name="is_active" class="checkbox checkbox-sm" {% if rule.is_active %}checked{% endif %} value="on" />
        <span class="text-xs">active</span>
      </label>
    </td>
    <td><input name="notes" class="input input-bordered input-xs w-full" value="{{ rule.notes or '' }}" /></td>
    <td></td>
    <td>
      <div class="flex gap-1">
        <button type="submit" class="btn btn-primary btn-xs">Save</button>
        <button type="button" class="btn btn-ghost btn-xs"
                hx-get="/purge/{{ rule.id }}/row"
                hx-target="#purge-row-{{ rule.id }}"
                hx-swap="outerHTML">Cancel</button>
      </div>
    </td>
  </form>
</tr>
{% else %}
<tr id="new-rule-form-row">
  <form hx-post="/purge"
        hx-target="#purge-tbody"
        hx-swap="afterbegin"
        hx-encoding="application/x-www-form-urlencoded"
        hx-on:htmx:after-request="if(event.detail.successful){this.reset(); document.getElementById('new-rule-form-row').remove();}">
    <td><input name="email_address" class="input input-bordered input-xs w-full font-mono" placeholder="sender@example.com" required /></td>
    <td><input name="display_name" class="input input-bordered input-xs w-full" placeholder="Display name" /></td>
    <td><input name="older_than_days" type="number" class="input input-bordered input-xs w-16" value="30" min="1" /></td>
    <td><span class="text-xs text-base-content/50">—</span></td>
    <td><input name="notes" class="input input-bordered input-xs w-full" placeholder="Optional notes" /></td>
    <td></td>
    <td>
      <div class="flex gap-1">
        <button type="submit" class="btn btn-primary btn-xs">Add</button>
        <button type="button" class="btn btn-ghost btn-xs"
                onclick="document.getElementById('new-rule-form-row').remove()">Cancel</button>
      </div>
    </td>
  </form>
</tr>
{% endif %}