{# Модалки kubectl и подтверждения — общие для главной и страницы создания кластера.
   Автор: Сергей Антропов — https://devops.org.ru #}
<div
  id="modal-overlay"
  class="modal-overlay hidden"
  role="dialog"
  aria-modal="true"
  aria-labelledby="modal-title"
>
  <div class="modal-box">
    <div class="modal-head modal-head--cluster">
      <h3 id="modal-title" class="modal-title-text modal-title-text--center">Состояние кластера</h3>
      <div class="modal-toolbar" role="toolbar" aria-label="Действия в окне">
        <button type="button" class="modal-close btn-secondary" id="modal-close">Закрыть</button>
      </div>
    </div>
    <div id="modal-spinner" class="modal-spinner hidden" aria-hidden="true">
      <span class="spinner" aria-label="Загрузка"></span>
      <span class="muted">Запрос kubectl…</span>
    </div>
    <p id="modal-sub" class="muted modal-sub"></p>
    <h4 class="modal-section-title muted">Узлы</h4>
    <pre id="modal-nodes" class="mono" role="region" aria-label="Список узлов"></pre>
    <h4 class="modal-section-title muted">Поды (все namespace)</h4>
    <pre id="modal-pods" class="mono" role="region" aria-label="Список подов"></pre>
  </div>
</div>

<div
  id="provision-log-modal-overlay"
  class="modal-overlay provision-log-modal-overlay hidden"
  role="dialog"
  aria-modal="true"
  aria-labelledby="provision-log-modal-title"
>
  <div class="modal-box modal-box--provision-log">
    <div class="modal-head modal-head--cluster">
      <h3 id="provision-log-modal-title" class="modal-title-text modal-title-text--center">
        Журнал развёртывания
      </h3>
      <div class="modal-toolbar" role="toolbar" aria-label="Закрыть окно">
        <button type="button" class="modal-close btn-secondary" id="provision-log-modal-close">
          Закрыть
        </button>
      </div>
    </div>
    <p id="provision-log-modal-sub" class="muted modal-sub" aria-live="polite"></p>
    <pre
      id="provision-log-body"
      class="mono provision-log-body"
      role="region"
      aria-label="JSON журнала развёртывания"
    ></pre>
  </div>
</div>

{# Журнал задания по API GET /jobs/{id} (модалка при необходимости из скриптов). #}
<div
  id="job-log-modal-overlay"
  class="modal-overlay job-log-modal-overlay hidden"
  role="dialog"
  aria-modal="true"
  aria-labelledby="job-log-modal-title"
>
  <div class="modal-box modal-box--job-log">
    <div class="modal-head modal-head--cluster">
      <h3 id="job-log-modal-title" class="modal-title-text modal-title-text--center">Журнал задания</h3>
      <div class="modal-toolbar" role="toolbar" aria-label="Закрыть окно">
        <button type="button" class="modal-close btn-secondary" id="job-log-modal-close">Закрыть</button>
      </div>
    </div>
    <p id="job-log-modal-sub" class="muted modal-sub" aria-live="polite"></p>
    <pre
      id="job-log-modal-body"
      class="mono job-log-modal-body"
      role="region"
      aria-label="Текст журнала задания"
    ></pre>
  </div>
</div>

<div
  id="confirm-modal-overlay"
  class="modal-overlay confirm-modal-overlay hidden"
  role="alertdialog"
  aria-modal="true"
  aria-labelledby="confirm-modal-title"
  aria-describedby="confirm-modal-message"
>
  <div class="modal-box modal-box--confirm">
    <h3 id="confirm-modal-title" class="modal-title-text confirm-modal-title">Подтвердите действие</h3>
    <p id="confirm-modal-message" class="modal-sub confirm-modal-message"></p>
    <div class="confirm-modal-actions">
      <button type="button" class="btn-secondary" id="confirm-modal-cancel">Отмена</button>
      <button type="button" id="confirm-modal-ok">Подтвердить</button>
    </div>
  </div>
</div>

{# Полноэкранный спиннер на время фонового старта/стопа узлов (главная и страница кластера). #}
<div
  id="cluster-lifecycle-job-overlay"
  class="page-loading-overlay cluster-lifecycle-job-overlay hidden"
  role="status"
  aria-live="polite"
  aria-busy="false"
  aria-hidden="true"
  aria-label="Операция с кластером"
>
  <div class="page-loading-backdrop" aria-hidden="true"></div>
  <div class="page-loading-center">
    <span class="spinner page-loading-spinner" aria-hidden="true"></span>
    <span id="cluster-lifecycle-job-label" class="page-loading-label">…</span>
  </div>
</div>