{# Teilbereich der Statusübersicht -- wird auch einzeln per fetch geladen. #}
{% from "tesm_core/macros.html" import pill, empty_state %}

{# Beide Blöcke in einen Stapel: sonst klebt die erste Gruppe an den
   Filterkacheln, während die Gruppen untereinander Abstand haben. #}
<div class="stack">
<div class="grid grid--4" data-behavior="tile-filter" data-filter-scope="tile-sections">
  <button type="button" class="stat" data-filter-value="" aria-pressed="false">
    <span class="stat__label">Gesamt</span>
    <span class="stat__value">{{ counts.total }}</span>
    <span class="stat__hint">Filter aufheben</span>
  </button>
  <button type="button" class="stat stat--ok" data-filter-value="online" aria-pressed="false">
    <span class="stat__label">Erreichbar</span>
    <span class="stat__value">{{ counts.online }}</span>
  </button>
  <button type="button" class="stat stat--danger" data-filter-value="offline" aria-pressed="false">
    <span class="stat__label">Nicht erreichbar</span>
    <span class="stat__value">{{ counts.offline }}</span>
  </button>
  {% if detailed %}
    <button type="button" class="stat stat--muted" data-filter-value="disabled" aria-pressed="false">
      <span class="stat__label">Deaktiviert</span>
      <span class="stat__value">{{ counts.disabled }}</span>
    </button>
  {% else %}
    <div class="stat stat--warning">
      <span class="stat__label">Noch nicht geprüft</span>
      <span class="stat__value">{{ counts.unknown }}</span>
    </div>
  {% endif %}
</div>

<div id="tile-sections" class="stack">
  {% for section in sections %}
    {% if section.tiles %}
      <details class="card" data-tile-section="{{ section.key }}"
               data-persist="dash-{{ section.key }}" {% if section.key != 'disabled' %}open{% endif %}>
        <summary class="card__header" style="cursor:pointer">
          <div class="flex-1">
            <div class="card__title">
              {{ pill(section.tiles | length, section.kind if section.kind != 'muted' else '') }}
              {{ section.label }}
            </div>
          </div>
          {{ icon('chevron-down', size=16) }}
        </summary>
        <div class="card__body">
          <div class="grid grid--tiles">
            {% for tile in section.tiles %}
              {# Kopf zuerst Kennzeichen, dann Name: das Auge findet die Kachel
                 über Farbe und Symbol, den genauen Namen liest es danach.
                 Die IP steht gross darunter statt in der Merkmalliste -- sie ist
                 die Angabe, nach der man auf dieser Seite tatsächlich sucht. #}
              <article class="tile tile--{{ tile.state }}" data-filter-item
                       data-filter-text="{{ tile.name }} {{ tile.get('ip','') }} {{ tile.get('switch','') }} {{ tile.location }}">
                <div class="tile__head">
                  <span class="tile__badge" aria-hidden="true">{{ icon('cpu', size=17) }}</span>
                  {% if tile.state == 'online' %}{{ pill('Online', 'online') }}
                  {% elif tile.state == 'restarting' %}{{ pill('Startet neu', 'warning') }}
                  {% elif tile.state == 'offline' %}{{ pill('Offline', 'offline') }}
                  {% elif tile.state == 'disabled' %}{{ pill('Deaktiviert', '') }}
                  {% else %}{{ pill('Unbekannt', 'warning') }}{% endif %}
                </div>
                <div class="tile__name truncate" title="{{ tile.name }}">{{ tile.name }}</div>
                {% if detailed %}<div class="tile__ip truncate">{{ tile.ip }}</div>{% endif %}
                {% if tile.location %}
                  <div class="tile__meta truncate">{{ icon('map-pin', size=12) }} {{ tile.location }}</div>
                {% endif %}
                {% if detailed %}
                  <dl class="kv fs-xs mt-3">
                    {% if tile.switch %}
                      <dt>Switch</dt><dd class="truncate">{{ tile.switch }} / {{ tile.port }}</dd>
                    {% endif %}
                    {% if tile.latency_ms %}
                      <dt>Antwortzeit</dt><dd>{{ tile.latency_ms | millis }}</dd>
                    {% endif %}
                    {% if tile.last_change_at %}
                      <dt>Seit</dt>
                      <dd><span data-relative-time="{{ tile.last_change_at }}">{{ tile.last_change_at | dt }}</span></dd>
                    {% endif %}
                  </dl>
                  <div class="row row--tight mt-3">
                    <a class="btn btn--sm btn--ghost" href="{{ url_for('devices.detail', device_id=tile.id) }}">
                      Details
                    </a>
                    {% if current_user.has('devices.write') and tile.state == 'disabled' %}
                      <form method="post" action="{{ url_for('devices.toggle_active', device_id=tile.id) }}"
                            data-no-guard>
                        <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
                        <input type="hidden" name="active" value="1">
                        <button class="btn btn--sm" type="submit">Aktivieren</button>
                      </form>
                    {% endif %}
                  </div>
                  {# Die beiden Eingriffe stehen unten und immer an derselben
                     Stelle: links der Bildschirm, rechts der Neustart. Wer
                     eine Reihe Kacheln abarbeitet, trifft denselben Knopf,
                     ohne hinzusehen -- und verwechselt ihn nicht mit dem
                     anderen. #}
                  {% if tile.vnc or tile.restart_methods %}
                    <div class="tile__actions">
                      {% if tile.vnc %}
                        {# Die Sitzung laeuft in TESM selbst: ein Klick, kein
                           Viewer auf dem Arbeitsplatz, keine Datei. #}
                        <a class="btn btn--sm" href="{{ url_for('screen.screen', device_id=tile.id) }}"
                           title="Bildschirm im Browser öffnen">
                          {{ icon('monitor', size=14) }} VNC
                        </a>
                      {% else %}
                        <span class="tile__spacer" aria-hidden="true"></span>
                      {% endif %}
                      {% if tile.restart_methods %}
                        {% set method = tile.restart_methods[0] %}
                        <form method="post" data-no-guard
                              action="{{ url_for('devices.restart_device', device_id=tile.id) }}">
                          <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
                          <input type="hidden" name="method" value="{{ method.key }}">
                          <button class="btn btn--sm" type="submit" title="{{ method.hint }}"
                                  data-busy-label="Startet ..."
                                  data-confirm="{{ tile.name }} über {{ method.label }} neu starten? {{ method.hint }}"
                                  data-confirm-title="Neustart" data-confirm-ok="Neu starten"
                                  data-confirm-style="primary">
                            {{ icon('power', size=14) }} {{ method.label }}
                          </button>
                        </form>
                      {% endif %}
                    </div>
                  {% endif %}
                {% endif %}
              </article>
            {% endfor %}
          </div>
        </div>
      </details>
    {% endif %}
  {% endfor %}

  {% if not sections | map(attribute='tiles') | select | list %}
    {{ empty_state('Keine Geräte erfasst',
                   'Legen Sie das erste Gerät unter Überwachung an.', 'cpu') }}
  {% endif %}
</div>
</div>