@props(['valor', 'modelo', 'legenda', 'minimo' => '2019-01-01', 'maximo' => null, 'alinhar' => 'esquerda'])

{{-- Um dia, num calendário em português. O título do calendário sobe para os
     meses e dali para os anos: escolher 05/12/2025 estando em setembro/2026
     são quatro cliques. --}}
@php
    $data = DateTimeImmutable::createFromFormat('!Y-m-d', (string) $valor) ?: new DateTimeImmutable('today');
    $maximo ??= date('Y-m-d');
    $id = 'seletor-'.$modelo;
@endphp

<div class="text-sm">
    <span id="{{ $id }}-legenda" class="block text-xs font-medium text-suave">{{ $legenda }}</span>
    <div class="relative mt-1" x-data="calendario(@js(['modelo' => $modelo, 'valor' => $data->format('Y-m-d'), 'tipo' => 'dia', 'minimo' => $minimo, 'maximo' => $maximo]))">
        <button type="button" id="{{ $id }}" x-on:click="aberto ? fechar() : abrir()"
                aria-haspopup="dialog" x-bind:aria-expanded="aberto ? 'true' : 'false'" aria-labelledby="{{ $id }}-legenda {{ $id }}"
                class="flex h-[2.125rem] min-w-36 items-center justify-between gap-2 rounded-md border border-fio bg-superficie px-3 font-medium tabular-nums text-tinta shadow-xs hover:bg-chao focus-visible:outline-2 focus-visible:outline-marca-600">
            {{ $data->format('d/m/Y') }}
            <svg class="size-3.5 text-suave" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="5" width="17" height="15" rx="2"/><path stroke-linecap="round" d="M3.5 9.5h17M8 3v4M16 3v4"/></svg>
        </button>
        @include('components.partes.painel-calendario', ['alinhar' => $alinhar])
    </div>
</div>