@props([
    'id',
    'title' => null,
    'size' => '',
    'centered' => false,
    'scrollable' => false,
])

<div class="modal fade" id="{{ $id }}" tabindex="-1" aria-labelledby="{{ $id }}-label" aria-hidden="true"
     @if($scrollable) data-bs-scroll="true" @endif>
    <div class="modal-dialog {{ $size ? 'modal-' . $size : '' }} {{ $centered ? 'modal-dialog-centered' : '' }}">
        <div class="modal-content">
            @if($title || isset($header))
                <div class="modal-header">
                    @if($title)
                        <h5 class="modal-title" id="{{ $id }}-label">{{ $title }}</h5>
                    @endif
                    @isset($header)
                        {{ $header }}
                    @endisset
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
            @endif

            <div class="modal-body">
                {{ $slot }}
            </div>

            @isset($footer)
                <div class="modal-footer">
                    {{ $footer }}
                </div>
            @endisset
        </div>
    </div>
</div>