{% extends "base.html" %}
{% block title %}Rules — Your Finance{% endblock %}
{% block content %}
<link rel="stylesheet" href="/static/rules.css">

{% if save_result %}
<div id="rule-save-alert" class="alert alert-success alert-dismissible fade show" role="alert">
  {% if save_result.action == 'created' %}Rule #{{ save_result.rule_id }} created
  {% elif save_result.action == 'updated' %}Rule #{{ save_result.rule_id }} updated
  {% else %}Rule #{{ save_result.rule_id }} saved
  {% endif %}
  &mdash;
  {% if save_result.changed and save_result.changed > 0 %}
    {{ save_result.changed }} transaction{{ 's' if save_result.changed != 1 else '' }} recategorized.
  {% else %}
    no transactions changed.
  {% endif %}
  {% if save_result.report_id %}
  <a href="/rules/{{ save_result.rule_id }}/history#rule-report-{{ save_result.report_id }}"
     class="alert-link">View change report</a>
  {% endif %}
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endif %}

<div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
  <div>
    <h1 class="h3 mb-2">Categorization Rules</h1>
    <p class="text-muted small mb-0">
      Rules are evaluated in priority order (lower number = runs first).
    </p>
  </div>
  <div class="d-flex gap-2 flex-wrap">
    <a href="/rules/create" class="btn btn-primary">
      <i class="bi bi-plus-lg"></i> New rule
    </a>
    <a href="/rules/history" class="btn btn-outline-secondary">
      <i class="bi bi-clock-history"></i> History
    </a>
    <button type="button" class="btn btn-outline-warning"
            hx-post="/rules/recategorize"
            hx-confirm="Recategorize all non-manual transactions? This may take a minute."
            hx-indicator="#recategorize-spinner"
            hx-disabled-elt="this">
      <i class="bi bi-arrow-repeat"></i> Recategorize
      <span id="recategorize-spinner" class="htmx-indicator ms-1">
        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
      </span>
    </button>
  </div>
</div>

<ul class="nav nav-tabs mb-0" id="rules-tabs">
  <li class="nav-item">
    <a class="nav-link {% if tab != 'tag_only' %}active{% endif %}"
       href="/rules?tab=active"
       hx-get="/rules?tab=active"
       hx-select="#rules-card" hx-target="#rules-card" hx-swap="outerHTML"
       hx-push-url="/rules?tab=active">
      Active rules <span class="badge text-bg-secondary ms-1">{{ category_rule_count }}</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link {% if tab == 'tag_only' %}active{% endif %}"
       href="/rules?tab=tag_only"
       hx-get="/rules?tab=tag_only"
       hx-select="#rules-card" hx-target="#rules-card" hx-swap="outerHTML"
       hx-push-url="/rules?tab=tag_only">
      <i class="bi bi-tags"></i> Tag-only rules <span class="badge text-bg-info ms-1">{{ tag_only_rule_count }}</span>
    </a>
  </li>
</ul>

<div class="card shadow-sm rounded-top-0" id="rules-card"
     hx-get="/rules?tab={{ tab }}"
     hx-trigger="rulesChanged from:body"
     hx-select="#rules-card"
     hx-target="#rules-card"
     hx-swap="outerHTML">
  <div class="table-responsive">
    <table class="table table-hover table-sm align-middle mb-0">
      {% macro sort_th(column, label, style="") %}
      {% set state = sort_state_for_column(column) %}
      {% set qs = sort_url_for_column(column) %}
      <th class="sortable-th {% if state %}sort-active{% endif %}" style="{{ style }}">
        <a href="/rules?tab={{ tab }}{% if qs %}&{{ qs }}{% endif %}"
           hx-get="/rules?tab={{ tab }}{% if qs %}&{{ qs }}{% endif %}"
           hx-select="#rules-card" hx-target="#rules-card" hx-swap="outerHTML"
           hx-push-url="/rules?tab={{ tab }}{% if qs %}&{{ qs }}{% endif %}"
           aria-label="Sort by {{ label }}">
          {{ label }}
          {% if state == 'asc' %}<i class="bi bi-chevron-up sort-icon"></i>
          {% elif state == 'desc' %}<i class="bi bi-chevron-down sort-icon"></i>
          {% else %}<i class="bi bi-chevron-expand sort-icon"></i>
          {% endif %}
        </a>
      </th>
      {% endmacro %}
      <thead class="table-light">
        <tr>
          {{ sort_th('priority', 'Pri', 'width: 5%;') }}
          <th style="width: 25%;">Type / Field</th>
          {{ sort_th('match_value', 'Match', 'width: 30%;') }}
          {% if tab == 'tag_only' %}
          <th style="width: 15%;">Tags</th>
          {% else %}
          {{ sort_th('category', 'Category', 'width: 15%;') }}
          <th class="d-none d-lg-table-cell" style="width: 10%;">Tags</th>
          {% endif %}
          <th style="width: 8%;">Active</th>
          <th style="width: 8%;">Matches</th>
          <th class="text-end" style="width: 12%;">Actions</th>
        </tr>
      </thead>
      <tbody id="rules-table-body">
        {% for rule in rules %}
          {% with count = counts.get(rule.id, 0) %}
            {% include "_rules_row.html" %}
          {% endwith %}
        {% endfor %}
      </tbody>
    </table>
  </div>

  {% if not rules %}
  <div class="card-body text-center py-5">
    {% if tab == 'tag_only' %}
    <i class="bi bi-tags display-4 text-muted d-block mb-3"></i>
    <p class="lead text-muted mb-3">No tag-only rules yet</p>
    <p class="text-muted small mb-3">Tag-only rules apply tags without changing the category, even on manually categorized transactions.</p>
    {% else %}
    <i class="bi bi-sliders display-4 text-muted d-block mb-3"></i>
    <p class="lead text-muted mb-3">No rules yet</p>
    <p class="text-muted small mb-3">Create your first rule to automatically categorize transactions.</p>
    {% endif %}
    <a href="/rules/create" class="btn btn-primary">
      <i class="bi bi-plus-lg"></i> Create your first rule
    </a>
  </div>
  {% endif %}
</div>
{% endblock %}