@php($editing = $language->exists)
<x-admin.layout :title="$editing ? __('Edit language') : __('Add language')">
    <x-admin.page-header :title="$editing ? __('Edit language') : __('Add language')" :back="route('admin.languages.index')" />

    <form method="POST" action="{{ $editing ? route('admin.languages.update', $language) : route('admin.languages.store') }}" class="max-w-3xl">
        @csrf @if ($editing) @method('PUT') @endif
        <x-admin.card>
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <x-admin.input name="name" :label="__('Name')" :value="$language->name" required maxlength="60" :hint="__('In English, e.g. Spanish.')" />
                <x-admin.input name="native_name" :label="__('Native name')" :value="$language->native_name" maxlength="60" :hint="__('As its speakers write it, e.g. Español. Shown in the apps\' language menu.')" />
                <x-admin.input name="code" :label="__('Code')" :value="$language->code" required maxlength="6" :readonly="$language->is_default"
                               :hint="__('ISO code such as es, bn or pt_BR; the apps and the server use it to find the translation.')" />
                <x-admin.select name="direction" :label="__('Text direction')" :options="['ltr' => __('Left to right'), 'rtl' => __('Right to left (Arabic, Hebrew, Urdu...)')]" :value="$language->direction" required />
                <x-admin.input name="flag" :label="__('Flag')" :value="$language->flag" maxlength="16" :hint="__('Optional emoji, e.g. 🇪🇸')" />
                <x-admin.input name="sort_order" type="number" min="0" :label="__('Order in the menu')" :value="$language->sort_order" required />
                <div class="sm:col-span-2">
                    <x-admin.toggle name="is_active" :checked="$language->is_active" :label="__('Offered in the apps')"
                                    :hint="$language->is_default ? __('The default language is always offered.') : null" />
                </div>
            </div>
            <div class="mt-6 flex justify-end gap-2 border-t border-gray-200 pt-5 dark:border-gray-800">
                <x-admin.button variant="secondary" :href="route('admin.languages.index')">{{ __('Cancel') }}</x-admin.button>
                <x-admin.button type="submit" icon="check">{{ $editing ? __('Save changes') : __('Add language') }}</x-admin.button>
            </div>
        </x-admin.card>
    </form>
</x-admin.layout>