{% extends "base.html" %}
{% block title %}Trends — Your Finance{% endblock %}
{% block content %}
<link rel="stylesheet" href="/static/trends.css">
{# `txnFilterBar()` (the "more filters" disclosure Alpine component reused
   below) is registered by this script, not globally in base.html —
   Transactions loads it the same way; see transactions.html. #}
<script src="/static/js/transactions.js"></script>
<hgroup>
  <h1>Category Trends</h1>
  <p>Effective category × period. Click any cell or row label to open the matching transactions.</p>
</hgroup>

{# Filter bar — same shape/behavior as the Transactions filter bar (search |
   preset | granularity | more-filters, with date range/amounts/account/
   category/exclude/tag in the collapsible advanced rows), reusing
   `txnFilterBar()` for the "more filters" disclosure. State lives in the URL
   (Golden Principle 8): every change swaps the table partial and pushes the
   query string. #}
<div class="card shadow-sm mb-3">
  <div class="card-body">
    <form id="trends-controls" class="filter-bar"
          hx-get="/trends/table"
          hx-target="#trends-table"
          hx-swap="innerHTML"
          hx-push-url="true"
          hx-indicator="#trends-loading"
          hx-trigger="submit, change from:select, change from:input[type=date], change from:(#trends-controls input[type=checkbox]), change from:input[name=account]"
          x-data="txnFilterBar()">

      <!-- Primary filter row: search | preset | granularity | toggle -->
      <div class="filter-row">
        <div class="grow input-group">
          <span class="input-group-text" aria-hidden="true">
            <i class="bi bi-search"></i>
          </span>
          <input type="search"
                 name="q"
                 class="form-control"
                 placeholder="Search description or counterparty…"
                 aria-label="Search description or counterparty"
                 value="{{ params.q or '' }}"
                 hx-get="/trends/table"
                 hx-target="#trends-table"
                 hx-swap="innerHTML"
                 hx-push-url="true"
                 hx-indicator="#trends-loading"
                 hx-trigger="keyup changed delay:400ms, search">
        </div>

        <select name="preset" class="form-select" aria-label="Date preset" style="max-width: 160px;">
          <option value="">Any date</option>
          {% for p in presets %}
          <option value="{{ p }}" {% if params.preset == p %}selected{% endif %}>{{ p.replace('-', ' ').title() }}</option>
          {% endfor %}
        </select>

        <select name="granularity" class="form-select" aria-label="Granularity" style="max-width: 130px;">
          <option value="month" {% if params.granularity == 'month' %}selected{% endif %}>Month</option>
          <option value="year" {% if params.granularity == 'year' %}selected{% endif %}>Year</option>
        </select>

        <button type="button"
                class="btn btn-secondary"
                @click="advanced = !advanced"
                x-text="advanced ? 'Fewer filters' : 'More filters'">More filters</button>
      </div>

      <!-- Advanced filters row 1 (date range + amounts + account) -->
      <div class="filter-row" x-show="advanced" x-cloak>
        <label class="form-label d-flex align-items-center" style="margin-bottom: 0;">
          <span>From</span>
          <input type="date" name="date_from" class="form-control" style="margin-left: 0.5rem;"
                 value="{{ params.date_from.isoformat() if params.date_from else '' }}"
                 placeholder="{{ window_from.isoformat() }}">
        </label>

        <label class="form-label d-flex align-items-center" style="margin-bottom: 0;">
          <span>To</span>
          <input type="date" name="date_to" class="form-control" style="margin-left: 0.5rem;"
                 value="{{ params.date_to.isoformat() if params.date_to else '' }}"
                 placeholder="{{ window_to.isoformat() }}">
        </label>

        <label class="form-label d-flex align-items-center" style="margin-bottom: 0;">
          <span>Min €</span>
          <input type="number" step="0.01" name="amount_min" class="form-control" style="margin-left: 0.5rem;"
                 value="{{ params.amount_min if params.amount_min is not none else '' }}">
        </label>

        <label class="form-label d-flex align-items-center" style="margin-bottom: 0;">
          <span>Max €</span>
          <input type="number" step="0.01" name="amount_max" class="form-control" style="margin-left: 0.5rem;"
                 value="{{ params.amount_max if params.amount_max is not none else '' }}">
        </label>

        <select name="account" class="form-select" style="max-width: 180px;">
          <option value="">All accounts</option>
          {% for a in accounts %}
          <option value="{{ a }}" {% if a in params.accounts %}selected{% endif %}>{{ a }}</option>
          {% endfor %}
        </select>
      </div>

      <!-- Advanced filters row 2 (multi-selects) -->
      <div class="filter-row" x-show="advanced" x-cloak>
        <div class="multi" x-data="{ open: false }">
          <button type="button" class="btn btn-secondary" @click="open = !open">
            <i class="bi bi-funnel"></i> Categories
          </button>
          <div class="multi-menu" x-show="open" @click.outside="open = false" x-cloak>
            <label><input type="checkbox" name="category" value="uncategorized"
                   {% if 'uncategorized' in params.categories %}checked{% endif %}> Uncategorized</label>
            {% for c in categories %}
            <label><input type="checkbox" name="category" value="{{ c }}"
                   {% if c in params.categories %}checked{% endif %}> {{ c }}</label>
            {% endfor %}
          </div>
        </div>

        <div class="multi" x-data="{ open: false }">
          <button type="button" class="btn btn-secondary" @click="open = !open">
            <i class="bi bi-x-circle"></i> Exclude
          </button>
          <div class="multi-menu" x-show="open" @click.outside="open = false" x-cloak>
            <label><input type="checkbox" name="exclude_category" value="uncategorized"
                   {% if 'uncategorized' in params.exclude_categories %}checked{% endif %}> Uncategorized</label>
            {% for c in categories %}
            <label><input type="checkbox" name="exclude_category" value="{{ c }}"
                   {% if c in params.exclude_categories %}checked{% endif %}> {{ c }}</label>
            {% endfor %}
          </div>
        </div>

        <div class="multi" x-data="{ open: false }">
          <button type="button" class="btn btn-secondary" @click="open = !open">
            <i class="bi bi-tags"></i> Tags
          </button>
          <div class="multi-menu" x-show="open" @click.outside="open = false" x-cloak>
            {% for t in tags %}
            <label><input type="checkbox" name="tag" value="{{ t }}"
                   {% if t in params.tags %}checked{% endif %}> {{ t }}</label>
            {% else %}
            <small>No tags yet.</small>
            {% endfor %}
          </div>
        </div>

        <label class="form-check form-check-inline" style="margin: 0; padding: 0.5rem 1rem; border-radius: 0.375rem; background-color: var(--bs-secondary-bg);">
          <input type="checkbox" name="include_transfers" value="1" class="form-check-input"
                 {% if params.include_transfers %}checked{% endif %}>
          <span class="form-check-label">Include Transfers</span>
        </label>

        <button type="submit" class="btn btn-primary">Apply</button>
        <a href="/trends" role="button" class="btn btn-outline-secondary" hx-boost="false">Reset</a>
      </div>
    </form>
  </div>
</div>

<p id="trends-loading" class="htmx-indicator" role="status" aria-live="polite">Loading…</p>

<div id="trends-table">
  {% include "_trends_table.html" %}
</div>
{% endblock %}