@php
    $examples = [
        'Linear: determinate and indeterminate' => [<<<'BLADE'
            <x-progress value="40" label="Linear" />
            <x-progress label="Linear, indeterminate" />
            BLADE, true],
        'Linear wavy' => [<<<'BLADE'
            <x-progress value="60" wavy label="Wavy" />
            <x-progress wavy label="Wavy, indeterminate" />
            BLADE, true],
        'Thick' => [<<<'BLADE'
            <x-progress value="70" thick label="Thick" />
            <x-progress value="55" wavy thick label="Thick wavy" />
            <x-progress wavy thick label="Thick wavy, indeterminate" />
            BLADE, true],
        'Circular' => [<<<'BLADE'
            <x-progress value="65" circular label="Circular" />
            <x-progress circular label="Circular, indeterminate" />
            <x-progress value="65" circular wavy label="Circular wavy" />
            <x-progress circular wavy label="Circular wavy, indeterminate" />
            <x-progress value="65" circular thick label="Circular thick" />
            <x-progress value="65" circular wavy thick label="Circular wavy thick" />
            <x-progress circular wavy class="size-24" label="Circular wavy, 96px" />
            BLADE, false],
        'Colours' => [<<<'BLADE'
            <x-progress value="35" color="secondary" label="Secondary" />
            <x-progress value="50" wavy color="tertiary" label="Tertiary" />
            <x-progress value="65" color="error" label="Error" />
            <x-progress value="80" wavy color="success" label="Success" />
            <x-progress value="45" color="warning" label="Warning" />
            <x-progress value="55" wavy color="info" label="Info" />
            BLADE, true],
        'Following a value in the browser (bind)' => [<<<'BLADE'
            <div x-data="{ progress: 30 }" class="w-full space-y-6">
                <x-button label="Set a random value" variant="tonal" x-on:click="progress = Math.round(Math.random() * 100)" />
                <x-progress bind="progress" label="Bound" />
                <x-progress bind="progress" wavy label="Bound wavy" />
                <div class="flex gap-6">
                    <x-progress bind="progress" circular label="Bound circular" />
                    <x-progress bind="progress" circular wavy label="Bound circular wavy" />
                </div>
            </div>
            BLADE, false],
    ];
@endphp

<section id="progress" class="scroll-mt-24 space-y-6">
    <h2 class="type-headline-md">Progress</h2>

    <p class="max-w-3xl type-body-md text-on-surface-variant">
        <code>&lt;x-progress&gt;</code>: M3 Expressive's linear and circular progress indicators, flat or wavy, determinate or indeterminate.
    </p>

    @foreach ($examples as $title => [$code, $stack])
        <x-showcase::example :$title :$code :$stack />
    @endforeach
</section>