{{-- One section of the showcase on a page of its own, with the way on to the next. The page's
     heading names the section, so the section's own heading is only for a screen reader
     (`data-md-showcase-sections`'s own rule in resources/css/showcase.css). --}}

@extends('livewire-material::showcase.layout')

@php
    $keys = array_keys($sections);
    $at = array_search($section, $keys, true);
    $previous = $keys[$at - 1] ?? null;
    $next = $keys[$at + 1] ?? null;
@endphp

@section('content')
    <x-livewire-material::pane width="wide" data-md-showcase-page>
        <x-livewire-material::stack gap="space300">
            <x-livewire-material::stack as="header" gap="space50">
                <p class="md-type-label-lg md-ink-variant">{{ $sections[$section]['group'] }}</p>
                <h1 class="md-type-headline-lg">{{ $sections[$section]['title'] }}</h1>
            </x-livewire-material::stack>

            <x-livewire-material::stack gap="space800" data-md-showcase-sections>
                @include('livewire-material::showcase.sections.'.$section)

                <x-livewire-material::stack gap="space300">
                    <x-livewire-material::divider decorative />

                    <x-livewire-material::row as="nav" aria-label="Sections" justify="between" wrap gap="space200">
                        @if ($previous)
                            <x-livewire-material::button variant="text" icon="arrow_back" :label="$sections[$previous]['title']" :link="route('livewire-material.section', $previous)" data-test="previous-section" />
                        @else
                            <x-livewire-material::button variant="text" icon="arrow_back" label="Overview" :link="route('livewire-material.showcase')" data-test="previous-section" />
                        @endif

                        @if ($next)
                            <x-livewire-material::button variant="tonal" icon-right="arrow_forward" :label="$sections[$next]['title']" :link="route('livewire-material.section', $next)" data-test="next-section" />
                        @endif
                    </x-livewire-material::row>
                </x-livewire-material::stack>
            </x-livewire-material::stack>
        </x-livewire-material::stack>
    </x-livewire-material::pane>
@endsection