{% extends "cabinet/base_cabinet.html" %}
{% load cabinet_tags %}

{% block title %}Reports{% endblock %}

{% block cabinet_content %}
<div class="cab-report">
  <header class="cab-report__header">
    <div>
      <h1 class="cab-report__title">{{ report.title }}</h1>
      <p class="cab-report__summary">{{ report.summary }}</p>
    </div>
    <span class="cab-report__period">
      <i class="bi bi-calendar3"></i>
      {{ report.period_label }}
    </span>
  </header>

  <nav class="cab-report__toolbar" aria-label="Report filters">
    <div class="cab-report__pills">
      {% for tab in report.tabs %}
        <a class="cab-report__pill{% if tab.key == report.active_tab %} is-active{% endif %}"
           href="?tab={{ tab.key }}&period={{ report.active_period }}">
          {% if tab.icon %}<i class="bi {{ tab.icon }}"></i>{% endif %}
          {{ tab.label }}
        </a>
      {% endfor %}
    </div>
    <div class="cab-report__pills">
      {% for option in report.period_options %}
        <a class="cab-report__pill{% if option.key == report.active_period %} is-active{% endif %}"
           href="?tab={{ report.active_tab }}&period={{ option.key }}">
          {{ option.label }}
        </a>
      {% endfor %}
    </div>
  </nav>

  <section class="cab-report__cards" aria-label="Report summary">
    {% for card in report.summary_cards %}
      <article class="cab-report-card">
        <div>
          <span class="cab-report-card__label">{{ card.label }}</span>
          <strong class="cab-report-card__value">{{ card.value }}</strong>
        </div>
        {% if card.icon %}<i class="cab-report-card__icon bi {{ card.icon }}"></i>{% endif %}
        {% if card.hint %}<small class="cab-report-card__hint">{{ card.hint }}</small>{% endif %}
      </article>
    {% endfor %}
  </section>

  {% include "cabinet/reports/table.html" with table=report.table %}
  {% include "cabinet/reports/chart.html" with chart=report.chart %}
</div>
{% endblock %}