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

{% block content %}
<div class="container-fluid px-md-3 py-5 column-gap-5">
  <div class="row mb-3">
    <div class="col flex-row align-items-center d-flex">
      <div class="tw-text-base mx-2 h-100 align-items-center d-flex">
        <a role="button" href="
        {% url 'transactions_overview' month=previous_month 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 xl:tw-w-72 text-center"
           hx-get="{% url 'available_dates' %}"
           hx-target="#generic-offcanvas-left"
           hx-vals='{"month": {{ month }}, "year": {{ year }}}' role="button">
        {{ month|month_name }} {{ year }}
      </div>
      <div class="tw-text-base mx-2 h-100 align-items-center d-flex">
        <a role="button"
           href="{% url 'transactions_overview' month=next_month year=next_year %}">
          <i class="fa-solid fa-chevron-right"></i>
        </a>
      </div>
    </div>

  </div>
  <div class="row gx-xl-4 gy-3">
    <div class="col-12 col-xl-3 order-1 order-xl-0">
      <div class="row">
            <div class="col-6 p-1">
                <button class="btn btn-sm btn-outline-success w-100"
                        hx-get="{% url 'transaction_add' %}"
                        hx-target="#generic-offcanvas"
                        hx-vals='{"year": {{ year }}, "month": {{ month }}, "type": "IN"}'>
                  <i class="fa-solid fa-circle-plus me-3"></i>
                  {% translate "Income" %}
                </button>
            </div>
            <div class="col-6 p-1">
                <button class="btn btn-sm btn-outline-danger w-100"
                        hx-get="{% url 'transaction_add' %}"
                        hx-target="#generic-offcanvas"
                        hx-vals='{"year": {{ year }}, "month": {{ month }}, "type": "EX"}'>
                  <i class="fa-solid fa-circle-plus me-3"></i>
                  {% translate "Expense" %}
                </button>
            </div>
            <div class="col-6 p-1">
                <button class="btn btn-sm btn-outline-info w-100"
                        hx-get="{% url 'transactions_transfer' %}"
                        hx-target="#generic-offcanvas"
                        hx-vals='{"year": {{ year }}, "month": {{ month }}}'>
                  <i class="fa-solid fa-money-bill-transfer me-3"></i>
                  {% translate "Transfer" %}
                </button>
            </div>
        </div>
    </div>
    <div class="col-12 col-xl-6 order-2 order-xl-1"
         id="transactions"
         hx-get="{% url 'transactions_list' month=month year=year %}"
         hx-trigger="load, transaction_updated from:window">
    </div>
    <div class="col-12 col-xl-3 order-0 order-xl-2">
      <div id="total-expenses" hx-get="{% url 'monthly_summary' month=month year=year %}"
           hx-trigger="load, transaction_updated from:window" class="sticky-sidebar">
      </div>

{#      <div id="total-spent" hx-get="{% url 'monthly_expenses' month=month year=year %}"#}
{#           hx-trigger="load, transaction_updated from:window" hx-vals='{"s": "p"}'>#}
{#      </div>#}
    </div>
  </div>
</div>
{% endblock %}