{{-- Wizard modal: progresso em tempo real do provisionamento --}}
<div class="modal fade provisionamento-wizard-modal"
     id="provisionamento-wizard-modal"
     tabindex="-1"
     role="dialog"
     aria-labelledby="provisionamento-wizard-title"
     aria-hidden="true"
     data-backdrop="static"
     data-keyboard="false">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content provisionamento-wizard">
            <div class="modal-header provisionamento-wizard__header">
                <div>
                    <h5 class="modal-title provisionamento-wizard__title" id="provisionamento-wizard-title">
                        Provisionando instalação
                    </h5>
                    <p class="provisionamento-wizard__subtitle mb-0" id="provisionamento-wizard-subtitle">
                        Aguarde enquanto configuramos o ambiente…
                    </p>
                </div>
                <span class="provisionamento-wizard__badge d-none" id="provisionamento-wizard-badge"></span>
            </div>
            <div class="modal-body provisionamento-wizard__body">
                <div class="provisionamento-wizard__progress-wrap" aria-hidden="true">
                    <div class="provisionamento-wizard__progress-bar">
                        <div class="provisionamento-wizard__progress-fill" id="provisionamento-wizard-progress" style="width: 0%"></div>
                    </div>
                    <span class="provisionamento-wizard__progress-label" id="provisionamento-wizard-progress-label">0%</span>
                </div>

                <ol class="provisionamento-wizard__steps" id="provisionamento-wizard-steps" aria-live="polite"></ol>

                <div class="provisionamento-wizard__detail d-none" id="provisionamento-wizard-detail">
                    <p class="provisionamento-wizard__detail-msg" id="provisionamento-wizard-detail-msg"></p>
                    <details class="provisionamento-wizard__detail-tech">
                        <summary>Detalhes técnicos</summary>
                        <pre class="provisionamento-wizard__pre" id="provisionamento-wizard-detail-pre"></pre>
                    </details>
                </div>

                <div class="provisionamento-wizard__success d-none" id="provisionamento-wizard-success">
                    <div class="provisionamento-wizard__success-icon" aria-hidden="true">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <h3 class="provisionamento-wizard__success-title">Instalação pronta!</h3>
                    <p class="provisionamento-wizard__success-text">
                        O tenant está configurado e pode ser acedido no endereço abaixo.
                    </p>
                    <a href="#"
                       class="btn-listagem btn-listagem--primary provisionamento-wizard__cta"
                       id="provisionamento-wizard-open-tenant"
                       target="_blank"
                       rel="noopener noreferrer">
                        <i class="fas fa-external-link-alt" aria-hidden="true"></i>
                        Abrir instalação
                    </a>
                    <a href="#"
                       class="btn-listagem btn-listagem--ghost mt-2"
                       id="provisionamento-wizard-open-gestao">
                        Ver na gestão
                    </a>
                </div>

                <div class="provisionamento-wizard__error d-none" id="provisionamento-wizard-error">
                    <p class="provisionamento-wizard__error-text" id="provisionamento-wizard-error-text"></p>
                </div>
            </div>
            <div class="modal-footer provisionamento-wizard__footer">
                <button type="button"
                        class="btn-listagem btn-listagem--ghost d-none"
                        id="provisionamento-wizard-btn-fechar"
                        data-dismiss="modal">
                    Fechar
                </button>
                <button type="button"
                        class="btn-listagem btn-listagem--primary d-none"
                        id="provisionamento-wizard-btn-repetir">
                    <i class="fas fa-redo" aria-hidden="true"></i>
                    Repetir passo com erro
                </button>
            </div>
        </div>
    </div>
</div>