@props([
  'id',    // modal HTML id
  'title'=>null, // header title
  'size'=>'modal-sm',  // '' | 'modal-sm' | 'modal-lg' | 'modal-xl'
  'static' // true = backdrop static, keyboard disabled
])

<div
  class="modal fade"
  id="{{$id}}"
  tabindex="-1"
  aria-hidden="true"
  @if($static)
    data-bs-backdrop="static"
    data-bs-keyboard="false"
  @endif
>
  <div class="modal-dialog modal-dialog-centered {{ $size }}">
    <div class="modal-content">
      @if($title)
      <div class="modal-header">
        <h6 class="modal-title">{{ $title }}</h6>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      @endif
      {{-- Body slot --}}
      <div class="modal-body">
        {{ $slot }}
      </div>

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