{#
    The span the whole board is relative to. Free/taken has no answer without it once bookings
    can cover part of a day, so this drives the plan colours AND the calendar occupancy counts.

    Both fields hit the same fragment endpoint as the calendar does, so narrowing the span is the
    same single round trip as changing the day. hx-include pulls in the sibling field, because
    a span needs both ends to mean anything.
#}
{# An all-day board leaves both fields empty: 24:00 has no representation in <input type="time">,
   and an empty pair is exactly what TimeRange::parse() reads back as "the whole day". #}
{% set day = selected_date|date('Y-m-d') %}

<div class="flex flex-wrap items-end gap-3 pb-4" id="board-timerange">
    <div>
        <label class="block text-xs text-gray-500 pb-1" for="board-from">Von</label>
        <input type="time" id="board-from" name="from" value="{{ selected_time.allDay ? '' : selected_time.start }}" step="900"
               class="rounded-md border-0 py-1.5 text-sm text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary"
               hx-get="{{ path('app_board_day', { type: type.value, date: day }) }}"
               hx-include="#board-to"
               hx-trigger="change"
               hx-swap="none">
    </div>
    <div>
        <label class="block text-xs text-gray-500 pb-1" for="board-to">Bis</label>
        <input type="time" id="board-to" name="to" value="{{ selected_time.allDay ? '' : selected_time.end }}" step="900"
               class="rounded-md border-0 py-1.5 text-sm text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary"
               hx-get="{{ path('app_board_day', { type: type.value, date: day }) }}"
               hx-include="#board-from"
               hx-trigger="change"
               hx-swap="none">
    </div>

    {% if not selected_time.allDay %}
        <button type="button" class="button button--small button--neutral"
                hx-get="{{ path('app_board_day', { type: type.value, date: day }) }}"
                hx-swap="none">
            Ganzer Tag
        </button>
    {% else %}
        <span class="text-xs text-gray-500 pb-2">ganzer Tag</span>
    {% endif %}
</div>