{{-- O painel que os seletores de período abrem (resources/js/calendario.js).
     `alinhar` põe o painel colado à esquerda ou à direita do botão: no topo da
     página os seletores ficam à direita, e um painel alinhado à esquerda
     sairia da tela. --}}
@php
    $celula = 'rounded-md text-sm tabular-nums transition-colors focus-visible:outline-2 focus-visible:outline-marca-600 disabled:cursor-not-allowed disabled:opacity-30';
@endphp

<div x-show="aberto" x-cloak x-ref="painel" x-transition.opacity.duration.100ms
     x-on:click.outside="fechar()" x-on:keydown.escape.stop="fechar()"
     role="dialog" aria-label="Escolher período"
     @class([
        'absolute top-full z-40 mt-1 w-72 rounded-lg border border-fio bg-superficie p-3 text-sm shadow-lg',
        'right-0' => ($alinhar ?? 'esquerda') === 'direita',
        'left-0' => ($alinhar ?? 'esquerda') !== 'direita',
     ])>
    <div class="flex items-center justify-between gap-2">
        <button type="button" x-on:click="voltar()" class="rounded-md p-1.5 text-suave hover:bg-chao hover:text-tinta" aria-label="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" x-on:click="subir()" x-bind:disabled="visao === 'anos'"
                class="rounded-md px-2 py-1 font-semibold text-tinta first-letter:uppercase enabled:hover:bg-marca-50 enabled:hover:text-marca-700"
                x-text="titulo" x-bind:title="visao === 'anos' ? '' : 'Ver ' + (visao === 'dias' ? 'os meses' : 'os anos')"></button>
        <button type="button" x-on:click="avancar()" class="rounded-md p-1.5 text-suave hover:bg-chao hover:text-tinta" aria-label="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>

    {{-- Anos --}}
    <div x-show="visao === 'anos'" class="mt-2 grid grid-cols-3 gap-1">
        <template x-for="a in anosDaPagina" :key="a">
            <button type="button" x-on:click="aoEscolherAno(a)" x-bind:disabled="! anoPermitido(a)" x-text="a"
                    x-bind:data-escolhido="String(escolhido()).slice(0, 4) === String(a) ? '' : null"
                    x-bind:class="String(escolhido()).slice(0, 4) === String(a) ? 'bg-marca-700 text-white font-semibold' : 'text-tinta enabled:hover:bg-marca-50'"
                    class="{{ $celula }} py-2"></button>
        </template>
    </div>

    {{-- Meses --}}
    <div x-show="visao === 'meses'" class="mt-2 grid grid-cols-3 gap-1">
        <template x-for="(nome, i) in nomesMeses" :key="i">
            <button type="button" x-on:click="aoEscolherMes(i + 1)" x-bind:disabled="! mesPermitido(ano, i + 1)"
                    x-text="nome.slice(0, 3)" x-bind:aria-label="nome + ' de ' + ano"
                    x-bind:data-escolhido="String(escolhido()).slice(0, 7) === chaveMes(ano, i + 1) ? '' : null"
                    x-bind:class="String(escolhido()).slice(0, 7) === chaveMes(ano, i + 1) ? 'bg-marca-700 text-white font-semibold' : 'text-tinta enabled:hover:bg-marca-50'"
                    class="{{ $celula }} py-2 capitalize"></button>
        </template>
    </div>

    {{-- Dias --}}
    <div x-show="visao === 'dias'" class="mt-2">
        <div class="grid grid-cols-7 text-center text-[0.65rem] font-semibold uppercase text-suave">
            <template x-for="(d, i) in diasSemana" :key="i"><span class="py-1" x-text="d"></span></template>
        </div>
        <div class="grid grid-cols-7 gap-0.5">
            <template x-for="c in celulas" :key="c.id">
                <div>
                    <template x-if="! c.vazia">
                        <button type="button" x-on:click="escolher(c.chave)" x-bind:disabled="! diaPermitido(c.chave)" x-text="c.dia"
                                x-bind:data-escolhido="escolhido() === c.chave ? '' : null"
                                x-bind:class="escolhido() === c.chave ? 'bg-marca-700 text-white font-semibold' : (eHoje(c.chave) ? 'text-marca-700 font-semibold ring-1 ring-marca-200 enabled:hover:bg-marca-50' : 'text-tinta enabled:hover:bg-marca-50')"
                                class="{{ $celula }} h-8 w-full"></button>
                    </template>
                </div>
            </template>
        </div>
    </div>
</div>