{{--
    Modal de confirmação/aviso global.

    Substitui os `confirm()`/`alert()` nativos do navegador por um modal do design
    system. É dirigido por dados: qualquer `<form data-confirm="mensagem">` é
    interceptado por resources/js/confirm.js, que abre este modal e só envia o
    formulário se o usuário confirmar. Módulos JS (ex.: calendar.js) usam as
    funções `confirmAction()`/`alertMessage()` do mesmo arquivo, que reaproveitam
    este mesmo elemento — um modal só na página, um comportamento só.

    Título, ícone, mensagem, rótulo e cor do botão são preenchidos em tempo de
    execução; os valores abaixo são só o estado inicial.
--}}
<div class="modal fade" id="confirm-modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">
            <div class="modal-header border-0">
                <h6 class="modal-title d-flex align-items-center gap-2 mb-0">
                    <i class="bi bi-exclamation-triangle-fill text-warning" id="confirm-modal-icon"></i>
                    <span id="confirm-modal-title">Confirmar</span>
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
            {{-- pre-line: preserva as quebras de linha da mensagem (ex.: lista de
                 erros), sempre via textContent — nunca HTML — para não abrir
                 injeção com nome de registro digitado pelo usuário. --}}
            <div class="modal-body pt-0">
                <div id="confirm-modal-message" style="white-space: pre-line;"></div>

                {{-- OPÇÃO EXTRA da confirmação, escondida por padrão.
                     Existe para as perguntas que não são só "sim ou não" — a
                     primeira delas é excluir uma reserva que faz parte de uma
                     recorrência, onde o usuário precisa dizer se leva as demais
                     ocorrências junto. Colocar essa escolha DENTRO da
                     confirmação evita o pior desfecho: apagar meses de agenda
                     por engano num botão que parecia excluir uma reserva só.

                     Começa sempre DESMARCADA e é reposta a cada abertura pelo
                     confirm.js: um checkbox que guarda o estado anterior faria a
                     segunda exclusão levar o grupo sem ninguém pedir. --}}
                <div class="form-check mt-3 d-none" id="confirm-modal-checkbox-wrapper">
                    <input class="form-check-input" type="checkbox" id="confirm-modal-checkbox">
                    <label class="form-check-label" for="confirm-modal-checkbox">
                        <span id="confirm-modal-checkbox-label"></span>
                        <span class="d-block form-text mt-0" id="confirm-modal-checkbox-hint"></span>
                    </label>
                </div>
            </div>
            {{-- `flex-nowrap` e `text-nowrap`: o `modal-footer` do Bootstrap
                 quebra linha por padrão, e o diálogo é `modal-sm` (300px), então
                 um rótulo mais longo que "Excluir" empilhava os dois botões — com
                 o de confirmar EMBAIXO do cancelar, invertendo a leitura habitual
                 e deixando a ação destrutiva onde a mão espera "sair".

                 O `text-nowrap` acompanha porque sem ele o não-quebrar da linha
                 se resolveria quebrando o TEXTO dentro do botão, trocando um
                 problema pelo outro. --}}
            <div class="modal-footer border-0 flex-nowrap">
                <button type="button" class="btn btn-outline-secondary text-nowrap" data-bs-dismiss="modal"
                        id="confirm-modal-cancel">Cancelar</button>
                <button type="button" class="btn btn-danger text-nowrap" id="confirm-modal-accept">Confirmar</button>
            </div>
        </div>
    </div>
</div>