WYGIWYH/app/templates/common/fragments/month_year_picker.html

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

{% block title %}{% translate 'Pick a month' %}{% endblock %}

{% block body %}
  {% regroup month_year_data by year as years_list %}

  <div role="tablist" class="tabs tabs-border w-full" id="yearTabs">
    {% for x in years_list %}
      <input type="radio" 
             name="year_tabs" 
             role="tab" 
             class="tab" 
             aria-label="{{ x.grouper }}"
             id="tab-{{ x.grouper }}"
             {% if x.grouper == current_year %}checked="checked"{% endif %} />
      <div role="tabpanel" class="tab-content" id="{{ x.grouper }}-pane">
        <ul class="menu bg-base-100 w-full" id="month-year-list" hx-boost="true">
          {% for month_data in x.list %}
            <li {% if month_data.month == current_month and month_data.year == current_year %}class="disabled"{% endif %}>
              <a class="{% if month_data.month == current_month and month_data.year == current_year %}menu-active{% endif %}"
                 href={{ month_data.url }}
                 {% if month_data.month == current_month and month_data.year == current_year %}aria-disabled="true"{% endif %}>
                <span class="flex-1">{{ month_data.month|month_name }}</span>
                <span class="badge badge-primary">{{ month_data.transaction_count }}</span>
              </a>
            </li>
          {% endfor %}
        </ul>
      </div>
    {% endfor %}
  </div>
  <hr class="hr my-4">
  <div class="w-full text-end">
    <a class="btn btn-outline btn-primary btn-sm" href="{{ today_url }}" role="button" hx-boost="true">{% trans 'Today' %}</a>
  </div>
{% endblock %}