@props([
    'id',
    'title',
    'icon' => 'circle',
    'subtitle' => null,
    'optional' => false,
    'collapsible' => true,
])

{{--
    One card per group of fields.

    The card is a <section> with a real heading rather than a styled <div>: a
    receptionist running a screen reader gets the same "Contact details" landmark
    the sighted user gets from the icon tile, and can jump between groups instead
    of arrowing through forty inputs.

    `data-clinic-form-section` is what the progress rail counts. The collapse is
    driven from resources/js — an inline handler would be inline script, which
    this application's CSP refuses (see tests/Architecture/ContentSecurityTest).
--}}
<section {{ $attributes->merge(['class' => 'clinic-form-section']) }}
         id="{{ $id }}"
         data-clinic-form-section="{{ $id }}">
    <header class="clinic-form-section__head">
        <span class="clinic-form-section__icon" aria-hidden="true">
            <i class="bi bi-{{ $icon }}"></i>
        </span>

        <div class="clinic-form-section__heading">
            <h2 class="clinic-form-section__title">
                {{ $title }}
                @if ($optional)
                    <span class="clinic-form-section__badge">{{ __('common.optional') }}</span>
                @endif
            </h2>

            @if ($subtitle)
                <p class="clinic-form-section__subtitle">{{ $subtitle }}</p>
            @endif
        </div>

        <span class="clinic-form-section__state" data-clinic-section-state hidden>
            <i class="bi bi-check-lg" aria-hidden="true"></i>
        </span>

        @if ($collapsible)
            <button type="button"
                    class="clinic-form-section__toggle"
                    data-clinic-section-toggle
                    aria-expanded="true"
                    aria-controls="{{ $id }}-body">
                <i class="bi bi-chevron-up" aria-hidden="true"></i>
                <span class="visually-hidden">{{ $title }}</span>
            </button>
        @endif
    </header>

    {{--
        The inner wrapper is not decoration: collapsing animates the body's
        grid-template-rows from 1fr to 0fr, which needs exactly one child to
        measure against. Padding sits on the inner element so a collapsed card
        closes flush instead of leaving a band of empty white.
    --}}
    <div class="clinic-form-section__body" id="{{ $id }}-body">
        <div class="clinic-form-section__fields">
            {{ $slot }}
        </div>
    </div>
</section>