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

@section('content')
    <x-livewire-material::pane width="wide" data-md-showcase-page>
        <x-livewire-material::stack gap="space600">
            <x-livewire-material::stack gap="space150">
                <h1 class="md-type-headline-lg">Livewire Material</h1>
                <p class="md-type-title-lg">Material 3 Expressive for Laravel and Livewire.</p>
                <p class="md-type-body-lg md-ink-variant">
                    Every token and component, rendered in this application's own scheme and theme. Pick a section in the
                    navigation, search for one above (or press <kbd class="md-type-label-md" data-md-showcase-kbd>/</kbd>), or start below.
                </p>
            </x-livewire-material::stack>

            @foreach (collect($sections)->groupBy('group', preserveKeys: true) as $group => $entries)
                <x-livewire-material::stack as="section" gap="space200" :aria-labelledby="'group-'.\Illuminate\Support\Str::slug($group)">
                    <h2 id="group-{{ \Illuminate\Support\Str::slug($group) }}" class="md-type-title-lg">{{ $group }}</h2>

                    <x-livewire-material::grid :columns="['compact' => 1, 'medium' => 2, 'expanded' => 3]" gap="space200">
                        @foreach ($entries as $key => $entry)
                            <x-livewire-material::card variant="outlined" data-md-list-row wire:key="section-{{ $key }}">
                                <x-livewire-material::row gap="space200" align="start">
                                    <span data-md-showcase-section-icon>
                                        <x-livewire-material::icon :name="$entry['icon']" />
                                    </span>
                                    <x-livewire-material::stack gap="space50">
                                        <a href="{{ route('livewire-material.section', $key) }}" wire:navigate data-md-list-open class="md-type-title-md">{{ $entry['title'] }}</a>
                                        <p class="md-type-body-md md-ink-variant">{{ $entry['description'] }}</p>
                                    </x-livewire-material::stack>
                                </x-livewire-material::row>
                            </x-livewire-material::card>
                        @endforeach
                    </x-livewire-material::grid>
                </x-livewire-material::stack>
            @endforeach
        </x-livewire-material::stack>
    </x-livewire-material::pane>
@endsection