@props([
    'title',
    'description' => null,
    'icon' => null,
    'collapsible' => false,
    'open' => true,
])

@php
    $sectionId = 'chmSection' . substr(md5($title), 0, 8);
@endphp

<section {{ $attributes->merge(['class' => 'chm-form-section card']) }}>
    <div class="chm-form-section-header {{ $collapsible ? 'chm-form-section-collapsible' : '' }}"
         @if($collapsible) data-bs-toggle="collapse" data-bs-target="#{{ $sectionId }}" @endif
         role="{{ $collapsible ? 'button' : 'presentation' }}">
        <div class="chm-form-section-heading">
            @if($icon)
                <span class="chm-form-section-icon"><i class="{{ $icon }}"></i></span>
            @endif
            <div>
                <h6 class="mb-0">{{ $title }}</h6>
                @if($description)
                    <p class="text-muted small mb-0">{{ $description }}</p>
                @endif
            </div>
        </div>
        @if($collapsible)
            <i class="bx bx-chevron-down chm-form-section-chevron"></i>
        @endif
        @isset($actions)
            <div class="chm-form-section-actions">{{ $actions }}</div>
        @endisset
    </div>

    @if($collapsible)
        <div class="collapse {{ $open ? 'show' : '' }}" id="{{ $sectionId }}">
            <div class="chm-form-section-body">
                {{ $slot }}
            </div>
        </div>
    @else
        <div class="chm-form-section-body">
            {{ $slot }}
        </div>
    @endif
</section>