{% comment %}
Date stepper for a page that shows one day or week at a time: one pill holding
the date between two arrows that step it back and forward (previous and next:
the neighbouring values). The date is the browser's own, in the format of the
visitor's device; a page that wants the day in words writes it elsewhere.
Looks: filled + small (a pill, for toolbars); no other look exists yet.
Django's own widget draws the box, always a date box, and takes the click
itself: the browser opens its own picker (a tap on a phone, the calendar icon
on a desktop), since iOS opens none from script. The box sends the field's
request on its "step" event (js/fields.js): an arrow or a picked day sends at
once, a typed date on Enter or when the box is left, so a half-typed date is
never sent.
Any hx_* option reaches the box; a caller's trigger is followed by "step",
which the arrows and the picker need. The htmx settings are written only when
it makes a request (hx_get, hx_post, hx_put, hx_patch, hx_delete). The arrows
carry ids from the field's, so a redraw gives the focus back to the one that
had it.
{% endcomment %}
{% load i18n phoxtail_core_tags phoxtail_design_tags %}
<div class="phx-date-stepper phx-date-stepper--filled phx-date-stepper--small" data-date-steps>
    <button type="button"
            class="phx-date-stepper__step"
            {% if field.auto_id %}id="{{ field.auto_id }}_previous"{% endif %}
            aria-label="{{ previous_label|default:_("Previous") }}"
            data-date-step="{{ previous }}">
        {% icon "chevron_left" %}
    </button>
    <div class="phx-date-stepper__date">
        {% if htmx.hx_trigger %}
            {% widget field input_type="date" class="phx-date-stepper__input" aria_label=field.label hx_trigger=htmx.hx_trigger|add:", step" htmx=htmx %}
        {% else %}
            {% widget field input_type="date" class="phx-date-stepper__input" aria_label=field.label hx_trigger="step" htmx=htmx %}
        {% endif %}
    </div>
    <button type="button"
            class="phx-date-stepper__step"
            {% if field.auto_id %}id="{{ field.auto_id }}_next"{% endif %}
            aria-label="{{ next_label|default:_("Next") }}"
            data-date-step="{{ next }}">
        {% icon "chevron_right" %}
    </button>
</div>