@php
    $groups = [
        'Primary' => ['primary', 'on-primary', 'primary-container', 'on-primary-container', 'inverse-primary', 'primary-fixed', 'primary-fixed-dim', 'on-primary-fixed', 'on-primary-fixed-variant'],
        'Secondary' => ['secondary', 'on-secondary', 'secondary-container', 'on-secondary-container', 'secondary-fixed', 'secondary-fixed-dim', 'on-secondary-fixed', 'on-secondary-fixed-variant'],
        'Tertiary' => ['tertiary', 'on-tertiary', 'tertiary-container', 'on-tertiary-container', 'tertiary-fixed', 'tertiary-fixed-dim', 'on-tertiary-fixed', 'on-tertiary-fixed-variant'],
        'Error' => ['error', 'on-error', 'error-container', 'on-error-container', 'inverse-error'],
        'Success' => ['success', 'on-success', 'success-container', 'on-success-container', 'inverse-success'],
        'Warning' => ['warning', 'on-warning', 'warning-container', 'on-warning-container', 'inverse-warning'],
        'Info' => ['info', 'on-info', 'info-container', 'on-info-container', 'inverse-info'],
        'Surface' => ['surface', 'surface-dim', 'surface-bright', 'surface-container-lowest', 'surface-container-low', 'surface-container', 'surface-container-high', 'surface-container-highest', 'on-surface', 'on-surface-variant', 'inverse-surface', 'inverse-on-surface', 'outline', 'outline-variant'],
    ];

    // The roles a contrast level moves most: the page keeps its surface, the ink and the
    // outlines carry the level.
    $levels = ['standard' => 'Standard', 'medium' => 'Medium · 3:1', 'high' => 'High · 7:1'];
    $levelRoles = ['primary', 'on-primary', 'primary-container', 'on-primary-container', 'on-surface-variant', 'outline', 'error', 'success', 'warning', 'info'];
    $profile = \NoNameWeb\LivewireMaterial\Support\Scheme::profile();

    $examples = [
        'Colour profiles' => <<<'BLADE'
            <div x-data="{ profile: $store.theme.scheme }">
                <x-scheme-picker label="Colour profile" name="profile" x-model="profile" hint="Previews on this page; an application stores the choice and names it with Scheme::resolveProfileUsing()." />
            </div>
            BLADE,
        'Contrast level' => <<<'BLADE'
            <x-theme-toggle mode="contrast" />
            BLADE,
    ];
@endphp

<x-livewire-material::stack as="section" id="colour" gap="space300">
    <h2 class="md-type-headline-md">Colour</h2>

    <p class="md-type-body-md md-ink-variant">
        Every role as a <code>--md-sys-color-*</code> token, generated by
        <code>php artisan material:scheme</code>. Both themes side by side, whatever the page is showing.
    </p>

    <p class="md-type-body-md md-ink-variant" data-test="when-to-use">
        When to use which: <code>primary</code> is the one key action on a screen; <code>secondary-container</code> is the quiet fill (tonal buttons, selected navigation and chips); <code>tertiary</code> is a rare accent; <code>error</code>, <code>success</code>, <code>warning</code> and <code>info</code> mean state — the <code>-container</code> for a tinted panel, the role itself for its text and icon. Pair a role only with its <code>on-</code> partner. Ink is <code>on-surface</code>, lower emphasis <code>on-surface-variant</code>, decoration <code>outline</code>; never an opacity, because 38% means disabled. Every role changes with the contrast level below, which is why only roles are allowed.
    </p>

    <p class="md-type-body-md md-ink-variant">
        With colour profiles in <code>livewire-material.profiles</code>, the command generates each one under
        <code>&lt;html data-scheme&gt;</code>, and <code>&lt;x-scheme-picker&gt;</code> chooses between them. Without
        profiles the picker draws nothing.
    </p>

    <p class="md-type-body-md md-ink-variant">
        Every scheme is generated at M3's three contrast levels — standard, medium (3:1) and high (7:1) — and the
        head script writes the visitor's to <code>&lt;html data-contrast&gt;</code>, following the operating system
        until they choose. The page keeps its surface; the ink, the outlines and the containers carry the level.
    </p>

    @foreach ($examples as $title => $code)
        <x-showcase::example :$title :$code />
    @endforeach

    <x-livewire-material::grid :columns="['compact' => 1, 'large' => 3]" gap="space200">
        @foreach ($levels as $level => $title)
            {{-- data-scheme beside data-contrast: a profile's level blocks key on both attributes
                 together, as they do on <html>. --}}
            <x-livewire-material::stack
                :data-scheme="$profile"
                :data-contrast="$level !== 'standard' ? $level : null"
                gap="space150"
            >
                <h3 class="md-type-title-sm md-ink-variant">{{ $title }}</h3>

                @foreach (['light', 'dark'] as $theme)
                    <x-livewire-material::surface data-theme="{{ $theme }}" level="surface" padding="space200" corner="lg">
                        <x-livewire-material::stack gap="space100">
                            <h4 class="md-type-label-md md-ink-variant">{{ ucfirst($theme) }}</h4>

                            @foreach ($levelRoles as $role)
                                <x-livewire-material::row gap="space100" align="center">
                                    <span data-md-showcase-swatch="{{ $role }}" style="background: var(--md-sys-color-{{ $role }})"></span>
                                    <span class="md-type-body-sm md-truncate" data-md-showcase-swatch-label>{{ $role }}</span>
                                </x-livewire-material::row>
                            @endforeach
                        </x-livewire-material::stack>
                    </x-livewire-material::surface>
                @endforeach
            </x-livewire-material::stack>
        @endforeach
    </x-livewire-material::grid>

    <x-livewire-material::grid :columns="['compact' => 1, 'expanded' => 2]" gap="space200">
        @foreach (['light', 'dark'] as $theme)
            <x-livewire-material::surface data-theme="{{ $theme }}" level="surface" padding="space200" corner="lg">
                <x-livewire-material::stack gap="space300">
                    <h3 class="md-type-title-md">{{ ucfirst($theme) }}</h3>

                    @foreach ($groups as $group => $roles)
                        <x-livewire-material::stack gap="space100">
                            <h4 class="md-type-label-lg md-ink-variant">{{ $group }}</h4>

                            <x-livewire-material::grid :columns="['compact' => 2, 'medium' => 3]" gap="space100">
                                @foreach ($roles as $role)
                                    <x-livewire-material::row gap="space100" align="center">
                                        <span data-md-showcase-swatch="{{ $role }}" data-md-showcase-size="lg" style="background: var(--md-sys-color-{{ $role }})"></span>
                                        <span class="md-type-body-sm md-truncate" data-md-showcase-swatch-label>{{ $role }}</span>
                                    </x-livewire-material::row>
                                @endforeach
                            </x-livewire-material::grid>
                        </x-livewire-material::stack>
                    @endforeach
                </x-livewire-material::stack>
            </x-livewire-material::surface>
        @endforeach
    </x-livewire-material::grid>
</x-livewire-material::stack>