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

@section('content')
    <div class="mx-auto w-full max-w-6xl space-y-12 px-4 pt-4 pb-16 sm:px-6">
        <div class="max-w-3xl space-y-3">
            <h1 class="type-headline-lg">Livewire Material</h1>
            <p class="type-title-lg">Material 3 Expressive for Laravel and Livewire.</p>
            <p class="type-body-lg text-on-surface-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="rounded-corner-xs bg-surface-container-highest px-1.5 type-label-md">/</kbd>), or start below.
            </p>
        </div>

        @foreach (collect($sections)->groupBy('group', preserveKeys: true) as $group => $entries)
            <section class="space-y-4" aria-labelledby="group-{{ \Illuminate\Support\Str::slug($group) }}">
                <h2 id="group-{{ \Illuminate\Support\Str::slug($group) }}" class="type-title-lg">{{ $group }}</h2>

                <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach ($entries as $key => $entry)
                        <x-livewire-material::card variant="outlined" data-list-row wire:key="section-{{ $key }}">
                            <div class="flex items-start gap-4">
                                <span class="grid size-12 shrink-0 place-items-center rounded-corner-lg bg-secondary-container text-on-secondary-container">
                                    <x-livewire-material::icon :name="$entry['icon']" />
                                </span>
                                <div class="min-w-0">
                                    <a href="{{ route('livewire-material.section', $key) }}" wire:navigate data-list-open class="type-title-md">{{ $entry['title'] }}</a>
                                    <p class="mt-1 type-body-md text-on-surface-variant">{{ $entry['description'] }}</p>
                                </div>
                            </div>
                        </x-livewire-material::card>
                    @endforeach
                </div>
            </section>
        @endforeach
    </div>
@endsection