@props([
    'session' => null,
    'action',
    'method' => 'POST',
])

<form method="POST" action="{{ $action }}" class="space-y-6">
    @csrf
    @if($method !== 'POST')
        @method($method)
    @endif

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
            
            <x-form.label for="title_snapshot" value="Título" />
            <x-form.input
                id="title_snapshot"
                name="title_snapshot"
                value="{{ old('title_snapshot', $session?->title_snapshot ?? $session?->phrase?->title) }}"
                required
            />
            <x-form.error name="title_snapshot" />
        </div>

        <div>
            <x-form.label for="category_snapshot" value="Categoria" />
            <x-form.input
                id="category_snapshot"
                name="category_snapshot"
                value="{{ old('category_snapshot', $session?->category_snapshot ?? $session?->phrase?->category) }}"
            />
            <x-form.error name="category_snapshot" />
        </div>
        
        <div class="md:col-span-2">
            <x-form.label for="phrase_snapshot" value="Frase" />
            <x-form.textarea
                id="phrase_snapshot"
                name="phrase_snapshot"
                rows="3"
                :value="old('phrase_snapshot', optional($session)->phrase_snapshot ?? optional(optional($session)->phrase)->phrase)"
            />
            <x-form.error name="phrase_snapshot" />
        </div>

        <div class="md:col-span-2">
            <x-form.label for="hint_snapshot" value="Hint" />
            <x-form.textarea
                id="hint_snapshot"
                name="hint_snapshot"
                rows="2"
                :value="old('hint_snapshot', optional($session)->hint_snapshot ?? optional(optional($session)->phrase)->hint)"
            />
            <x-form.error name="hint_snapshot" />
        </div>

        <div>
            <x-form.label for="columns_snapshot" value="Colunas" />
            <x-form.input
                id="columns_snapshot"
                name="columns_snapshot"
                type="number"
                min="1"
                max="255"
                value="{{ old('columns_snapshot', $session?->columns_snapshot ?? $session?->phrase?->columns ?? 13) }}"
            />
            <x-form.error name="columns_snapshot" />
        </div>

        <div>
            <x-form.label for="status" value="Status" />
            <x-form.select
                id="status"
                name="status"
            >
                @php
                    $currentStatus = old('status', $session?->status ?? 'pending');
                @endphp
                <option value="pending" {{ $currentStatus === 'pending' ? 'selected' : '' }}>Pendente</option>
                <option value="running" {{ $currentStatus === 'running' ? 'selected' : '' }}>Em andamento</option>
                <option value="finished" {{ $currentStatus === 'finished' ? 'selected' : '' }}>Finalizada</option>
            </x-form.select>
            <x-form.error name="status" />
        </div>
    </div>

    <div class="flex justify-end gap-3">
        <a href="{{ route('game.sessions.index') }}" class="text-gray-600 hover:text-gray-900">
            Cancelar
        </a>

        <x-ui.button type="submit">
            {{ $session ? 'Atualizar sessão' : 'Criar sessão' }}
        </x-ui.button>
    </div>
</form>