{% extends "base.html" %}
{% block title %}Uptime Monitors - DevPlace{% endblock %}
{% block extra_head %}
<style>
:root {
  --monitor-up: #22c55e;
  --monitor-down: #ef4444;
  --monitor-unknown: #6b7280;
}
.monitor-card {
  background: var(--card-bg, #1e1e2e);
  border: 1px solid var(--border, #313244);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.75rem;
}
.monitor-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.monitor-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.monitor-status-dot.up { background: var(--monitor-up); }
.monitor-status-dot.down { background: var(--monitor-down); }
.monitor-status-dot.unknown { background: var(--monitor-unknown); }
.monitor-name {
  font-weight: 600;
  flex: 1;
}
.monitor-type {
  font-size: 0.8rem;
  color: var(--text-muted, #a6adc8);
  background: var(--bg-muted, #181825);
  padding: 2px 8px;
  border-radius: 4px;
}
.monitor-target {
  font-family: monospace;
  font-size: 0.85rem;
  color: var(--text-muted, #a6adc8);
  word-break: break-all;
  margin-top: 0.25rem;
}
.monitor-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
@media (max-width: 640px) {
  .monitor-header { flex-wrap: wrap; }
}
</style>
{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto px-4 py-6">
  <div class="flex items-center justify-between mb-6">
    <h1 class="text-2xl font-bold">Uptime Monitors</h1>
    <a href="/monitors/checks/new" class="btn btn-primary">+ New Check</a>
  </div>

  {% if checks %}
    {% for check in checks %}
    <div class="monitor-card">
      <div class="monitor-header">
        <span class="monitor-status-dot {{ check.get('status', 'unknown') }}"></span>
        <span class="monitor-name">{{ check.name }}</span>
        <span class="monitor-type">{{ check.check_type }}</span>
      </div>
      <div class="monitor-target">{{ check.target }}</div>
      <div class="monitor-meta text-sm text-muted mt-1">
        Every {{ check.interval_seconds }}s ·
        {{ check.get('items_count', 0) }} item(s)
      </div>
      <div class="monitor-actions">
        <a href="/monitors/checks/{{ check.uid }}" class="btn btn-sm">View</a>
        <form method="POST" action="/monitors/checks/{{ check.uid }}/toggle" style="display:inline">
          <button type="submit" class="btn btn-sm">
            {{ 'Disable' if check.get('enabled', 1) else 'Enable' }}
          </button>
        </form>
      </div>
    </div>
    {% endfor %}
  {% else %}
    <p class="text-center text-muted py-8">No monitor checks yet. Create your first one!</p>
  {% endif %}
</div>
{% endblock %}