<form method="POST" action="{{ $formAction }}" class="space-y-5">
    @csrf
    @if (($formMethod ?? 'POST') !== 'POST')
        @method($formMethod)
    @endif

    <div class="grid gap-4 md:grid-cols-2">
        <x-form.input name="name" label="Language name" :value="$language->name" placeholder="French" help="Example: English, Arabic, Urdu, French." />
        <x-form.input name="native_name" label="Native name" :value="$language->native_name" placeholder="Francais" help="Shown in the language dropdown." />
        <x-form.input name="code" label="Language code" :value="$language->code" placeholder="fr" help="Use ISO-style short codes such as en, ar, ur, fr." />
        <x-form.select name="direction" label="Text direction" :value="$language->direction ?? 'ltr'" :options="['ltr' => 'LTR', 'rtl' => 'RTL']" help="Arabic and Urdu use RTL by default." />
        <x-form.input name="flag_icon" label="Flag/icon optional" :value="$language->flag_icon" placeholder="FR" help="Optional short marker for dropdowns." />
        <x-form.select name="is_active" label="Status" :value="$language->exists ? (int) $language->is_active : 1" :options="[1 => 'Active', 0 => 'Inactive']" />
    </div>

    <label class="flex items-center justify-between gap-4 rounded-lg border border-booklio-border bg-slate-50 p-4">
        <span>
            <span class="block text-sm font-extrabold text-booklio-dark">Make default language</span>
            <span class="mt-1 block text-xs font-medium leading-5 text-booklio-muted">Only one language can be default. Default language remains active.</span>
        </span>
        <span class="relative inline-flex shrink-0 cursor-pointer items-center">
            <input name="is_default" value="1" type="checkbox" @checked(old('is_default', $language->is_default)) class="peer sr-only">
            <span class="h-6 w-11 rounded-full bg-slate-300 transition peer-checked:bg-booklio-primary"></span>
            <span class="absolute left-1 h-4 w-4 rounded-full bg-white transition peer-checked:translate-x-5"></span>
        </span>
    </label>

    <div class="flex flex-col gap-3 sm:flex-row sm:justify-end">
        <x-ui.button variant="secondary" href="{{ route('admin.settings.languages.index') }}">Cancel</x-ui.button>
        <x-ui.button type="submit">{{ $submitLabel }}</x-ui.button>
    </div>
</form>
