{% extends "base.html" %}
{% block title %}The flagged transactions — Your Finance{% endblock %}
{% block content %}
<div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
  <div>
    <h1 class="h3 mb-2">The flagged transactions</h1>
    <p class="text-muted small mb-0">
      The system hides each row below in every list and in every total.
      The purge deletes exactly these rows.
    </p>
  </div>
  <div>
    <a href="/manual" class="btn btn-outline-secondary">Add a cash transaction</a>
  </div>
</div>

{% if purged %}
<div class="alert alert-success" role="status">
  The purge deleted {{ purged }} transaction{{ 's' if purged != '1' else '' }}.
</div>
{% endif %}

{% if error %}
<div class="alert alert-danger" role="alert">
  {{ error }}
</div>
{% endif %}

<div class="card shadow-sm mb-3">
  <div class="card-body">
    {% if rows %}
    <div class="table-responsive">
      <table class="table table-sm align-middle">
        <thead>
          <tr>
            <th scope="col">Date</th>
            <th scope="col">Description</th>
            <th scope="col" class="text-end">Amount</th>
            <th scope="col">Category</th>
            <th scope="col">Flagged at</th>
            <th scope="col"></th>
          </tr>
        </thead>
        <tbody>
          {% for row in rows %}
          <tr id="flagged-{{ row.id | css_id }}">
            <td>{{ row.transactiondate }}</td>
            <td>{{ row.description }}</td>
            <td class="text-end">{{ row.amount }}</td>
            <td>{{ row.manual_category or row.category or '' }}</td>
            <td>{{ row.deleted_at.strftime('%Y-%m-%d %H:%M') if row.deleted_at else '' }}</td>
            <td class="text-end">
              <form method="post" action="/manual/{{ row.id }}/restore">
                <input type="hidden" name="next" value="/manual/flagged">
                <button type="submit" class="btn btn-sm btn-outline-success">Restore</button>
              </form>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <p class="text-muted mb-0">The database holds no flagged transaction.</p>
    {% endif %}
  </div>
</div>

<div class="card shadow-sm border-danger">
  <div class="card-body">
    <h2 class="h6 text-danger">Purge the flagged transactions</h2>
    <div class="alert alert-warning" role="alert">
      <p class="mb-1"><strong>Caution: the application cannot undo the purge.</strong></p>
      <p class="mb-0">
        Check each row above before you start the purge.
        Restore each row that you want to keep.
        The system copies the database to a backup file first.
      </p>
    </div>
    <form method="post" action="/manual/purge">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" value="yes" id="purge-confirm" name="confirm">
        <label class="form-check-label" for="purge-confirm">
          I checked each row. Delete each flagged transaction.
        </label>
      </div>
      <button type="submit" class="btn btn-danger">Purge now</button>
    </form>
  </div>
</div>
{% endblock %}