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

{% block title %}{% translate 'Insights' %}{% endblock %}

{% block content %}
  <div class="container-fluid">
    <div class="row my-3 h-100">
      <div class="col-lg-2 col-md-3 mb-3 mb-md-0">
        <div class="position-sticky tw:top-3">
          <div class="">
            <div class="mb-2 w-100 d-lg-inline-flex d-grid gap-2 flex-wrap justify-content-lg-center" role="group"
                 _="on change
                    set type to event.target.value
                    add .tw:hidden to <#picker-form > div:not(.tw\\:hidden)/>

                    if type == 'month'
                      remove .tw:hidden from #month-form
                    end
                    if type == 'year'
                      remove .tw:hidden from #year-form
                    end
                    if type == 'month-range'
                      remove .tw:hidden from #month-range-form
                    end
                    if type == 'year-range'
                      remove .tw:hidden from #year-range-form
                    end
                    if type == 'date-range'
                      remove .tw:hidden from #date-range-form
                    end
                    then trigger updated"
                 id="picker-type">
              <input type="radio" class="btn-check" name="type" value="month" id="monthradio" autocomplete="off"
                     checked>
              <label class="btn btn-sm btn-outline-primary flex-grow-1" for="monthradio">{% translate 'Month' %}</label>

              <input type="radio" class="btn-check" name="type" value="year" id="yearradio" autocomplete="off">
              <label class="btn btn-sm btn-outline-primary flex-grow-1" for="yearradio">{% translate 'Year' %}</label>

              <input type="radio" class="btn-check" name="type" value="month-range" id="monthrangeradio"
                     autocomplete="off">
              <label class="btn btn-sm btn-outline-primary flex-grow-1"
                     for="monthrangeradio">{% translate 'Month Range' %}</label>

              <input type="radio" class="btn-check" name="type" value="year-range" id="yearrangeradio"
                     autocomplete="off">
              <label class="btn btn-sm btn-outline-primary flex-grow-1"
                     for="yearrangeradio">{% translate 'Year Range' %}</label>

              <input type="radio" class="btn-check" name="type" value="date-range" id="daterangeradio"
                     autocomplete="off">
              <label class="btn btn-sm btn-outline-primary flex-grow-1"
                     for="daterangeradio">{% translate 'Date Range' %}</label>
            </div>
            <form id="picker-form"
                  _="install init_datepicker
                  on change trigger updated">
              <div id="month-form" class="">
                {% crispy month_form %}
              </div>
              <div id="year-form" class="tw:hidden">
                {% crispy year_form %}
              </div>
              <div id="month-range-form" class="tw:hidden">
                {% crispy month_range_form %}
              </div>
              <div id="year-range-form" class="tw:hidden">
                {% crispy year_range_form %}
              </div>
              <div id="date-range-form" class="tw:hidden">
                {% crispy date_range_form %}
              </div>
            </form>
          </div>
          <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"
               aria-orientation="vertical">
            <button class="nav-link" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
                    type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
                    hx-get="{% url 'insights_sankey_by_account' %}" hx-include="#picker-form, #picker-type"
                    hx-indicator="#tab-content"
                    hx-target="#tab-content">{% trans 'Account Flow' %}
            </button>
            <button class="nav-link" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
                    type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
                    hx-get="{% url 'insights_sankey_by_currency' %}"
                    hx-include="#picker-form, #picker-type"
                    hx-indicator="#tab-content"
                    hx-target="#tab-content">{% trans 'Currency Flow' %}
            </button>
            <button class="nav-link" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
                    type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
                    hx-get="{% url 'category_explorer_index' %}"
                    hx-include="#picker-form, #picker-type"
                    hx-indicator="#tab-content"
                    hx-target="#tab-content">{% trans 'Category Explorer' %}
            </button>
            <button class="nav-link" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
                    type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
                    hx-get="{% url 'category_overview' %}"
                    hx-include="#picker-form, #picker-type"
                    hx-indicator="#tab-content"
                    hx-target="#tab-content">{% trans 'Categories Overview' %}
            </button>
            <hr>
            <button class="nav-link" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
                    type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
                    hx-get="{% url 'insights_late_transactions' %}"
                    hx-indicator="#tab-content"
                    hx-target="#tab-content">{% trans 'Late Transactions' %}
            </button>
            <button class="nav-link" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
                    type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
                    hx-get="{% url 'insights_latest_transactions' %}"
                    hx-indicator="#tab-content"
                    hx-target="#tab-content">{% trans 'Latest Transactions' %}
            </button>
            <button class="nav-link" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
                    type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
                    hx-get="{% url 'insights_emergency_fund' %}"
                    hx-indicator="#tab-content"
                    hx-target="#tab-content">{% trans 'Emergency Fund' %}
            </button>
          </div>
        </div>
      </div>
      <div class="col-md-9 col-lg-10">
        <div class="tab-content w-100" id="v-pills-tabContent">
          <div class="tab-pane fade" id="v-pills-content" role="tabpanel" tabindex="0">
            <div id="tab-content" class="show-loading"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}