{% extends 'extends/offcanvas.html' %}
{% load month_name %}
{% load i18n %}

{% block title %}{% translate 'Pick one' %}{% endblock %}

{% block body %}
<ul class="nav nav-pills nav-fill" id="yearTabs" role="tablist">
  {% for date in available_years %}
  <li class="nav-item" role="presentation">
    <button class="nav-link{% if date.year == current_year %} active{% endif %}"
            id="{{ date.year }}"
            data-bs-toggle="tab"
            data-bs-target="#{{ date.year }}-pane"
            type="button"
            role="tab"
            aria-controls="{{ date.year }}-pane"
            aria-selected="{% if date.year == current_year %}true{% else %}false{% endif %}">
      {{ date.year }}
    </button>
  </li>
  {% endfor %}
</ul>
<div class="tab-content" id="yearTabsContent">
  {% for date in available_years %}
  <div class="tab-pane fade{% if date.year == current_year %} show active{% endif %} mt-2"
       id="{{ date.year }}-pane"
       role="tabpanel"
       aria-labelledby="{{ date.year }}"
       tabindex="0">
    <ul class="list-group list-group-flush" id="month-year-list">
      {% for month in months %}
      <li class="list-group-item hover:tw-bg-zinc-900
            {% if month == current_month and date.year == current_year %} disabled bg-primary{% endif %}"
          {% if month == current_month and date.year == current_year %}aria-disabled="true"{% endif %}>
        <a class="text-decoration-none stretched-link {% if month == current_month and date.year == current_year %} text-black{% endif %}"
           href="{% url "transactions_overview" month=month year=date.year %}">
          {{ month|month_name }}
        </a>
      </li>
      {% endfor %}
    </ul>
  </div>
  {% endfor %}
</div>
{% endblock %}