{% extends "base.html" %} {% block title %}State Backend — Rustvello Monitor{%
endblock %} {% block content %}
<div class="container-fluid">
  <!-- Page Header -->
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="h4 mb-0 text-primary">
      <span class="material-icons align-middle me-2" style="font-size: 28px"
        >storage</span
      >
      State Backend
    </h2>
  </div>

  <!-- Type Banner -->
  <div class="info-card mb-4">
    <h6 class="section-title">State Backend Type</h6>
    <p class="mb-0 fw-semibold">
      <span class="badge bg-primary fs-6">{{ backend_name }}</span>
      <span class="text-muted small ms-2">implementation</span>
    </p>
  </div>

  <div class="row g-3">
    <!-- Usage Stats -->
    <div class="col-md-6">
      <div class="metric-card h-100">
        <h6 class="section-title">Current Usage</h6>
        {% if usage_stats.is_empty() %}
        <p class="text-muted small mb-0">No statistics available.</p>
        {% else %}
        <div class="metric-grid">
          {% for (label, value) in usage_stats %}
          <div class="metric-item">
            <span class="metric-label">{{ label }}</span>
            <span class="badge bg-info">{{ value }}</span>
          </div>
          {% endfor %}
        </div>
        {% endif %}
      </div>
    </div>

    <!-- About -->
    <div class="col-md-6">
      <div class="metric-card h-100">
        <h6 class="section-title">About This Backend</h6>
        <div class="metric-grid">
          <div class="metric-item">
            <span class="metric-label">Application</span>
            <span class="badge bg-info">{{ app_id }}</span>
          </div>
          <div class="metric-item">
            <span class="metric-label">Implementation</span>
            <span class="badge bg-primary">{{ backend_name }}</span>
          </div>
        </div>
        <p class="text-muted small mt-3 mb-0">
          The state backend is the authoritative source for invocation history,
          results, and runner contexts. The orchestrator manages live status;
          the state backend preserves the full lifecycle record.
        </p>
      </div>
    </div>
  </div>

  <!-- Danger Zone -->
  <div class="row mt-4">
    <div class="col-12">
      <div class="card border-danger">
        <div class="card-header text-danger">
          <span class="material-icons align-middle me-1" style="font-size: 18px"
            >warning</span
          >
          Danger Zone
        </div>
        <div class="card-body">
          <p class="text-muted small mb-2">
            Permanently delete all invocation records, history, results, and
            runner contexts.
          </p>
          <button
            class="btn btn-danger btn-sm"
            hx-post="/state-backend/purge"
            hx-confirm="This will purge all state data in the backend. This operation cannot be undone! Continue?"
            hx-swap="outerHTML"
          >
            <span
              class="material-icons align-middle me-1"
              style="font-size: 16px"
              >delete_forever</span
            >
            Purge State Backend
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}