<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Anagram Finder') }}</title>

        <link rel="icon" href="/favicon.ico" sizes="any">
        <link rel="icon" href="/favicon.svg" type="image/svg+xml">
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">

        @vite(['resources/css/app.css'])
    </head>
    <body class="bg-black antialiased min-h-screen flex flex-col items-center p-6 lg:p-8">
        <main class="w-full max-w-2xl">
            <h1 class="text-primary font-mono text-5xl font-bold uppercase tracking-widest glow-red-text mb-8">
                &gt; Anagram Finder
            </h1>

            <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' => isset($matches),
                            'w-full' => ! isset($matches),
                        ])
                    >
                        [FIND WORDS]
                    </button>

                    @isset($matches)
                        <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>
                    @endisset
                </div>
            </form>

            @isset($matches)
                <hr class="border-0 border-t-2 border-bordeaux glow-bordeaux-line mb-8">

                <section class="border-bordeaux rounded-none border-2 glow-bordeaux">
                    <h2 class="text-primary font-mono text-xs uppercase tracking-wider border-bordeaux border-b-2 glow-bordeaux-line px-4 py-2">
                        &gt; {{ count($matches) }} {{ Str::plural('match', count($matches)) }}
                    </h2>

                    @if (count($matches))
                        <ul class="divide-bordeaux divide-y font-mono text-[1.3125rem] max-h-96 overflow-y-auto scrollbar-red">
                            @foreach ($matches as $match)
                                <li class="flex items-baseline justify-between px-4 py-1.5 text-primary hover:bg-bordeaux">
                                    <span>{{ $match }}</span>
                                    <span class="font-digital text-primary text-2xl">{{ strlen($match) }}</span>
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <p class="text-primary/60 font-mono text-xs px-4 py-3">
                            No words found.
                        </p>
                    @endif
                </section>
            @endisset
        </main>

        <footer class="w-full max-w-2xl mt-12 pt-4 border-t border-bordeaux flex flex-wrap items-center justify-between gap-2 font-mono text-xs uppercase tracking-wider text-primary/40">
            <span>
                {{ config('app.name', 'Anagram Finder') }} {{ config('app.version') }}
                <span class="text-primary/25 px-1">|</span>
                a <a href="https://lvl0.xyz" target="_blank" rel="noopener noreferrer" class="hover:text-primary transition-colors">lvl0</a> project
            </span>

            <a href="https://forge.lvl0.xyz/anagram-finder/web" target="_blank" rel="license noopener noreferrer" class="hover:text-primary transition-colors">
                [SOURCE]
            </a>
        </footer>

        @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
    </body>
</html>
