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

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

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

        {{-- Título --}}
        <div>
            <x-form.label for="title" value="Título" />
            <x-form.input
                id="title"
                name="title"
                value="{{ old('title', $phrase?->title) }}"
            />
            <x-form.error name="title" />
        </div>

        {{-- Categoria --}}
        <div>
            <x-form.label for="category" value="Categoria" />
            <x-form.input
                id="category"
                name="category"
                value="{{ old('category', $phrase?->category) }}"
            />
            <x-form.error name="category" />
        </div>

        {{-- Colunas --}}
        <div>
            <x-form.label for="columns" value="Colunas" />
            <x-form.input
                id="columns"
                name="columns"
                type="number"
                min="1"
                max="255"
                value="{{ old('columns', $phrase?->columns ?? 13) }}"
            />
            <x-form.error name="columns" />
        </div>
        {{-- Imagem de logo --}}
        <div>
            <x-form.label for="imagem_logo" value="Imagem de logo" />
            
            <x-form.file id="imagem_logo" name="imagem_logo" accept="image/png,image/jpeg,image/webp" />

            @if($phrase?->imagem_logo)
                <img class="mt-2 h-16 rounded" src="{{ asset('storage/'.$phrase->imagem_logo) }}" alt="Logo">
            @endif
        </div>
        {{-- Imagem de background --}}
        <div>
            <x-form.label for="imagem_background" value="Imagem de fundo" />

            <x-form.file id="imagem_background" name="imagem_background" accept="image/png,image/jpeg,image/webp" />

            @if($phrase?->imagem_background)
                <img class="mt-2 h-16 rounded" src="{{ asset('storage/'.$phrase->imagem_background) }}" alt="Fundo">
            @endif
        </div>
        {{-- Cor primária clara --}}
        <div>
            <x-form.color-picker
                id="cor_primario_claro"
                name="cor_primario_claro"
                label="Cor primária clara"
                value="{{ old('cor_primario_claro', $phrase?->cor_primario_claro ?? '#b04cff') }}"
                help="Escolha uma cor em HEX (#RRGGBB)"
            />
        </div>
        {{-- Cor primário escuro --}}
        <div>
            <x-form.color-picker
                id="cor_primario_escuro"
                name="cor_primario_escuro"
                label="Cor primária escuro"
                value="{{ old('cor_primario_escuro', $phrase?->cor_primario_escuro ?? '#b04cff') }}"
                help="Escolha uma cor em HEX (#RRGGBB)"
            />
        </div>

        {{-- Ativo --}}
        <div class="flex items-center gap-2">
            <input type="hidden" name="is_active" value="0">
            <x-form.checkbox    
                id="is_active"
                name="is_active"
                value="1"
                checked="{{ old('is_active', $phrase?->is_active ?? true) }}"
            />
            <x-form.label for="is_active" value="Ativo" />
        </div>
    </div>

    {{-- Frase (textarea, ocupa a largura toda) --}}
    <div>
        <x-form.label for="phrase" value="Frase" />
        <x-form.textarea
            id="phrase"
            name="phrase"
            rows="4"
            required
            :value="old('phrase', $phrase?->phrase ?? '')"
        />
        <x-form.error name="phrase" />
    </div>

    {{-- Dica --}}
    <div>
        <x-form.label for="hint" value="Dica" />
        <x-form.textarea
            id="hint"
            name="hint"
            rows="2"
            :value="old('hint', $phrase?->hint ?? '')"
        />
        <x-form.error name="hint" />
    </div>

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

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