{% extends "base.html" %}
{% block content %}
<section class="tempest-admin-dashboard">
  <h1>{{ site.title }}</h1>
  <p>{{ site.index_subtitle }}</p>

  {% if metrics %}
  <div class="tempest-admin-stats" aria-label="System metrics">
    <div class="tempest-admin-stat">
      <span class="tempest-admin-stat__label">CPU</span>
      <span class="tempest-admin-stat__value">{{ metrics.cpu_percent }}%</span>
    </div>
    <div class="tempest-admin-stat">
      <span class="tempest-admin-stat__label">Memory</span>
      <span class="tempest-admin-stat__value">{{ metrics.mem_percent }}%</span>
      <span class="tempest-admin-stat__sub">{{ metrics.mem_used_gb }} / {{ metrics.mem_total_gb }} GB</span>
    </div>
    {% if metrics.disk_percent is not none %}
    <div class="tempest-admin-stat">
      <span class="tempest-admin-stat__label">Disk</span>
      <span class="tempest-admin-stat__value">{{ metrics.disk_percent }}%</span>
    </div>
    {% endif %}
  </div>
  {% endif %}

  {% if cards %}
  <div class="tempest-admin-cards" aria-label="Business metrics">
    {% for card in cards %}
    <article class="tempest-admin-card tempest-admin-card--{{ card.kind }}">
      <span class="tempest-admin-card__label">{{ card.label }}</span>
      {% if card.kind == 'value' %}
      <span class="tempest-admin-card__value">{{ card.value }}{% if card.unit %} <small>{{ card.unit }}</small>{% endif %}</span>
      {% elif card.kind == 'trend' %}
      <span class="tempest-admin-card__value">{{ card.value }}{% if card.unit %} <small>{{ card.unit }}</small>{% endif %}</span>
      <span class="tempest-admin-card__trend tempest-admin-card__trend--{{ card.direction }}">
        {% if card.direction == 'up' %}▲{% elif card.direction == 'down' %}▼{% else %}▬{% endif %}
        {% if card.pct is not none %}{{ '%+.1f' | format(card.pct) }}%{% else %}—{% endif %}
        <small>vs prev {{ card.previous if card.previous is defined else '' }}</small>
      </span>
      {% else %}
      <ul class="tempest-admin-card__parts">
        {% for seg in card.segments %}
        <li>
          <span class="tempest-admin-card__part-label">{{ seg.label }}</span>
          <span class="tempest-admin-card__part-bar"><span style="width: {{ '%.0f' | format(seg.pct) }}%"></span></span>
          <span class="tempest-admin-card__part-value">{{ seg.value }}</span>
        </li>
        {% endfor %}
      </ul>
      {% endif %}
      {% if card.help %}<span class="tempest-admin-card__help">{{ card.help }}</span>{% endif %}
    </article>
    {% endfor %}
  </div>
  {% endif %}

  {% if models_view %}
  <div class="tempest-admin-models">
    {% for entry in models_view %}
    <article class="tempest-admin-model-card">
      <header class="tempest-admin-model-card__head">
        <h2>{{ entry.admin.get_verbose_name_plural() }}</h2>
        {% if entry.count is not none %}<span class="tempest-admin-model-card__count">{{ entry.count }}</span>{% endif %}
      </header>
      <div class="tempest-admin-model-card__actions">
        <a href="{{ entry.url }}">Browse</a>
        {% if entry.new_url %}<a href="{{ entry.new_url }}">+ New</a>{% endif %}
      </div>
    </article>
    {% endfor %}
  </div>
  {% else %}
  <p>No models registered. Register an <code>AdminModel</code> on the
  <code>AdminSite</code> to populate this dashboard.</p>
  {% endif %}
</section>
{% endblock %}