<!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">
        <link rel="manifest" href="/site.webmanifest">
        <meta name="theme-color" content="#000000">

        @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-3xl sm:text-5xl lg:text-6xl font-bold uppercase tracking-wider lg:tracking-widest glow-red-text mb-6 lg:mb-8">
                &gt; Anagram Finder
            </h1>

            <x-anagram-form :anagram="$anagram ?? null" :has-results="isset($matches)" />

            @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-auto pt-4 -mb-6 lg:-mb-8 pb-4 border-t border-bordeaux text-center font-mono text-[0.65rem] sm:text-xs uppercase tracking-wider text-primary/40">
            <span>
                <a href="https://forge.lvl0.xyz/anagram-finder/web" target="_blank" rel="license noopener noreferrer" class="hover:text-primary transition-colors">{{ config('app.name', 'Anagram Finder') }}</a>
                {{ 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>
        </footer>

    </body>
</html>
