{% extends "pobsync_backend/base.html" %}

{% block title %}Self Check | pobsync{% endblock %}

{% block content %}
  <header class="page-header">
    <div class="page-title">
      <div class="page-kicker">Operations</div>
      <h1>Self Check</h1>
      <div class="page-subtitle">Runtime, filesystem, service, and configuration checks for this pobsync installation.</div>
    </div>
    <section class="actions" aria-label="Self check actions">
      <a class="button-link secondary" href="{% url 'dashboard' %}">Back to dashboard</a>
    </section>
  </header>

  <section class="grid" aria-label="Self check summary">
    <div class="metric"><div class="label">OK</div><div class="value">{{ summary.ok }}</div></div>
    <div class="metric"><div class="label">Warnings</div><div class="value">{{ summary.warning }}</div></div>
    <div class="metric"><div class="label">Failed</div><div class="value">{{ summary.failed }}</div></div>
    <div class="metric"><div class="label">Skipped</div><div class="value">{{ summary.skipped }}</div></div>
  </section>

  <section class="panel">
    <h2>Checks</h2>
    <table>
      <thead>
        <tr>
          <th>Status</th>
          <th>Check</th>
          <th>Message</th>
          <th>Detail</th>
        </tr>
      </thead>
      <tbody>
        {% for check in checks %}
          <tr>
            <td><span class="status {{ check.status }}">{{ check.status }}</span></td>
            <td>{{ check.name }}</td>
            <td>{{ check.message }}</td>
            <td class="muted">{{ check.detail }}</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </section>
{% endblock %}