@extends('layouts.admin', ['title' => 'Add Language', 'pageTitle' => 'Add Language', 'active' => 'settings'])

@php($activeTab = $activeTab ?? 'languages')

@section('content')
    <div class="space-y-5">
        <div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
            <p class="text-sm font-medium leading-6 text-booklio-muted">Add a new language for the dashboard, reminders, invoices, auth screens, and public booking pages.</p>
            <x-ui.button variant="secondary" href="{{ route('admin.settings.languages.index') }}">Back to Languages</x-ui.button>
        </div>

        <section class="grid gap-5 xl:grid-cols-[300px_minmax(0,1fr)]">
            @include('admin.settings.partials.nav', ['activeTab' => $activeTab])

            <div class="grid gap-5 lg:grid-cols-[minmax(0,1fr)_340px]">
                <x-ui.card title="Add Language" description="Translations are seeded from the default catalog so the language is ready to edit immediately.">
                    @include('admin.settings.languages.partials.form')
                </x-ui.card>

                <x-ui.card title="Layout Preview" description="Choose RTL for Arabic, Urdu, or any custom right-to-left language.">
                    <div dir="rtl" class="rounded-lg border border-booklio-border bg-slate-50 p-4 text-right">
                        <p class="text-sm font-extrabold text-booklio-dark">معاينة اللغة</p>
                        <p class="mt-1 text-xs leading-5 text-booklio-muted">القائمة والجداول والنماذج والقوائم المنسدلة تنتقل إلى اليمين عند تفعيل RTL.</p>
                        <div class="mt-4 space-y-2">
                            <div class="mr-auto h-3 w-4/5 rounded bg-slate-300"></div>
                            <div class="mr-auto h-3 w-2/3 rounded bg-slate-200"></div>
                            <div class="h-9 rounded-lg bg-booklio-primary"></div>
                        </div>
                    </div>
                </x-ui.card>
            </div>
        </section>
    </div>
@endsection