@section('title', __('Roadmap'))
<div>
    <x-baseview title="{{ __('Roadmap') }}">

        <x-km.aviso tipo="info">
            {{ __('O quadro do dono: arraste os cartões entre colunas (ou use as setas). Só o admin master enxerga esta tela.') }}
        </x-km.aviso>

        <div class="grid gap-4 mt-4 lg:grid-cols-3" wire:sortable-group="reordenar">
            @foreach (\App\Models\RoadmapCard::COLUNAS as $chave => $rotulo)
                <div class="bg-white border rounded-lg overflow-hidden" style="min-height:300px">
                    <div class="flex items-center justify-between px-3 py-2 border-b" style="background:#f8faf9">
                        <p class="text-sm font-bold text-gray-700">
                            {{ $rotulo }}
                            <span class="text-xs font-normal text-gray-400">({{ count($porColuna[$chave]) }})</span>
                        </p>
                        <button wire:click="criar('{{ $chave }}')" title="{{ __('Novo cartão') }}"
                            class="km-icone" style="width:26px;height:26px;font-size:15px">＋</button>
                    </div>
                    <div class="p-2 space-y-2" style="min-height:250px" wire:sortable-group.item-group="{{ $chave }}">
                        @foreach ($porColuna[$chave] as $card)
                            <div wire:sortable-group.item="{{ $card->id }}" wire:key="card-{{ $card->id }}"
                                class="p-3 border rounded-lg bg-white" style="cursor:grab;box-shadow:0 1px 2px rgba(16,24,40,.06)">
                                <div class="flex items-start justify-between gap-2">
                                    <button wire:click="editar({{ $card->id }})" class="text-left" style="min-width:0;flex:1">
                                        <p class="text-sm font-semibold text-gray-800 {{ $chave === 'feito' ? 'line-through text-gray-400' : '' }}">{{ $card->titulo }}</p>
                                        @if ($card->detalhe)
                                            <p class="mt-1 text-xs text-gray-500" style="display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">{{ $card->detalhe }}</p>
                                        @endif
                                    </button>
                                    <span class="flex flex-col" style="flex-shrink:0">
                                        @if ($chave !== 'a_fazer')
                                            <button wire:click="mover({{ $card->id }}, '{{ $chave === 'feito' ? 'fazendo' : 'a_fazer' }}')"
                                                class="text-gray-300 hover:text-gray-600" title="{{ __('Mover para trás') }}" style="border:0;background:none;font-size:12px">←</button>
                                        @endif
                                        @if ($chave !== 'feito')
                                            <button wire:click="mover({{ $card->id }}, '{{ $chave === 'a_fazer' ? 'fazendo' : 'feito' }}')"
                                                class="text-gray-300 hover:text-gray-600" title="{{ __('Avançar') }}" style="border:0;background:none;font-size:12px">→</button>
                                        @endif
                                    </span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>

        {{-- modal criar/editar --}}
        <x-km.modal :mostrar="$modalAberto" titulo="{{ $editandoId ? __('Editar cartão') : __('Novo cartão') }}">
            <div class="space-y-3">
                <div>
                    <label class="block mb-1 text-xs text-gray-500">{{ __('Título') }}</label>
                    <input type="text" wire:model.defer="titulo" class="w-full text-sm border-gray-300 rounded-md" />
                </div>
                <div>
                    <label class="block mb-1 text-xs text-gray-500">{{ __('Detalhe (opcional)') }}</label>
                    <textarea wire:model.defer="detalhe" rows="4" class="w-full text-sm border-gray-300 rounded-md"></textarea>
                </div>
            </div>
            <x-slot name="acoes">
                @if ($editandoId)
                    <button wire:click="excluir({{ $editandoId }})"
                        class="px-3 text-sm font-semibold rounded-md border"
                        style="color:#b91c1c;border-color:#fecaca;background:#fef2f2;padding-top:7px;padding-bottom:7px;margin-right:auto">{{ __('Excluir') }}</button>
                @endif
                <button wire:click="$set('modalAberto', false)"
                    class="px-3 text-sm border rounded-md" style="padding-top:7px;padding-bottom:7px">{{ __('Cancelar') }}</button>
                <button wire:click="salvar" class="px-4 text-sm font-bold text-white rounded-md"
                    style="background:#15803d;padding-top:8px;padding-bottom:8px">{{ __('Salvar') }}</button>
            </x-slot>
        </x-km.modal>

    </x-baseview>
</div>