{% extends "base.html" %}
{% block title %}{{ check.name }} - Monitors - DevPlace{% endblock %}
{% block extra_head %}
<style>
.metrics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.metrics-table th, .metrics-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border, #313244);
}
.metrics-table th {
  font-weight: 600;
  color: var(--text-muted, #a6adc8);
}
</style>
{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto px-4 py-6">
  <nav class="text-sm text-muted mb-4">
    <a href="/monitors/checks">&larr; Back to monitors</a>
  </nav>

  <h1 class="text-2xl font-bold mb-2">{{ check.name }}</h1>
  <div class="flex gap-2 mb-4">
    <span class="monitor-type badge">{{ check.check_type }}</span>
    <span class="badge {{ 'badge-success' if check.get('enabled', 1) else 'badge-error' }}">
      {{ 'Enabled' if check.get('enabled', 1) else 'Disabled' }}
    </span>
  </div>

  <div class="card mb-6">
    <div class="card-body">
      <dl class="grid grid-cols-2 gap-4">
        <div><dt class="text-sm text-muted">Target</dt><dd class="font-mono">{{ check.target }}</dd></div>
        <div><dt class="text-sm text-muted">Interval</dt><dd>Every {{ check.interval_seconds }}s</dd></div>
        <div><dt class="text-sm text-muted">Created</dt><dd>{{ check.created_at[:10] if check.created_at else 'N/A' }}</dd></div>
        <div><dt class="text-sm text-muted">Items</dt><dd>{{ check.get('items', [])|length }}</dd></div>
      </dl>
    </div>
  </div>

  {% if check.get('items') %}
  <h2 class="text-xl font-semibold mb-3">Check Items</h2>
  {% for item in check['items'] %}
  <div class="card mb-3">
    <div class="card-body">
      <div class="flex items-center gap-3">
        <span>{{ item.target }}</span>
        <span class="text-sm text-muted">{{ item.check_type }}</span>
        {% if item.port %}<span class="text-sm text-muted">:{{ item.port }}</span>{% endif %}
      </div>
    </div>
  </div>
  {% endfor %}
  {% endif %}

  {% if check.get('items') %}
  <h2 class="text-xl font-semibold mb-3 mt-6">Recent Metrics</h2>
  <div class="overflow-x-auto">
    <table class="metrics-table">
      <thead>
        <tr><th>Time</th><th>Status</th><th>Latency</th><th>Code</th></tr>
      </thead>
      <tbody>
      {% set item = check['items'][0] %}
      {% for m in item.get('_metrics', []) %}
        <tr>
          <td>{{ m.timestamp[:19] if m.timestamp else '?' }}</td>
          <td>{{ m.status }}</td>
          <td>{{ '%.1f'|format(m.latency_ms|float) }}ms</td>
          <td>{{ m.status_code }}</td>
        </tr>
      {% else %}
        <tr><td colspan="4" class="text-center text-muted py-4">No metrics yet</td></tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
  {% endif %}
</div>
{% endblock %}