{% extends "layouts/base.html" %}
{% load i18n %}
{% load month_name %}
{% load static %}

{% block title %}{% translate 'Yearly Overview' %} ::
  {% block overview_type_title %}{% endblock %} :: {{ year }}{% endblock %}

{% block body_hyperscript %}
  on keyup[code is 'ArrowLeft' and target.nodeName is 'BODY'] from body trigger 'previous_year' end
  on keyup[code is 'ArrowRight' and target.nodeName is 'BODY'] from body trigger 'next_year' end
{% endblock %}

{% block content %}
  <div class="h-full text-center mb-4 w-full">
    <div role="tablist" class="tabs tabs-box mx-auto w-fit">
      <a href="{% url 'yearly_overview_currency' year=year %}"
         class="tab {% if type == 'currency' %}tab-active{% endif %}" hx-boost>
        <i class="fa-solid fa-solid fa-coins fa-fw me-2"></i>{% trans 'Currency' %}
      </a>
      <a href="{% url 'yearly_overview_account' year=year %}"
         class="tab {% if type == 'account' %}tab-active{% endif %}" hx-boost>
        <i class="fa-solid fa-wallet fa-fw me-2"></i>{% trans 'Account' %}
      </a>
    </div>
  </div>
  <div class="container" id="yearly-content">
    <div class="row mt-7 mb-5">
      {#    Date picker #}
      <div class="col-12 lg:col-3">
        <div class="flex flex-row items-center">
          <a role="button"
             hx-boost="true"
             class="btn btn-ghost"
             hx-trigger="click, previous_year from:window"
             href="{% block previous_year_url %}{% endblock %}">
            <i class="fa-solid fa-chevron-left"></i></a>
          <div class="text-2xl font-bold flex-1 text-center whitespace-normal flex-wrap h-auto min-w-0">
            {{ year }}
          </div>
          <a role="button"
             hx-boost="true"
             class="btn btn-ghost"
             hx-trigger="click, next_year from:window"
             href="{% block next_year_url %}{% endblock %}">
            <i class="fa-solid fa-chevron-right"></i>
          </a>
        </div>
      </div>
    </div>
    <div class="row gap-y-3">
      <div class="col-12 xl:col-3">
        <div class="card bg-base-100 card-border">
          <div class="card-body">
            <input type="hidden" name="month" value="">
            <div class="flex flex-col gap-1 w-full" id="month-pills" role="tablist"
                 hx-indicator="#data-content">
              <button class="btn btn-ghost btn-active justify-start w-full"
                      role="tab"
                      hx-get="{% block data_url %}{% endblock %}"
                      hx-target="#data-content"
                      hx-trigger="click"
                      hx-include="{% block hx_include %}{% endblock %}"
                      hx-swap="innerHTML"
                      onclick="document.querySelector('[name=month]').value = ''"
                      _="on click
                          remove .btn-active from <button/> in #month-pills
                          add .btn-active to me">
                {% translate 'Year' %}
              </button>
              {% for month in months %}
                <button class="btn btn-ghost justify-start w-full"
                        role="tab"
                        hx-get="{% block month_data_url %}{% endblock %}"
                        hx-target="#data-content"
                        hx-trigger="click"
                        hx-include="{% block month_hx_include %}{% endblock %}"
                        hx-swap="innerHTML"
                        onclick="document.querySelector('[name=month]').value = '{{ month }}'"
                        _="on click
                          remove .btn-active from <button/> in #month-pills
                          add .btn-active to me">
                  {{ month|month_name }}
                </button>
              {% endfor %}
            </div>
          </div>
        </div>
      </div>

      <div class="col-12 xl:col-3">
        <div class="card bg-base-100 card-border">
          <div class="card-body">
            {% block filter_pills %}{% endblock %}
          </div>
        </div>
      </div>

      <hr class="xl:hidden hr">

      <div class="col-12 xl:col-6">
        <div id="data-content"
             class="show-loading"
             hx-get="{% block content_data_url %}{% endblock %}"
             hx-trigger="load, every 10m, updated from:window"
             hx-include="{% block content_hx_include %}{% endblock %}"
             hx-swap="innerHTML">
        </div>
      </div>
    </div>
  </div>
  <c-ui.transactions_fab></c-ui.transactions_fab>
{% endblock %}