{# Список кластеров и сводка ресурсов узлов (перенесено с панели).
   Автор: Сергей Антропов — https://devops.org.ru #}
{% extends "base.html" %}

{% block page_title %}Кластеры{% endblock %}

{% block body_extra_class %} dashboard-clusters-loading{% endblock %}

{% block body_attrs %}data-dashboard-mode="clusters"{% endblock %}

{% block footer %}
<div class="footer-inner">
  <p class="footer-copyright">
    © {{ app_title }} ·
    <a href="https://devops.org.ru" target="_blank" rel="noopener">devops.org.ru</a>
  </p>
</div>
{% endblock %}

{% block content %}
<div
  id="clusters-page-loading-overlay"
  class="page-loading-overlay"
  role="status"
  aria-live="polite"
  aria-busy="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 class="page-loading-label">Загрузка кластеров и метрик узлов…</span>
  </div>
</div>

<section class="card hero-panel clusters-page-hero" aria-labelledby="clusters-page-title">
  <div class="clusters-page-hero-row">
    <div class="clusters-page-hero-text">
      <h1 class="page-title" id="clusters-page-title">Кластеры</h1>
      <p class="muted page-lead clusters-page-hero-lead">
        Запущенные узлы kind, kubeconfig и действия.
      </p>
    </div>
    <div class="clusters-page-hero-actions">
      <a href="/cluster-create" class="clusters-page-create-btn">Создать кластер</a>
    </div>
  </div>
</section>

<section id="aggregate-donuts-section" class="card aggregate-donuts-card" aria-labelledby="donuts-heading">
  <h2 id="donuts-heading" class="donuts-card-title">Ресурсы узлов (сводка)</h2>
  <div id="aggregate-donuts" class="aggregate-donuts" aria-live="polite"></div>
</section>

<section class="card clusters-card">
  <h2>Список кластеров</h2>
  <div class="table-wrap">
    <table id="tbl-clusters" aria-label="Список кластеров">
      <thead>
        <tr>
          <th class="col-cluster-name">Имя</th>
          <th class="col-kind">kind</th>
          <th class="col-kubeconfig">kubeconfig</th>
          <th class="col-version">Версия</th>
          <th class="col-workers">Workers</th>
          <th class="col-state">Состояние</th>
          <th class="col-actions">Действия</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
  <p id="list-msg" class="msg muted"></p>
</section>

{% include "partials/dashboard_modals.html" %}
{% endblock %}

{% block scripts %}
<script src="/static/js/dashboard.js" defer></script>
{% endblock %}