<div
  class="modal fade {{ $clases ?? 'text-left' }}"
  id="{{ $id ?? 'ventanaEmergente' }}"
  tabindex="-1"
  aria-labelledby="{{ $idTitulo ?? 'titulo' . ucfirst($id ?? 'ventanaEmergente') }}"
  style="{{ $estilos ?? 'display: none' }}"
  aria-hidden="true"
  {!! $atributos ?? 'data-bs-backdrop=static data-bs-keyboard=false data-bs-focus=false' !!}
>
  <div
    class="
      modal-dialog
      modal-dialog-centered
      modal-dialog-scrollable
      {!! $clasesContenedor ?? '' !!}
    "
    role="document"
    {!! $atributosContenedor ?? '' !!}
  >

    <div
      class="modal-content {{ $clasesContenidoVentana ?? '' }}"
      {!! $atributosContenidoVentana ?? '' !!}
    >

      <div
        class="modal-header {{ $clasesContenedorTitulo ?? 'bg-primary' }}"
        {!! $atributosContenedorTitulo ?? '' !!}
      >

        <h5
          class="title modal-title {{ $clasesTitulo ?? 'white' }}"
          id="{{ $idTitulo ?? 'titulo' . ucfirst($id ?? 'ventanaEmergente') }}"
          {!! $atributosTitulo ?? '' !!}
        >
          {{ $titulo ?? 'Ventana' }}
        </h5>

        <button
          type="button"
          class="{{ $clasesBotonCerrar ?? 'btn-close btn-close-white' }}"
          data-bs-dismiss="modal"
          aria-label="Close"
          {!! $atributosBotonCerrar ?? '' !!}
        >
          {!! $contenidoBotonCerrar ?? '' !!}
        </button>

      </div>

      <div
        class="modal-body {{ $clasesContenido ?? '' }}"
        {!! $atributosContenido ?? '' !!}
      >
        {{ $slot }}
      </div>

      <div
        class="modal-footer {{ $clasesPie ?? '' }}"
        {!! $atributosPie ?? '' !!}
      >

        <button
          type="{{ $tipoBoton1 ?? 'button' }}"
          class="{{ $clasesBoton1 ?? 'btn btn-primary' }} text-capitalize"
          {!! $atributosBoton1 ?? 'data-bs-dismiss=modal' !!}
        >
          <i class="bx bx-check"></i>
          <span class="{{ $clasesTextoBoton1 ?? '' }}">
            {{ $textoBoton1 ?? 'Aceptar' }}
          </span>
        </button>

        <button
          type="{{ $tipoBoton2 ?? 'button' }}"
          class="{{ $clasesBoton2 ?? 'btn btn-secondary' }} text-capitalize"
          {!! $atributosBoton2 ?? 'data-bs-dismiss=modal' !!}
        >
          <i class="bx bx-x"></i>
          <span class="{{ $clasesTextoBoton2 ?? '' }}">
            {{ $textoBoton2 ?? 'Cancelar' }}
          </span>
        </button>

      </div>

    </div>

  </div>
</div>
