{{-- resources/views/documents/index.blade.php --}}

@php
    $vehicle = app(\App\Support\VehicleContext::class)->current();

    $title = ($vehicle?->call_sign ?? 'RTW') . ' – Dokumente';
    $pageTitle = 'Dokumente';
    $pageSubtitle = $vehicle
        ? trim(
            ($vehicle->call_sign ?? '') .
                ' • ' .
                ($vehicle->license_plate ?? '') .
                ' • Dokumentenablage nach Kategorien',
        )
        : 'Dokumentenablage nach Kategorien';

    $q = $filters['q'] ?? '';
    $categoryId = $filters['category_id'] ?? null;

    // Counts für Sidebar (inkl. "Alle")
    $categoryCounts = [];
    foreach ($categories as $c) {
        $categoryCounts[$c->id] = 0;
    }
    foreach ($documents as $doc) {
        if ($doc->document_category_id) {
            $categoryCounts[$doc->document_category_id] = ($categoryCounts[$doc->document_category_id] ?? 0) + 1;
        }
    }
    $allCount = (int) ($documents->total() ?? $documents->count());
@endphp

<x-ux-layout :title="$title" :pageTitle="$pageTitle" :pageSubtitle="$pageSubtitle">
    <div x-data="{ uploadOpen: false, catOpen: false, filtersOpen: false }" class="grid grid-cols-12 gap-6">

        {{-- Flash --}}
        @if (session('status'))
            <div
                class="col-span-12 rounded-2xl border border-emerald-200 bg-emerald-50 px-5 py-4 text-sm text-emerald-800">
                {{ session('status') }}
            </div>
        @endif

        {{-- Mobile: Kategorien & Filter Button --}}
        <div class="col-span-12 lg:hidden">
            <button type="button"
                class="w-full rounded-2xl border border-gray-200 bg-white px-4 py-3 text-sm font-semibold hover:bg-gray-50 flex items-center justify-between"
                @click="filtersOpen = true">
                <span>Kategorien & Filter</span>
                <svg class="h-5 w-5 text-gray-600" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="2">
                    <path d="M4 6h16M7 12h10M10 18h4" />
                </svg>
            </button>
        </div>

        {{-- Desktop Sidebar --}}
        <aside class="hidden lg:block lg:col-span-3">
            @include('documents.partials._categories', [
                'categories' => $categories,
                'categoryId' => $categoryId,
                'allCount' => $allCount,
                'categoryCounts' => $categoryCounts,
            ])
        </aside>

        {{-- Mobile Offcanvas Sidebar --}}
        <div x-show="filtersOpen" x-transition.opacity class="fixed inset-0 z-40 lg:hidden" aria-hidden="true">
            <div class="absolute inset-0 bg-gray-900/50" @click="filtersOpen=false"></div>

            <div x-show="filtersOpen" x-transition
                class="absolute inset-y-0 left-0 w-[88vw] max-w-sm bg-white shadow-xl ring-1 ring-black/5">
                <div class="flex items-center justify-between border-b border-gray-200 px-5 py-4">
                    <div class="text-base font-semibold">Kategorien</div>
                    <button type="button"
                        class="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-gray-200 bg-white hover:bg-gray-50"
                        @click="filtersOpen=false" aria-label="Schließen">
                        <svg class="h-5 w-5 text-gray-700" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2">
                            <path d="M6 6l12 12M18 6l-12 12" />
                        </svg>
                    </button>
                </div>

                <div class="p-5 overflow-y-auto h-[calc(100vh-73px)]">
                    @include('documents.partials._categories', [
                        'categories' => $categories,
                        'categoryId' => $categoryId,
                        'allCount' => $allCount,
                        'categoryCounts' => $categoryCounts,
                    ])
                </div>
            </div>
        </div>

        {{-- Right: Liste --}}
        <section class="col-span-12 lg:col-span-9 space-y-6">

            {{-- Toolbar --}}
            <div class="rounded-2xl border border-gray-200 bg-white p-5">
                <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                    <form method="GET" action="{{ route('documents.index') }}"
                        class="flex flex-col gap-3 lg:flex-row lg:items-center w-full">
                        <label class="relative w-full lg:w-[420px]">
                            <span
                                class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2">
                                    <path d="M21 21l-4.3-4.3" />
                                    <circle cx="11" cy="11" r="7" />
                                </svg>
                            </span>

                            <input name="q" value="{{ $q }}" type="text"
                                placeholder="Dokumente suchen (Name, Kategorie)…"
                                class="w-full rounded-xl border-gray-200 bg-gray-50 pl-9 pr-3 py-2.5 text-sm focus:border-brand focus:ring-brand"
                                onchange="this.form.submit()">
                        </label>

                        {{-- selected category bleibt erhalten --}}
                        @if (!empty($categoryId))
                            <input type="hidden" name="category_id" value="{{ (int) $categoryId }}">
                        @endif
                    </form>

                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:flex lg:items-center gap-2 w-full lg:w-auto">
                        <button
                            class="w-full rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50"
                            type="button">
                            Export
                        </button>

                        @can('create', \App\Models\Document::class)
                            <button
                                class="w-full rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600"
                                type="button" @click="uploadOpen = true">
                                Dokument hochladen
                            </button>
                        @else
                            <button class="w-full rounded-xl bg-gray-200 px-4 py-2.5 text-sm font-semibold text-gray-600"
                                disabled>
                                Dokument hochladen
                            </button>
                        @endcan
                    </div>
                </div>
            </div>

            {{-- Table/Card Wrapper --}}
            <div class="rounded-2xl border border-gray-200 bg-white p-0 overflow-hidden">
                <div class="flex items-center justify-between px-5 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-semibold">Dokumente</h2>
                    <div class="text-sm text-gray-500">
                        Anzeige:
                        <span class="font-semibold text-gray-700">
                            {{ empty($categoryId) ? 'Alle' : $categories->firstWhere('id', (int) $categoryId)?->name ?? 'Kategorie' }}
                        </span>
                    </div>
                </div>

                {{-- Mobile Cards --}}
                <div class="lg:hidden divide-y divide-gray-200">
                    @forelse($documents as $doc)
                        @php
                            $docDate =
                                $doc->uploaded_at?->format('d.m.Y') ?? ($doc->created_at?->format('d.m.Y') ?? '—');
                            $uploaded =
                                $doc->uploaded_at?->format('d.m.Y') ?? ($doc->created_at?->format('d.m.Y') ?? '—');
                            $uploader = $doc->uploader?->name ?? 'System';

                            $dl = \Illuminate\Support\Facades\URL::signedRoute('documents.download', [
                                'document' => $doc->id,
                                'download' => 1,
                            ]);
                            $pv = \Illuminate\Support\Facades\URL::signedRoute('documents.download', [
                                'document' => $doc->id,
                            ]);
                        @endphp

                        <div class="px-5 py-4">
                            <div class="flex items-start gap-3">
                                <div
                                    class="mt-0.5 h-10 w-10 rounded-xl bg-gray-100 ring-1 ring-gray-200 flex items-center justify-center shrink-0">
                                    <svg class="h-4 w-4 text-gray-600" viewBox="0 0 24 24" fill="none"
                                        stroke="currentColor" stroke-width="2">
                                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                                        <path d="M14 2v6h6" />
                                    </svg>
                                </div>

                                <div class="min-w-0 flex-1">
                                    <div class="font-semibold truncate">{{ $doc->original_name }}</div>
                                    <div class="mt-1 text-xs text-gray-500 truncate">{{ $doc->title }}</div>

                                    <div class="mt-3 grid grid-cols-2 gap-2 text-xs">
                                        <div class="rounded-xl bg-gray-50 border border-gray-200 px-3 py-2">
                                            <div class="text-gray-500">Kategorie</div>
                                            <div class="font-semibold text-gray-800 truncate">
                                                {{ $doc->category?->name ?? '—' }}</div>
                                        </div>
                                        <div class="rounded-xl bg-gray-50 border border-gray-200 px-3 py-2">
                                            <div class="text-gray-500">Upload</div>
                                            <div class="font-semibold text-gray-800">{{ $uploaded }}</div>
                                        </div>
                                        <div class="rounded-xl bg-gray-50 border border-gray-200 px-3 py-2">
                                            <div class="text-gray-500">Dok.-Datum</div>
                                            <div class="font-semibold text-gray-800">{{ $docDate }}</div>
                                        </div>
                                        <div class="rounded-xl bg-gray-50 border border-gray-200 px-3 py-2">
                                            <div class="text-gray-500">Von</div>
                                            <div class="font-semibold text-gray-800 truncate">{{ $uploader }}</div>
                                        </div>
                                    </div>

                                    <div class="mt-4 flex flex-wrap gap-2">
                                        <a href="{{ $pv }}"
                                            class="rounded-xl border border-gray-200 bg-white px-3 py-2 text-xs font-semibold hover:bg-gray-50">
                                            Vorschau
                                        </a>
                                        <a href="{{ $dl }}"
                                            class="rounded-xl border border-gray-200 bg-white px-3 py-2 text-xs font-semibold hover:bg-gray-50">
                                            Download
                                        </a>

                                        @can('delete', $doc)
                                            <form method="POST" action="{{ route('documents.destroy', $doc) }}"
                                                onsubmit="return confirm('Dokument wirklich löschen?')">
                                                @csrf
                                                @method('DELETE')
                                                <button
                                                    class="rounded-xl bg-brand px-3 py-2 text-xs font-semibold text-white hover:bg-brand-600">
                                                    Löschen
                                                </button>
                                            </form>
                                        @endcan
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="px-5 py-10 text-sm text-gray-600">
                            Keine Dokumente vorhanden.
                        </div>
                    @endforelse
                </div>

                {{-- Desktop Table --}}
                <table class="hidden lg:table w-full text-sm">
                    <thead class="bg-gray-50 text-gray-600">
                        <tr>
                            <th class="px-5 py-3 text-left font-semibold">Dokument</th>
                            <th class="px-5 py-3 text-left font-semibold">Kategorie</th>
                            <th class="px-5 py-3 text-left font-semibold">Dokumentdatum</th>
                            <th class="px-5 py-3 text-left font-semibold">Upload</th>
                            <th class="px-5 py-3 text-left font-semibold">Von</th>
                            <th class="px-5 py-3 text-right font-semibold"></th>
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-gray-200">
                        @forelse($documents as $doc)
                            @php
                                $docDate =
                                    $doc->uploaded_at?->format('d.m.Y') ?? ($doc->created_at?->format('d.m.Y') ?? '—');
                                $uploaded =
                                    $doc->uploaded_at?->format('d.m.Y') ?? ($doc->created_at?->format('d.m.Y') ?? '—');
                                $uploader = $doc->uploader?->name ?? 'System';

                                $dl = \Illuminate\Support\Facades\URL::signedRoute('documents.download', [
                                    'document' => $doc->id,
                                    'download' => 1,
                                ]);
                                $pv = \Illuminate\Support\Facades\URL::signedRoute('documents.download', [
                                    'document' => $doc->id,
                                ]);
                            @endphp

                            <tr class="bg-white">
                                <td class="px-5 py-4">
                                    <div class="flex items-start gap-3">
                                        <div
                                            class="mt-0.5 h-9 w-9 rounded-xl bg-gray-100 ring-1 ring-gray-200 flex items-center justify-center">
                                            <svg class="h-4 w-4 text-gray-600" viewBox="0 0 24 24" fill="none"
                                                stroke="currentColor" stroke-width="2">
                                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                                                <path d="M14 2v6h6" />
                                            </svg>
                                        </div>

                                        <div class="min-w-0">
                                            <div class="font-semibold truncate">{{ $doc->original_name }}</div>
                                            <div class="mt-1 text-xs text-gray-500 truncate">{{ $doc->title }}</div>
                                        </div>
                                    </div>
                                </td>

                                <td class="px-5 py-4">{{ $doc->category?->name ?? '—' }}</td>
                                <td class="px-5 py-4">{{ $docDate }}</td>
                                <td class="px-5 py-4">{{ $uploaded }}</td>
                                <td class="px-5 py-4">{{ $uploader }}</td>

                                <td class="px-5 py-4 text-right">
                                    <div class="inline-flex items-center gap-2">
                                        <a href="{{ $pv }}"
                                            class="rounded-xl border border-gray-200 bg-white px-3 py-2 text-xs font-semibold hover:bg-gray-50">
                                            Vorschau
                                        </a>
                                        <a href="{{ $dl }}"
                                            class="rounded-xl border border-gray-200 bg-white px-3 py-2 text-xs font-semibold hover:bg-gray-50">
                                            Download
                                        </a>

                                        @can('delete', $doc)
                                            <form method="POST" action="{{ route('documents.destroy', $doc) }}"
                                                onsubmit="return confirm('Dokument wirklich löschen?')">
                                                @csrf
                                                @method('DELETE')
                                                <button
                                                    class="rounded-xl bg-brand px-3 py-2 text-xs font-semibold text-white hover:bg-brand-600">
                                                    Löschen
                                                </button>
                                            </form>
                                        @endcan
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr class="bg-white">
                                <td colspan="6" class="px-5 py-10 text-sm text-gray-600">
                                    Keine Dokumente vorhanden.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>

                {{-- Pagination --}}
                <div class="px-5 py-4 border-t border-gray-200 overflow-x-auto">
                    {{ $documents->links() }}
                </div>
            </div>

        </section>

        {{-- Upload Modal (produktive Form) --}}
        <div x-show="uploadOpen" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center"
            aria-hidden="true">
            <div class="absolute inset-0 bg-gray-900/50" @click="uploadOpen = false"></div>

            <div x-show="uploadOpen" x-transition
                class="relative w-full h-[100vh] sm:h-auto sm:max-w-2xl sm:rounded-2xl bg-white shadow-xl ring-1 ring-black/5 overflow-hidden"
                role="dialog" aria-modal="true">
                <div class="flex items-center justify-between border-b border-gray-200 px-6 py-4">
                    <div>
                        <div class="text-lg font-semibold">Dokument hochladen</div>
                        <div class="text-sm text-gray-600">
                            {{ $vehicle?->call_sign ?? 'RTW' }} • {{ $vehicle?->license_plate ?? '' }}
                        </div>
                    </div>

                    <button
                        class="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-gray-200 bg-white hover:bg-gray-50"
                        @click="uploadOpen = false" aria-label="Schließen" type="button">
                        <svg class="h-5 w-5 text-gray-700" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2">
                            <path d="M6 6l12 12M18 6l-12 12" />
                        </svg>
                    </button>
                </div>

                <div class="px-6 py-5 max-h-[calc(100vh-72px)] overflow-y-auto">
                    <form method="POST" action="{{ route('documents.store') }}" enctype="multipart/form-data"
                        class="space-y-4">
                        @csrf

                        <div class="md:col-span-2">
                            <label class="text-sm font-semibold">Datei</label>
                            <input name="file" type="file" required
                                accept="application/pdf,image/jpeg,image/png"
                                class="mt-2 w-full rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand">
                            @error('file')
                                <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                            @enderror
                            <div class="mt-1 text-xs text-gray-500">PDF/JPG/PNG • max. 25 MB</div>
                        </div>

                        <div>
                            <label class="text-sm font-semibold">Titel</label>
                            <input name="title" type="text" maxlength="190" required
                                value="{{ old('title') }}" placeholder="z. B. Versicherungspolice 2024"
                                class="mt-2 w-full rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand">
                            @error('title')
                                <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="text-sm font-semibold">Kategorie</label>
                                <select name="document_category_id"
                                    class="mt-2 w-full rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand">
                                    <option value="">— Keine —</option>
                                    @foreach ($categories as $c)
                                        <option value="{{ $c->id }}"
                                            {{ (int) old('document_category_id') === (int) $c->id ? 'selected' : '' }}>
                                            {{ $c->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('document_category_id')
                                    <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                                @enderror
                            </div>

                            <div>
                                <label class="text-sm font-semibold">Dokumentdatum</label>
                                <input type="date" disabled
                                    class="mt-2 w-full rounded-xl border-gray-200 bg-gray-50 py-2.5 text-sm text-gray-400">
                                <div class="mt-1 text-xs text-gray-500">Optional kommt später als Feld ins Model.</div>
                            </div>
                        </div>

                        <div class="flex items-center justify-between gap-3 border-t border-gray-200 pt-4">
                            <button type="button"
                                class="rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50"
                                @click="uploadOpen = false">
                                Abbrechen
                            </button>

                            <button type="submit"
                                class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600">
                                Hochladen
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Kategorien Modal (produktive Verwaltung) --}}
        <div x-show="catOpen" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center"
            aria-hidden="true">
            <div class="absolute inset-0 bg-gray-900/50" @click="catOpen = false"></div>

            <div x-show="catOpen" x-transition
                class="relative w-full h-[100vh] sm:h-auto sm:max-w-2xl sm:rounded-2xl bg-white shadow-xl ring-1 ring-black/5 overflow-hidden"
                role="dialog" aria-modal="true">
                <div class="flex items-center justify-between border-b border-gray-200 px-6 py-4">
                    <div>
                        <div class="text-lg font-semibold">Kategorien verwalten</div>
                        <div class="text-sm text-gray-600">
                            Dokument-Kategorien für {{ $vehicle?->call_sign ?? 'RTW' }}
                        </div>
                    </div>

                    <button
                        class="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-gray-200 bg-white hover:bg-gray-50"
                        @click="catOpen = false" aria-label="Schließen" type="button">
                        <svg class="h-5 w-5 text-gray-700" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2">
                            <path d="M6 6l12 12M18 6l-12 12" />
                        </svg>
                    </button>
                </div>

                <div class="px-6 py-5 max-h-[calc(100vh-72px)] overflow-y-auto space-y-5">
                    <div class="rounded-2xl border border-gray-200 bg-gray-50 p-4">
                        <div class="text-sm font-semibold">Hinweis</div>
                        <div class="mt-1 text-sm text-gray-600">
                            Sortierung per Drag & Drop kommt später. Hier: anlegen, umbenennen, löschen.
                        </div>
                    </div>

                    @can('manage', \App\Models\DocumentCategory::class)
                        <form method="POST" action="{{ route('document-categories.store') }}"
                            class="rounded-2xl border border-gray-200 bg-white p-4">
                            @csrf
                            <div class="text-sm font-semibold">Neue Kategorie</div>
                            <div class="mt-3 flex flex-col gap-3 md:flex-row md:items-center">
                                <input name="name" type="text" maxlength="190" required
                                    placeholder="z. B. Geräte / Funk / Hygiene"
                                    class="w-full rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand" />
                                <input name="sort_order" type="number" min="0" max="9999" value="0"
                                    class="w-full md:w-32 rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand" />
                                <button type="submit"
                                    class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600">
                                    Hinzufügen
                                </button>
                            </div>
                        </form>
                    @endcan

                    <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white">
                        <div class="px-4 py-3 bg-gray-50 text-sm font-semibold text-gray-700 border-b border-gray-200">
                            Vorhandene Kategorien
                        </div>

                        <div class="divide-y divide-gray-200">
                            @forelse ($categories as $c)
                                <div
                                    class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 px-4 py-3">
                                    <div class="min-w-0">
                                        <div class="flex items-center gap-2">
                                            <span class="h-2.5 w-2.5 rounded-full bg-brand/60"></span>
                                            <div class="font-semibold truncate">{{ $c->name }}</div>
                                        </div>
                                        <div class="text-xs text-gray-500 mt-1">
                                            Anzahl: {{ (int) ($categoryCounts[$c->id] ?? 0) }}
                                        </div>
                                    </div>

                                    <div class="flex items-center gap-2 flex-wrap">
                                        @can('manage', \App\Models\DocumentCategory::class)
                                            <form method="POST" action="{{ route('document-categories.update', $c) }}"
                                                class="inline-flex items-center gap-2 flex-wrap">
                                                @csrf
                                                @method('PUT')
                                                <input name="name" value="{{ $c->name }}" maxlength="190"
                                                    required
                                                    class="w-full md:w-48 rounded-xl border-gray-200 bg-white py-2 text-xs focus:border-brand focus:ring-brand" />
                                                <input name="sort_order" type="number" min="0" max="9999"
                                                    value="{{ (int) $c->sort_order }}"
                                                    class="w-full md:w-24 rounded-xl border-gray-200 bg-white py-2 text-xs focus:border-brand focus:ring-brand" />
                                                <button
                                                    class="w-full md:w-auto rounded-xl border border-gray-200 bg-white px-3 py-2 text-xs font-semibold hover:bg-gray-50">
                                                    Umbenennen
                                                </button>
                                            </form>

                                            <form method="POST" action="{{ route('document-categories.destroy', $c) }}"
                                                onsubmit="return confirm('Kategorie nur löschen, wenn sie leer ist. Fortfahren?')">
                                                @csrf
                                                @method('DELETE')
                                                <button
                                                    class="w-full md:w-auto rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-xs font-semibold text-red-700 hover:bg-red-100">
                                                    Löschen
                                                </button>
                                            </form>
                                        @else
                                            <span class="text-xs text-gray-400">—</span>
                                        @endcan
                                    </div>
                                </div>
                            @empty
                                <div class="px-4 py-8 text-sm text-gray-600">Keine Kategorien.</div>
                            @endforelse
                        </div>
                    </div>
                </div>

                <div class="flex items-center justify-end gap-3 border-t border-gray-200 px-6 py-4">
                    <button
                        class="rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50"
                        @click="catOpen = false" type="button">
                        Schließen
                    </button>
                </div>
            </div>
        </div>

    </div>
</x-ux-layout>