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

@php
$dialogClass = 'modal-dialog';
$dialogClass .= $size ? ' modal-' . $size : '';
$dialogClass .= $centered ? ' modal-dialog-centered' : '';
$dialogClass .= $scrollable ? ' modal-dialog-scrollable' : '';
@endphp

<div
    class="modal fade"
    id="{{ $id }}"
    tabindex="-1"
    aria-labelledby="{{ $id }}Label"
    aria-hidden="true"
    @if($static) data-bs-backdrop="static" data-bs-keyboard="false" @endif
    {{ $attributes }}
>
    <div class="{{ $dialogClass }}">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="{{ $id }}Label">{{ $title }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {{ $slot }}
            </div>
            @if(isset($footer))
            <div class="modal-footer">
                {{ $footer }}
            </div>
            @endif
        </div>
    </div>
</div>