@props(['coluna', 'rotulo', 'ordem', 'direcao' => 'desc', 'alinhar' => 'right'])

{{-- Título de coluna que ordena a tabela: clicar ordena por ela, clicar de
     novo inverte. O mesmo desenho de <x-metricas-cabecalho>; o componente
     Livewire da tela precisa ter `ordenar($coluna)`. --}}
@php $ativa = $coluna === $ordem; @endphp

<th scope="col" aria-sort="{{ $ativa ? ($direcao === 'asc' ? 'ascending' : 'descending') : 'none' }}"
    {{ $attributes->class(['py-2.5 font-semibold', 'text-left' => $alinhar === 'left', 'text-center' => $alinhar === 'center', 'text-right' => $alinhar === 'right']) }}>
    <button type="button" wire:click="ordenar('{{ $coluna }}')"
            @class([
                'group inline-flex items-center gap-1 whitespace-nowrap uppercase tracking-[0.06em] transition-colors hover:text-marca-700',
                'flex-row-reverse' => $alinhar === 'right',
                'text-marca-700' => $ativa,
            ])>
        <span>{{ $rotulo }}</span>
        <span aria-hidden="true" @class(['text-[0.55rem]', 'opacity-0 group-hover:opacity-50' => ! $ativa])>{{ $ativa && $direcao === 'asc' ? '▲' : '▼' }}</span>
    </button>
</th>