@props(['valor', 'modelo' => 'ano', 'minimo' => 2019, 'maximo' => null, 'dica' => null, 'alinhar' => 'direita'])

{{-- Ano com anterior e seguinte a um clique, no mesmo desenho do seletor de
     mês; clicar no ano abre a grade dos anos. `dica` explica, ao parar o
     mouse, por que a seta da frente está apagada — sem isso o teto parece
     defeito. --}}
@php
    $ano = (int) $valor;
    $maximo = (int) ($maximo ?? date('Y'));
    $id = 'seletor-'.$modelo;
@endphp

<div class="text-sm">
    <span id="{{ $id }}-legenda" class="block text-xs font-medium text-suave">Ano</span>
    <div class="relative mt-1" x-data="calendario(@js(['modelo' => $modelo, 'valor' => (string) $ano, 'tipo' => 'ano', 'minimo' => $minimo.'-01-01', 'maximo' => $maximo.'-12-31']))">
        <div class="flex items-stretch overflow-hidden rounded-md border border-fio bg-superficie shadow-xs">
            <button type="button" wire:click="$set('{{ $modelo }}', {{ $ano - 1 }})" @disabled($ano <= $minimo)
                    class="px-2.5 text-suave hover:bg-chao hover:text-tinta disabled:opacity-30" aria-label="Ano anterior">
                <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/></svg>
            </button>
            <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 min-w-24 items-center justify-center gap-1.5 border-x border-fio px-3 py-1.5 font-medium text-tinta hover:bg-chao focus-visible:outline-2 focus-visible:outline-marca-600">
                <span aria-live="polite">{{ $ano }}</span>
                <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>
            <button type="button" wire:click="$set('{{ $modelo }}', {{ $ano + 1 }})" @disabled($ano >= $maximo)
                    @if ($dica && $ano >= $maximo) title="{{ $dica }}" @endif
                    class="px-2.5 text-suave hover:bg-chao hover:text-tinta disabled:opacity-30" aria-label="Ano seguinte">
                <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg>
            </button>
        </div>
        @include('components.partes.painel-calendario', ['alinhar' => $alinhar])
    </div>
</div>