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

{% block overview_type_title %}{% translate "By account" %}{% endblock %}

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

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

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

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

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

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

{% block filter_pills %}
  <input type="hidden" name="account" 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_account_data' year=year %}"
            hx-target="#data-content"
            hx-trigger="click"
            hx-include="[name='account'], [name='month']"
            hx-swap="innerHTML"
            onclick="document.querySelector('[name=account]').value = ''"
            _="on click
               remove .btn-active from <button/> in #filter-pills
               add .btn-active to me">
      {% translate 'All' %}
    </button>
    {% for account in accounts %}
      <button class="btn btn-ghost justify-start w-full"
              role="tab"
              hx-get="{% url 'yearly_overview_account_data' year=year %}"
              hx-target="#data-content"
              hx-trigger="click"
              hx-include="[name='account'], [name='month']"
              hx-swap="innerHTML"
              onclick="document.querySelector('[name=account]').value = '{{ account.id }}'"
              _="on click
                 remove .btn-active from <button/> in #filter-pills
                 add .btn-active to me">
        {% if account.group.name %}<span class="badge badge-primary badge-outline">{{ account.group.name }}</span>{% endif %} {{ account.name }}
      </button>
    {% endfor %}
  </div>
{% endblock %}

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

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