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

{% block title %}{% translate 'Yearly Overview' %} :: {% translate "By account" %} :: {{ 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-100 text-center mb-4 pt-2">
    <div class="btn-group gap-3" role="group">
      <a href="{% url 'yearly_overview_currency' year=year %}" class="btn {% if type != 'currency' %}btn-outline-primary{% else %}btn-primary{% endif %} rounded-5" 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="btn {% if type != 'account' %}btn-outline-primary{% else %}btn-primary{% endif %} rounded-5" hx-boost>
        <i class="fa-solid fa-wallet fa-fw me-2"></i>{% trans 'Account' %}
      </a>
    </div>
  </div>
  <div class="container px-md-3 py-3 column-gap-5" id="yearly-content">
    <div class="row mb-3 gx-xl-4 gy-3 mb-4">
      {#    Date picker#}
      <div class="col-12 col-xl-2 flex-row align-items-center d-flex">
        <div class="tw:text-base h-100 align-items-center d-flex">
          <a role="button"
             class="pe-4 py-2"
             hx-boost="true"
             hx-trigger="click, previous_year from:window"
             href="{% url 'yearly_overview_account' year=previous_year %}">
            <i class="fa-solid fa-chevron-left"></i></a>
        </div>
        <div class="tw:text-3xl fw-bold font-monospace tw:w-full text-center">
          {{ year }}
        </div>
        <div class="tw:text-base mx-2 h-100 align-items-center d-flex">
          <a role="button"
             class="ps-3 py-2"
             hx-boost="true"
             hx-trigger="click, next_year from:window"
             href="{% url 'yearly_overview_account' year=next_year %}">
            <i class="fa-solid fa-chevron-right"></i>
          </a>
        </div>
      </div>
      {#    Action buttons#}
      <div class="col-12 col-xl-10">
        {#      <c-ui.quick-transactions-buttons#}
        {#        :year="year"#}
        {#        :month="month"#}
        {#      ></c-ui.quick-transactions-buttons>#}
      </div>
    </div>
    <div class="row">
      <div class="col-lg-2">
        <div class="nav flex-column nav-pills" id="month-pills" role="tablist" aria-orientation="vertical"
             hx-indicator="#data-content">
          <input type="hidden" name="month" value="">
          <button class="nav-link active"
                  role="tab"
                  data-bs-toggle="pill"
                  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=month]').value = ''">
            {% translate 'Year' %}
          </button>
          {% for month in months %}
            <button class="nav-link"
                    role="tab"
                    data-bs-toggle="pill"
                    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=month]').value = '{{ month }}'">
              {{ month|month_name }}
            </button>
          {% endfor %}
        </div>
      </div>

      <hr class="my-4 d-block d-lg-none">
      <div class="col-lg-3">
        <div class="nav flex-column nav-pills" id="currency-pills" role="tablist" aria-orientation="vertical"
             hx-indicator="#data-content">
          <input type="hidden" name="account" value="">
          <button class="nav-link active"
                  role="tab"
                  data-bs-toggle="pill"
                  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 = ''">
            {% translate 'All' %}
          </button>
          {% for account in accounts %}
            <button class="nav-link"
                    role="tab"
                    data-bs-toggle="pill"
                    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 }}'">
              <span class="badge text-bg-primary me-2">{{ account.group.name }}</span>{{ account.name }}
            </button>
          {% endfor %}
        </div>
      </div>

      <div class="col-lg-7">
        <div id="data-content"
             class="show-loading"
             hx-get="{% url 'yearly_overview_account_data' year=year %}"
             hx-trigger="load, every 10m, updated from:window"
             hx-include="[name='account'], [name='month']"
             hx-swap="innerHTML">
        </div>
      </div>
    </div>
  </div>
  <c-ui.transactions_fab></c-ui.transactions_fab>
{% endblock %}