{{-- 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. --}}

@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')
    <div class="mx-auto w-full max-w-6xl pt-4 pb-16">
        <header class="mb-6 space-y-1">
            <p class="type-label-lg text-on-surface-variant">{{ $sections[$section]['group'] }}</p>
            <h1 class="type-headline-lg">{{ $sections[$section]['title'] }}</h1>
        </header>

        <div class="space-y-16 [&>section>h2]:sr-only">
            @include('livewire-material::showcase.sections.'.$section)

            <nav aria-label="Sections" class="flex flex-wrap items-center justify-between gap-4 border-t border-divider pt-6">
                @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
            </nav>
        </div>
    </div>
@endsection