{% extends "base.html" %}
{% block content %}
<div class="page-header">
  <h1>{{ month_name }} {{ year }} — Bill Calendar</h1>
  <div class="month-nav">
    <a href="{{ url_for('bill_calendar', year=prev_year, month=prev_month) }}" class="btn btn-ghost">‹ Prev</a>
    <a href="{{ url_for('bill_calendar', year=next_year, month=next_month) }}" class="btn btn-ghost">Next ›</a>
  </div>
</div>

<div class="cal-wrap">
  <div class="cal-grid">
    {% for day_name in ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'] %}
    <div class="cal-header">{{ day_name }}</div>
    {% endfor %}

    {% for week in grid %}
      {% for day in week %}
        {% if day is none %}
          <div class="cal-cell cal-empty"></div>
        {% else %}
          <div class="cal-cell {% if today.day == day and today.month == month and today.year == year %}cal-today{% endif %}">
            <div class="cal-day-num">{{ day }}</div>
            {% for bill in bills_by_day.get(day, []) %}
            <div class="cal-bill" style="background: {{ colors.get(bill.category, '#ddd') }};{% if bill.get('paid') %}opacity:0.45;{% endif %}">
              <span class="cal-bill-name" style="{% if bill.get('paid') %}text-decoration:line-through;{% endif %}">{{ bill.name }}</span>
              {% if bill.amount %}<span class="cal-bill-amt">${{ bill.amount | money }}</span>{% endif %}
              {% if bill.get('paid') %}<span style="font-size:0.65rem;"> ✓</span>{% endif %}
            </div>
            {% endfor %}
          </div>
        {% endif %}
      {% endfor %}
    {% endfor %}
  </div>
</div>

<div class="cal-legend">
  {% for cat, color in colors.items() %}
  <span class="legend-item">
    <span class="legend-dot" style="background: {{ color }};"></span>{{ cat }}
  </span>
  {% endfor %}
</div>

<div class="cal-actions">
  <a href="{{ url_for('bills_list') }}" class="btn btn-primary">Manage Bills</a>
  <a href="{{ url_for('weekly_overview', year=year, month=month) }}" class="btn btn-ghost">Weekly Overview →</a>
</div>
{% endblock %}