{% load i18n %}
<caption class="text-light">
    <div class="row">
        <div class="col">
            {% if calendar.prev_ref %}
            <form class="d-inline">
                <input class="visually-hidden" name="calendar" value="{{ calendar.room_calendar.pk }}">
                <input class="visually-hidden" name="date_reference" value="{{ calendar.prev_ref|date:"Y-m-d" }}">

            <button class="btn d-inline" type="submit">
            <i class="bi bi-caret-left-fill"
                hx-post="{% url inner_url %}"
                hx-target="#calendar-table-wrapper"
            ></i>
            </button>
            </form>
            {% endif %}

        </div>


        <div class="col">
            <form id="caption-form"
                    class="d-inline p-0 mx-0"
                hx-post="{% url inner_url %}"
                hx-target="#calendar-table-wrapper"
                  hx-trigger="change,RefreshTable"
            >
                    <label class="btn d-inline"
                            for="{{ form.calendar.id_for_label }}"
                           _="on click
                           tell #{{ form.calendar.id_for_label }}
                           call you.showPicker()
                           end"
                    >{% if calendar.room_calendar %}{{ calendar.room_calendar }}{% else %}
                        {% translate 'All Rooms' %}{% endif %}
                        <i class="bi bi-house-down"></i>
                    </label>
                    <div class="visually-hidden">
                        {{ form.calendar }}
                    </div>
                {% if calendar.datetime %}
                <input class="visually-hidden" name="date_reference" value="{{ calendar.datetime|date:"Y-m-d" }}">
                {% endif %}

            </form>

        </div>

        <div class="col" style="font-size: .8rem;">
            {% if calendar.week_start %}
            <form class="d-inline p-0 mx-0"
                hx-post="{% url inner_url %}"
                hx-target="#calendar-table-wrapper"
                  hx-trigger="change"
            >
                <label class="btn d-inline"
                        for="{{ form.date_reference.id_for_label }}"
                       _="on click
                       tell #{{form.date_reference.id_for_label}}
                       call you.showPicker()
                       end">
                    <span class="d-inline">
                               {{ calendar.week_start|date:"d/m/y" }}-
                                {{ calendar.week_end|date:"d/m/y"  }}
                    </span>
                    <i class="bi bi-calendar2-date"></i>
                </label>
                <div class="visually-hidden">
                    {{ form.date_reference }}
                </div>
                <input class="visually-hidden" name="calendar" value="{{ calendar.room_calendar.pk }}">
            </form>
            {% endif %}
        </div>

        <div class="col">
            {% if calendar.next_ref %}
            <form class="d-inline">
                <input class="visually-hidden" name="calendar" value="{{ calendar.room_calendar.pk }}">
                <input class="visually-hidden" name="date_reference" value="{{ calendar.next_ref|date:"Y-m-d" }}">

            <button class="btn d-inline" type="submit">
            <i class="bi bi-caret-right-fill"
               hx-post="{% url inner_url %}"
               hx-target="#calendar-table-wrapper"
            ></i>
            </button>
            </form>
            {% endif %}
        </div>

    </div>

</caption>