@props(['title','dataBsTarget', 'ariaLabel', 'dataBsTargetModel'])

{{-- <div> --}}
    <div id="accordion">
        <div {!! $attributes->merge(['class' => 'accordion-item']) !!}>
            <h2 class="accordion-header accordion-header-primary" id="{{ $ariaLabel }}">
                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                    data-bs-target="#{{ $dataBsTarget }}" aria-expanded="true"
                    aria-controls="{{ $dataBsTarget }}">
                    <i class="fa-solid fa-list-check"></i> &nbsp; {{ $title }}
                    <span class="ms-auto">
                        <i class="las la-plus-circle la-2x mx-4 bg-primary rounded-5 text-white"
                            data-bs-toggle="modal" data-bs-target="#{{ $dataBsTargetModel }}"></i>
                    </span>
                </button>
            </h2>
            <div id="{{ $dataBsTarget }}" class="accordion-collapse collapse"
                aria-labelledby="{{ $ariaLabel }}" data-bs-parent="#accordion">
                <div class="accordion-body p-0 pt-3">

                    {{ $slot }}

                </div>
            </div>
        </div>
    </div>
{{-- </div> --}}