{% extends "ledger/base.html" %}
{% load ledger_tags %}
{% block title %}Dashboard{% endblock %}
{% block content %}
<div class="pagehead">
  <h1>{{ label }}</h1>
  <div class="monthnav"><a class="btn small ghost" href="?month={{ prev }}">&larr;</a><a class="btn small ghost" href="?month={{ next }}">&rarr;</a></div>
</div>
<div class="tiles">
  <div class="tile"><span>Spent</span><strong>{{ spend|money0 }}</strong>{% if in_current %}<small>forecast {{ forecast|money0 }}</small>{% endif %}</div>
  <div class="tile"><span>Income</span><strong>{{ income|money0 }}</strong><small>net {{ net|money0 }}</small></div>
  <div class="tile"><span>Budgeted</span><strong>{{ budget_total|money0 }}</strong><small>{{ budget_spent|money0 }} used</small></div>
  <a class="tile link" href="{% url 'review' %}"><span>Review queue</span><strong>{{ review_count }}</strong><small>need a category check</small></a>
  <a class="tile link" href="{% url 'anomalies' %}"><span>Anomalies</span><strong>{{ anomaly_count }}</strong><small>this month</small></a>
</div>
<div class="grid2">
  <section class="card">
    <h2>Top categories</h2>
    {% if donut.segments %}
    <div class="donutwrap">
      <svg viewBox="0 0 {{ donut.size }} {{ donut.size }}" width="180" height="180" role="img" aria-label="Spending by category">
        <g transform="rotate(-90 {{ donut.center }} {{ donut.center }})">
        {% for s in donut.segments %}
          <circle cx="{{ donut.center }}" cy="{{ donut.center }}" r="{{ donut.radius }}" fill="none" stroke="{{ s.color }}" stroke-width="{{ donut.width }}" stroke-dasharray="{{ s.dash }}" stroke-dashoffset="{{ s.offset }}"><title>{{ s.label }}: {{ s.value|money0 }}</title></circle>
        {% endfor %}
        </g>
        <text x="50%" y="48%" text-anchor="middle" class="donut-total">{{ donut.total|money0 }}</text>
        <text x="50%" y="62%" text-anchor="middle" class="donut-sub">spent</text>
      </svg>
      <ul class="legend">
        {% for s in donut.segments %}<li><i style="background:{{ s.color }}"></i>{{ s.label }}<span>{{ s.value|money0 }} &middot; {{ s.percent|floatformat:0 }}%</span></li>{% endfor %}
      </ul>
    </div>
    {% else %}<p class="muted">No spending this month.</p>{% endif %}
  </section>
  <section class="card">
    <h2>Budget pacing</h2>
    {% for r in budget_rows %}
      <div class="envelope">
        <div class="envhead"><a href="{% url 'budgets' %}?month={{ month }}">{{ r.category.name }}</a>
          <span class="pill {{ r.pacing.status }}">{{ r.pacing.status }}</span>
          <span class="muted">{{ r.envelope.spent|money0 }} of {{ r.envelope.available|money0 }}</span></div>
        <div class="bar"><div class="fill {{ r.pacing.status }}" style="width:{{ r.percent }}%"></div><div class="marker" style="left:{{ r.expected_percent }}%" title="expected by today"></div></div>
      </div>
    {% empty %}<p class="muted">No budgets yet. <a href="{% url 'budgets' %}">Create envelopes</a>.</p>{% endfor %}
  </section>
</div>
<section class="card">
  <h2>12-month trend</h2>
  <svg viewBox="0 0 {{ trend.width }} {{ trend.height }}" class="trend" role="img" aria-label="Monthly spending">
    <line x1="28" x2="{{ trend.width|add:'-28' }}" y1="{{ trend.baseline }}" y2="{{ trend.baseline }}" stroke="var(--line)"/>
    {% for b in trend.bars %}
      <rect x="{{ b.x|floatformat:1 }}" y="{{ b.y|floatformat:1 }}" width="{{ b.width|floatformat:1 }}" height="{{ b.height|floatformat:1 }}" rx="3" fill="var(--accent)"><title>{{ b.label }}: {{ b.value|floatformat:0 }}</title></rect>
      <text x="{{ b.cx|floatformat:1 }}" y="{{ trend.height|add:'-10' }}" text-anchor="middle" class="axis">{{ b.label }}</text>
    {% endfor %}
  </svg>
</section>
<section class="card">
  <h2>Next 14 days</h2>
  {% if upcoming %}<table class="table"><tbody>{% for u in upcoming %}
    <tr><td>{{ u.date|date:"D d M" }}</td><td>{{ u.subscription.merchant.name }}</td><td class="muted">{{ u.subscription.period }}</td><td class="num">{{ u.amount|money }}</td></tr>
  {% endfor %}</tbody></table>{% else %}<p class="muted">No predicted charges.</p>{% endif %}
</section>
{% endblock %}