@php
    $isAside = $isAside();
    $isCollapsed = $isCollapsed();
    $isCollapsible = $isCollapsible() && (! $isAside);
    $isCompact = $isCompact();
    $isFormBefore = $isFormBefore();
@endphp

<div
        @if ($isCollapsible)
            x-data="{
            isCollapsed: @js($isCollapsed),
        }"
        x-on:open-form-section.window="if ($event.detail.id == $el.id) isCollapsed = false"
        x-on:collapse-form-section.window="if ($event.detail.id == $el.id) isCollapsed = true"
        x-on:toggle-form-section.window="if ($event.detail.id == $el.id) isCollapsed = ! isCollapsed"
        x-on:expand-concealing-component.window="
            error = $el.querySelector('[data-validation-error]')

            if (! error) {
                return
            }

            isCollapsed = false

            if (document.body.querySelector('[data-validation-error]') !== error) {
                return
            }

            setTimeout(
                () =>
                    $el.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start',
                        inline: 'start',
                    }),
                200,
            )
        "
        @endif
        id="{{ $getId() }}"
        {{
            $attributes
                ->merge($getExtraAttributes())
                ->class([
                    'filament-forms-section-component',
                    'rounded-xl border border-gray-300 bg-moonlight' => ! $isAside,
                    'grid grid-cols-1' => $isAside,
                    'md:grid-cols-2' => $isAside && ! $isCompact,
                    'md:grid-cols-3' => $isAside && $isCompact,
                    'md:order-last' => $isFormBefore,
                    'dark:border-gray-600 dark:bg-gray-800' => config('forms.dark_mode') && ! $isAside,
                ])
        }}
        {{ $getExtraAlpineAttributeBag() }}
>
    <div
            @class([
                'filament-forms-section-header-wrapper flex overflow-hidden rounded-t-xl rtl:space-x-reverse',
                'min-h-[40px]' => $isCompact,
                'min-h-[56px]' => ! $isCompact,
                'pb-4' => $isAside,
                'pr-6' => $isAside && ! $isFormBefore,
                'pl-6' => $isAside && $isFormBefore,
                'items-center bg-moonlight px-6 py-4 border-b-2 border-b-platinum' => ! $isAside,
                'dark:bg-gray-800 dark:border-b-gray-900' => config('forms.dark_mode') && (! $isAside),
            ])
            @if ($isCollapsible)
                x-bind:class="{ 'rounded-b-xl': isCollapsed }"
            x-on:click="isCollapsed = ! isCollapsed"
            @endif
    >
        <div
                @class([
                    'filament-forms-section-header flex-1 space-y-1',
                    'cursor-pointer' => $isCollapsible,
                ])
        >
            <h3
                    @class([
                        'pointer-events-none flex flex-row items-center font-bold tracking-tight',
                        'text-xl' => ! $isCompact || $isAside,
                    ])
            >
                @if ($icon = $getIcon())
                    <x-dynamic-component
                            :component="$icon"
                            @class([
                                'mr-1',
                                'h-4 w-4' => $isCompact && ! $isAside,
                                'h-6 w-6' => ! $isCompact || $isAside,
                            ])
                    />
                @endif

                {{ $getHeading() }}
            </h3>

            @if ($description = $getDescription())
                <p
                        @class([
                            'text-gray-500',
                            'text-sm' => $isCompact && ! $isAside,
                            'text-base' => ! $isCompact || $isAside,
                        ])
                >
                    {{ $description }}
                </p>
            @endif
        </div>

        @if ($isCollapsible)
            <button
                    x-on:click.stop="isCollapsed = ! isCollapsed"
                    x-bind:class="{
                    '-rotate-180': ! isCollapsed,
                }"
                    type="button"
                    @class([
                        'flex transform items-center justify-center rounded-full text-primary-500 outline-none hover:bg-gray-500/5 focus:bg-primary-500/10',
                        'h-10 w-10' => ! $isCompact,
                        '-my-1 h-8 w-8' => $isCompact,
                        '-rotate-180' => ! $isCollapsed,
                    ])
            >
                <svg
                        @class([
                            'h-7 w-7' => ! $isCompact,
                            'h-5 w-5' => $isCompact,
                        ])
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                >
                    <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M19 9l-7 7-7-7"
                    />
                </svg>
            </button>
        @endif
    </div>

    <div
            @if ($isCollapsible)
                x-bind:class="{ 'invisible h-0 !m-0 overflow-y-hidden': isCollapsed }"
            x-bind:aria-expanded="(! isCollapsed).toString()"
            @if ($isCollapsed) x-cloak @endif
            @endif
            @class([
                'filament-forms-section-content-wrapper',
                'col-span-2' => $isAside && $isCompact,
                'md:order-first' => $isFormBefore,
            ])
    >
        <div
                @class([
                    'filament-forms-section-content',
                    'rounded-xl border border-gray-300 bg-moonlight' => $isAside,
                    'dark:border-gray-600 dark:bg-gray-800' => config('forms.dark_mode') && $isAside,
                    'p-6' => ! $isCompact || $isAside,
                    'p-4' => $isCompact && ! $isAside,
                ])
        >
            {{ $getChildComponentContainer() }}
        </div>
    </div>
</div>