@props([
    'anagram' => null,
    'hasResults' => false,
])

<form method="POST" action="{{ route('find') }}" class="space-y-4 mb-8">
    @csrf

    <label for="anagram" class="block text-primary font-mono text-xs uppercase tracking-wider">
        &gt; Letters
    </label>
    <input
        id="anagram"
        name="anagram"
        type="text"
        value="{{ old('anagram', $anagram ?? '') }}"
        placeholder="eamstoxil"
        autocomplete="off"
        autocapitalize="off"
        autocorrect="off"
        spellcheck="false"
        autofocus
        required
        class="w-full bg-black border-bordeaux text-primary focus:border-primary font-mono text-3xl tracking-wider uppercase rounded-none border-2 focus:ring-0 focus:outline-none placeholder:text-primary/30 placeholder:normal-case transition-all glow-bordeaux px-4 py-3"
    >
    @error('anagram')
        <p class="text-primary font-mono text-xs">{{ $message }}</p>
    @enderror

    <div class="flex gap-3">
        <button
            type="submit"
            id="submit-btn"
            @class([
                'bg-black hover:bg-primary text-primary hover:text-black font-mono text-sm font-bold border-primary rounded-none border-2 uppercase tracking-wider transition-all glow-bordeaux cursor-pointer px-4 py-2 disabled:cursor-not-allowed disabled:bg-black disabled:text-primary/30 disabled:border-primary/30 disabled:shadow-none',
                'w-2/3' => $hasResults,
                'w-full' => ! $hasResults,
            ])
        >
            [FIND WORDS]
        </button>

        @if ($hasResults)
            <a
                href="{{ route('home') }}"
                class="w-1/3 inline-flex items-center justify-center bg-black hover:bg-bordeaux text-primary/60 hover:text-primary font-mono text-sm font-bold border-bordeaux hover:border-primary rounded-none border-2 glow-bordeaux uppercase tracking-wider transition-all px-4 py-2"
            >
                [CLEAR]
            </a>
        @endif
    </div>
</form>

@isset($anagram)
    <script>
        (() => {
            const input = document.getElementById('anagram');
            const button = document.getElementById('submit-btn');
            const original = @json($anagram);

            const sync = () => {
                const value = input.value.trim().toLowerCase();
                button.disabled = value === original.trim().toLowerCase() || value === '';
            };

            input.addEventListener('input', sync);
            sync();
        })();
    </script>
@endisset