{# Главная: CTA, статистика, карточка «Ресурсы узлов» (только донаты); список кластеров на /clusters.
   Автор: Сергей Антропов — https://devops.org.ru #}
{% extends "base.html" %}

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

{% block body_attrs %}data-dashboard-mode="home"{% 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="home-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>

<div class="top-dashboard-row">
  <section class="card cta-hero-card" aria-labelledby="cta-hero-title">
    <div class="cta-hero-inner">
      <h1 class="page-title" id="cta-hero-title">Создать кластер</h1>
      <p class="muted page-lead cta-hero-lead">
        Список кластеров, сводка по узлам и действия — на странице <a href="/clusters">Кластеры</a>. Данные там обновляются автоматически.
      </p>
      <a href="/cluster-create" class="btn btn-cta-large">Перейти к форме создания</a>
    </div>
  </section>

  <aside class="card stats-side-card" aria-labelledby="stats-heading">
    <h2 id="stats-heading">Статистика</h2>
    <p id="stats-engine-hint" class="stats-engine-hint muted hidden" aria-live="polite"></p>
    <div id="stats-failure-wrap" class="stats-failure-wrap hidden" role="alert" aria-live="polite"></div>
    <div id="stats-env" class="stats-env-cards" role="status" aria-live="polite">
      <p class="stats-env-placeholder muted">Проверка среды…</p>
    </div>
    <div id="stats-grid" class="stats-metrics-grid" aria-label="Сводка по кластерам и заданиям"></div>
  </aside>
</div>

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

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

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