{% extends "base.html" %}
{% block page_title %}Bank Statements{% endblock %}
{% block content %}
<main class="mx-auto w-full max-w-5xl px-4 py-8 sm:px-6" data-plugin="bank-statements">
  <header class="mb-6">
    <p class="text-sm font-semibold uppercase tracking-wide text-brand">Your finances</p>
    <h1 class="mt-1 text-2xl font-bold text-foreground sm:text-3xl">Bank Statements</h1>
    <p class="mt-2 max-w-2xl text-sm text-muted">Connect a bank account with your consent, then manage how often statements are requested.</p>
  </header>

  <section class="grid gap-4 md:grid-cols-2" aria-label="Connect financial services">
    <article class="rounded-xl border border-divider bg-surface p-5">
      <h2 class="text-lg font-semibold text-foreground">Connect a bank</h2>
      <p class="mt-1 mb-4 text-sm text-muted">Use your Account Aggregator to choose the account and consent period.</p>
      <button id="connect-aa" class="blocks-button blocks-button-primary" type="button">Connect bank account</button>
    </article>
    <article class="rounded-xl border border-divider bg-surface p-5">
      <h2 class="text-lg font-semibold text-foreground">DigiLocker</h2>
      <p class="mt-1 mb-4 text-sm text-muted">Link DigiLocker when you want to send an eligible statement there.</p>
      <button id="connect-digilocker" class="blocks-button blocks-button-secondary" type="button">Connect DigiLocker</button>
    </article>
  </section>

  <section class="mt-8" aria-labelledby="linked-accounts-title">
    <div class="mb-3 flex flex-wrap items-end justify-between gap-2">
      <div>
        <h2 id="linked-accounts-title" class="text-xl font-semibold text-foreground">Linked accounts</h2>
        <p class="mt-1 text-sm text-muted">Choose a statement schedule for each account.</p>
      </div>
    </div>
    <p id="accounts-status" class="mb-3 text-sm text-muted" role="status" aria-live="polite">Loading your accounts…</p>
    <div id="accounts-list" class="grid gap-3"></div>
  </section>
</main>
<script src="/plugins/bank-statements/assets/js/user_dashboard.js"></script>
{% endblock %}