@php($editing = $faq->exists)
<x-admin.layout :title="$editing ? __('Edit question') : __('New question')">
    <x-admin.page-header :title="$editing ? __('Edit question') : __('New question')" :back="route('admin.cms.faqs.index')" />

    <form method="POST" action="{{ $editing ? route('admin.cms.faqs.update', $faq) : route('admin.cms.faqs.store') }}" class="grid max-w-5xl grid-cols-1 gap-6 lg:grid-cols-3">
        @csrf
        @if ($editing) @method('PUT') @endif

        <div class="space-y-6 lg:col-span-2">
            <x-admin.card :title="__('Question')">
                <div class="space-y-4">
                    <x-admin.input name="question" :label="__('Question')" :value="$faq->question" maxlength="255" required />
                    <x-admin.textarea name="answer" :label="__('Answer')" :value="$faq->answer" rows="5" maxlength="2000" required />
                </div>
            </x-admin.card>

            <x-admin.card :title="__('Translations')">
                <x-admin.translation-fields :fields="['question' => [__('Question'), 'text'], 'answer' => [__('Answer'), 'textarea']]" :values="old('translations', $faq->translations ?? [])" />
            </x-admin.card>
        </div>

        <x-admin.card :title="__('Publishing')" class="self-start">
            <div class="space-y-4">
                <x-admin.input name="category" :label="__('Category')" :value="$faq->category" list="faq-categories" maxlength="50" required
                               :hint="__('Questions with the same category are grouped together.')" />
                <datalist id="faq-categories">
                    @foreach ($categories as $category)<option value="{{ $category }}"></option>@endforeach
                </datalist>
                <x-admin.select name="app" :label="__('Shown in')" :options="$apps" :value="$faq->app" required />
                <x-admin.input name="sort_order" type="number" min="0" max="999" :label="__('Order')" :value="$faq->sort_order" :hint="__('Lower numbers come first.')" />
                <x-admin.toggle name="is_active" :label="__('Published')" :checked="$faq->is_active" />
            </div>
            <div class="mt-5 flex gap-2">
                <x-admin.button type="submit">{{ $editing ? __('Save changes') : __('Add question') }}</x-admin.button>
                <x-admin.button variant="secondary" :href="route('admin.cms.faqs.index')">{{ __('Cancel') }}</x-admin.button>
            </div>
        </x-admin.card>
    </form>
</x-admin.layout>