WYGIWYH/app/templates/yearly_overview/pages/overview_by_currency.html

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

{% block title %}{% translate 'Yearly Overview' %} :: {% translate 'By currency' %} :: {{ 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="container px-md-3 py-3 column-gap-5">
  <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_currency' 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_currency' 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_currency_data' year=year %}"
                    hx-target="#data-content"
                    hx-trigger="click"
                    hx-include="[name='currency'], [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_currency_data' year=year %}"
                    hx-target="#data-content"
                    hx-trigger="click"
                    hx-include="[name='currency'], [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="currency" value="">
            <button class="nav-link active"
                    role="tab"
                    data-bs-toggle="pill"
                    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 = ''">
                {% translate 'All' %}
            </button>
            {% for currency in currencies %}
            <button class="nav-link"
                    role="tab"
                    data-bs-toggle="pill"
                    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 }}'">
                {{ currency.name }}
            </button>
            {% endfor %}
        </div>
    </div>

    <div class="col-lg-7">
        <div id="data-content"
             class="show-loading"
             hx-get="{% url 'yearly_overview_currency_data' year=year %}"
             hx-trigger="load"
             hx-include="[name='currency'], [name='month']"
             hx-swap="innerHTML">
        </div>
    </div>
  </div>
</div>
{% endblock %}