{{-- One section of the showcase on a page of its own, with the way on to the next. The section's
     own heading repeats the app bar's title, so only a screen reader hears it. --}}

@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 space-y-16 px-4 pt-2 pb-16 sm:px-6 [&>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>
@endsection