{{-- Текст і переклад поруч: на широкому екрані — дві колонки з окремим прокручуванням, на вузькому — вкладки --}}
{{-- Слот text — оригінал зі словами, основний слот — переклад. pane — вкладка, відкрита на телефоні --}}
@props(['title', 'pane' => 'text'])

<div class="flex flex-col gap-4 lg:h-[calc(100dvh-4rem)]" x-data="{ pane: @js($pane) }">
    <x-page-header :title="$title" class="shrink-0">
        @isset($actions)
            <x-slot:actions>{{ $actions }}</x-slot:actions>
        @endisset
    </x-page-header>

    @if (session('status'))
        <flux:callout variant="success" icon="check-circle" class="shrink-0">{{ session('status') }}</flux:callout>
    @endif

    <div role="tablist" aria-label="Текст або переклад" class="grid shrink-0 grid-cols-2 gap-1 rounded-lg bg-zinc-100 p-1 lg:hidden dark:bg-zinc-900">
        <button type="button" role="tab" id="split-tab-text" aria-controls="split-pane-text" :aria-selected="pane === 'text'" x-on:click="pane = 'text'"
            class="h-11 cursor-pointer rounded-md text-sm font-medium text-zinc-600 aria-selected:bg-white aria-selected:text-zinc-900 aria-selected:shadow-xs dark:text-zinc-300 dark:aria-selected:bg-zinc-700 dark:aria-selected:text-white">Текст і слова</button>
        <button type="button" role="tab" id="split-tab-translation" aria-controls="split-pane-translation" :aria-selected="pane === 'translation'" x-on:click="pane = 'translation'"
            class="h-11 cursor-pointer rounded-md text-sm font-medium text-zinc-600 aria-selected:bg-white aria-selected:text-zinc-900 aria-selected:shadow-xs dark:text-zinc-300 dark:aria-selected:bg-zinc-700 dark:aria-selected:text-white">Переклад</button>
    </div>

    <div class="grid min-h-0 flex-1 gap-4 lg:grid-cols-2 lg:grid-rows-[minmax(0,1fr)]">
        <section id="split-pane-text" role="tabpanel" aria-label="Текст" :class="pane === 'text' || 'max-lg:hidden'"
            class="min-h-0 space-y-4 rounded-xl border border-zinc-200 p-4 lg:overflow-y-auto dark:border-zinc-700">
            {{ $text }}
        </section>

        <section id="split-pane-translation" role="tabpanel" aria-label="Переклад" :class="pane === 'translation' || 'max-lg:hidden'"
            class="min-h-0 rounded-xl border border-zinc-200 p-4 lg:overflow-y-auto dark:border-zinc-700">
            {{ $slot }}
        </section>
    </div>
</div>