{% extends "base.html" %}
{% block title %}{{ _("Subscriptions") }} · Wealth Dashboard{% endblock %}
{% block heading %}{{ _("Subscriptions") }}{% endblock %}
{% block lede %}
<p class="lede">{{ _("Charges that repeat on a recognisable rhythm, at a stable amount, at least three times. Deliberately cautious: the failure that matters is not missing one, it is calling three unrelated payments a €400 commitment — which makes the whole page untrustworthy.") }}</p>
{% endblock %}
{% block content %}

<section class="stat-strip">
  <div class="stat-card stat-gold">
    <div class="stat-label">{{ _("Per month") }}</div>
    <div class="stat-value">{{ money(data.monthly_total, data.base_currency) }}</div>
    <div class="stat-sub">{{ _f("{n} active", n=data.active | length) }}</div>
  </div>
  <div class="stat-card stat-purple">
    <div class="stat-label">{{ _("Per year") }}</div>
    <div class="stat-value">{{ money(data.yearly_total, data.base_currency) }}</div>
    <div class="stat-sub">{{ _("at the current rhythm") }}</div>
  </div>
  <div class="stat-card stat-blue">
    <div class="stat-label">{{ _("Possibly recurring") }}</div>
    <div class="stat-value">{{ data.possible | length }}</div>
    <div class="stat-sub">{{ _("repeated, but not on a clear rhythm") }}</div>
  </div>
</section>

{% if data.confirmed %}
<section class="card">
  <div class="card-header"><h2>{{ _("Recurring") }}</h2></div>
  <div class="table-wrap">
    <table class="grid">
      <thead><tr><th>{{ _("What") }}</th><th>{{ _("Rhythm") }}</th><th class="num">{{ _("Each") }}</th>
                 <th class="num">{{ _("Per year") }}</th><th class="num">{{ _("Paid so far") }}</th><th>{{ _("Last seen") }}</th></tr></thead>
      <tbody>
      {% for sub in data.confirmed %}
        <tr {% if sub.likely_ended %}style="opacity:.55"{% endif %}>
          <td>{{ sub.name }}<span class="sub">{{ sub.account }} · {{ _n(sub.count, "{n} payment since {date}", "{n} payments since {date}", date=d(sub.first_seen)) }}</span></td>
          <td><span class="tag tag-muted">{{ rhythm_label(sub.rhythm) }}</span>
            {% if sub.likely_ended %}<span class="tag" style="background:var(--warn-soft);color:var(--warn);border-color:rgba(251,191,36,.4)">{{ _("probably ended") }}</span>{% endif %}</td>
          <td class="num">{{ money(sub.amount, sub.currency) }}</td>
          <td class="num">{{ money(sub.yearly, sub.currency) }}</td>
          <td class="num sub">{{ money(sub.total_paid, sub.currency) }}</td>
          <td class="sub nowrap">{{ d(sub.last_seen) }}<span class="sub">{{ _n(sub.days_since, "{n} day ago", "{n} days ago") }}</span>
            <a class="sub" href="{{ url_for('bills_page', name=sub.name, pattern=sub.name, amount=sub.amount, rhythm=sub.rhythm) }}">{{ _("make it a bill") }}</a></td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
</section>
{% else %}
<section class="card empty">
  <p>{{ _("Nothing detected yet.") }}</p>
  <p class="sub">{{ _("A charge has to appear at least three times, on a recognisable rhythm, at a stable amount. Import a longer history and it will find more.") }}</p>
</section>
{% endif %}

{% if data.possible %}
<section class="card">
  <div class="card-header"><h2>{{ _("Possibly recurring") }}</h2>
    <span class="card-subtitle">{{ _("repeats, but the rhythm or the amount wanders") }}</span></div>
  <div class="table-wrap">
    <table class="grid">
      <thead><tr><th>{{ _("What") }}</th><th class="num">{{ _("Times") }}</th><th class="num">{{ _("Typical") }}</th>
                 <th class="num">{{ _("Total") }}</th><th>{{ _("Last seen") }}</th></tr></thead>
      <tbody>
      {% for sub in data.possible %}
        <tr>
          <td>{{ sub.name }}<span class="sub">{{ sub.account }}</span></td>
          <td class="num">{{ sub.count }}</td>
          <td class="num">{{ money(sub.amount, sub.currency) }}</td>
          <td class="num sub">{{ money(sub.total_paid, sub.currency) }}</td>
          <td class="sub nowrap">{{ d(sub.last_seen) }}</td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
</section>
{% endif %}
{% endblock %}