{% load django_ledger %}

{% load i18n %}

<div class="card shadow-sm">
    <div class="card-body">
        <!-- Header Section -->
        <div class="text-center mb-4">
            <h2 class="display-4 fw-medium">
                {% if has_year %}{{ _("Fiscal Year")}} {{ to_date.year }}{% endif %}
                {% if has_month %}{{ to_date | date:"F Y" }}{% endif %}
                {% if has_quarter %}Q{{ quarter }} {{ year }}{% endif %}
                {% if has_date %}{{ to_date | date }}{% endif %}
            </h2>
        </div>

        <!-- Year Navigation -->
        <div class="text-center mb-3">
            <p class="mb-1">

                <span class="fw-bold">{{ _("Year") }}: </span>
                <a href="{{ previous_year_url }}" class="text-decoration-none me-2">
                   <span class="fas fa-chevron-right"> </span>
                    <span class="fas fa-chevron-right"> </span>
                    {{ previous_year }}</a>
                <a href="{{ current_year_url }}" class="text-decoration-none me-2 fw-bolder">{{ year }}</a>
                <a href="{{ next_year_url }}" class="text-decoration-none">{{ next_year }}
                    <span class="fas fa-chevron-left"> </span>
                    <span class="fas fa-chevron-left"> </span>
                </a>
            </p>
        </div>        

        <!-- Quarter Navigation -->
        <div class="text-center mb-3">
            <p class="mb-1">
                <span class="fw-bold">{% trans 'Quarter' %}:</span>
                {% for q_url in quarter_urls %}
                    <a href="{{ q_url.url }}" class="text-decoration-none me-2">{{ q_url.quarter_name }}</a>
                    {% if not forloop.last %}|{% endif %}
                {% endfor %}
            </p>
        </div>

        <!-- Month Navigation -->
        <div class="text-center mb-4">
            <p class="mb-1">
                <span class="fw-bold">{% trans 'Month' %}:</span>
                {% for m_url in month_urls %}
                    <a href="{{ m_url.url }}" class="text-decoration-none me-2">{{ m_url.month_abbr }}</a>
                    {% if not forloop.last %}|{% endif %}
                {% endfor %}
            </p>
        </div>

        <!-- Date Range -->
        <div class="text-center mb-4">
            {% if has_date %}
                <p class="fw-bold fst-italic">{{ from_date | date:"m/d/Y" }}</p>
            {% else %}
                <p class="fw-bold fst-italic">
                    {{ from_date | date:"m/d/Y" }}
                    {% trans 'thru' %}
                    {{ to_date | date:"m/d/Y" }}
                </p>
            {% endif %}
        </div>

        <!-- Current Month Link -->
        <div class="text-center mb-4">
            <a href="{{ current_month_url }}" class="btn btn-link text-decoration-none">
                {% trans 'Go To Current Month' %}
            </a>
        </div>

        <!-- Date Picker -->


        <div class="text-center ">
            {% date_picker date_navigation_url %}
        </div>
    </div>
</div>