{% extends "yearly_overview/pages/yearly_overview_base.html" %}
{% load currency_display %}
{% load crispy_forms_tags %}
{% load i18n %}

{% block overview_type_title %}{% translate 'By currency' %}{% endblock %}

{% block previous_year_url %}{% url 'yearly_overview_currency' year=previous_year %}{% endblock %}

{% block next_year_url %}{% url 'yearly_overview_currency' year=next_year %}{% endblock %}

{% block data_url %}{% url 'yearly_overview_currency_data' year=year %}{% endblock %}

{% block hx_include %}[name='currency'], [name='month']{% endblock %}

{% block month_data_url %}{% url 'yearly_overview_currency_data' year=year %}{% endblock %}

{% block month_hx_include %}[name='currency'], [name='month']{% endblock %}

{% block filter_pills %}
  <input type="hidden" name="currency" value="">
  <div class="flex flex-col w-full gap-1" id="filter-pills" role="tablist"
       hx-indicator="#data-content">
    <button class="btn btn-ghost btn-active justify-start w-full"
            role="tab"
            hx-get="{% url 'yearly_overview_currency_data' year=year %}"
            hx-target="#data-content"
            hx-trigger="click"
            hx-include="[name='currency'], [name='month']"
            hx-swap="innerHTML"
            onclick="document.querySelector('[name=currency]').value = ''"
            _="on click
               remove .btn-active from <button/> in #filter-pills
               add .btn-active to me">
      {% translate 'All' %}
    </button>
    {% for currency in currencies %}
      <button class="btn btn-ghost justify-start w-full"
              role="tab"
              hx-get="{% url 'yearly_overview_currency_data' year=year %}"
              hx-target="#data-content"
              hx-trigger="click"
              hx-include="[name='currency'], [name='month']"
              hx-swap="innerHTML"
              onclick="document.querySelector('[name=currency]').value = '{{ currency.id }}'"
              _="on click
                 remove .btn-active from <button/> in #filter-pills
                 add .btn-active to me">
        {{ currency.name }}
      </button>
    {% endfor %}
  </div>
{% endblock %}

{% block content_data_url %}{% url 'yearly_overview_currency_data' year=year %}{% endblock %}

{% block content_hx_include %}[name='currency'], [name='month']{% endblock %}