{% comment %}
Render a navigation menu for dates

Context:
- url_name: url name
- date: current date
- input_type: date input type
- dates: dates to display as a list of `(date|None, title|None)`.

An empty date results to a title or a separator
{% endcomment %}
{% load i18n %}

<a-switch class="button burger"
    el=".nav-dates" icon="far fa-calendar" group="nav"
    aria-label="{% translate "Dates" %}">
</a-switch>

<div class="nav-menu nav-dates">
    {% for day in dates %}
    <a href="{% url url_name date=day %}" class="nav-item {% if day == date %}active{% endif %}">
        {{ day|date:"l d" }}
    </a>
    {% endfor %}

    <a-dropdown class="nav-item align-right flex-grow-0 dropdown is-right"
            content-class="dropdown-menu"
            button-tag="span" button-class="dropdown-trigger"
            button-icon-open="fa-solid fa-plus" button-icon-close="fa-solid fa-minus">
        <template #default>
            <div class="dropdown-content">
                <div class="dropdown-item">
                    <h4>{% translate "Pick a date" %}</h4>
                    <v-calendar mode="date" borderless
                        :initial-page="{month: {{date.month}}, year: {{date.year}}}"
                        @dayclick="(event) => window.aircox.pickDate({% url url_name %}, event)"
                        color="yellow"
                        />
                </div>
            </div>
        </template>
    </a-dropdown>
</div>
