@php($defaultLang = ['fr' => 'fr', 'en' => 'en-US', 'es' => 'es', 'de' => 'de-DE', 'ar' => 'ar'][app()->getLocale()] ?? 'auto')
<div data-tool="spell-checker" data-endpoint="/api/spellcheck" data-max="{{ config('platform.languagetool.max_chars') }}">
    <form class="space-y-3" novalidate>
        <div class="flex flex-wrap items-end justify-between gap-3">
            <div>
                <label class="label" for="sc-lang">{{ __('tools.spell_language') }}</label>
                <select id="sc-lang" name="language" class="field w-auto py-2">
                    @foreach (['auto' => __('tools.spell_auto'), 'fr' => 'Français', 'en-US' => 'English (US)', 'en-GB' => 'English (UK)', 'es' => 'Español', 'de-DE' => 'Deutsch', 'it' => 'Italiano', 'pt-PT' => 'Português', 'nl' => 'Nederlands', 'ar' => 'العربية'] as $code => $name)
                        <option value="{{ $code }}" @selected($code === $defaultLang)>{{ $name }}</option>
                    @endforeach
                </select>
            </div>
            <p class="text-xs text-slate-500 tabular-nums" data-count></p>
        </div>
        <label for="sc-text" class="sr-only">{{ __('tools.your_text') }}</label>
        <textarea dir="auto" id="sc-text" name="text" rows="9" class="field font-[inherit] leading-relaxed" placeholder="{{ __('tools.spell_placeholder') }}" spellcheck="false"></textarea>
        <div class="flex flex-wrap gap-2">
            <button type="submit" class="btn-brand" data-check><x-site.icon name="check" class="size-4" /> <span>{{ __('js.check') }}</span></button>
            <button type="button" class="btn-ghost" data-copy>{{ __('tools.copy') }}</button>
            <button type="button" class="btn-ghost" data-clear>{{ __('tools.clear') }}</button>
        </div>
    </form>
    <p class="mt-4 text-sm font-semibold" data-message aria-live="polite"></p>
    <ul class="mt-3 space-y-2" data-issues></ul>
    <p class="mt-4 text-xs text-slate-500">{{ __('tools.spell_privacy') }}</p>
</div>