{% extends "base.html" %}
{% block content %}
<div class="max-w-4xl mx-auto py-10 px-4">

  <div class="flex items-center justify-between mb-8">
    <div>
      <h1 class="text-3xl font-bold">Alert Dashboard</h1>
      <span class="text-sm text-gray-400">Django LiveView</span>
    </div>
    <span id="ws-status" class="text-xs px-2 py-1 rounded bg-yellow-100 text-yellow-700">
      connecting...
    </span>
  </div>

  <div class="flex items-center gap-6 mb-6">
    <div class="bg-white rounded-lg shadow px-6 py-4">
      <div class="text-sm text-gray-500">Total alerts</div>
      <div class="text-3xl font-bold" id="alert-count">{{ count }}</div>
    </div>
  </div>

  <div class="flex gap-4 mb-6">
    <button
      id="add-alert-btn"
      data-liveview-function="add_alert"
      data-action="click->page#run"
      class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-5 py-2 rounded-lg transition-colors">
      + Add Alert
    </button>
    <input
      id="search-input"
      name="query"
      type="text"
      placeholder="Filter alerts..."
      data-liveview-function="search_alerts"
      data-liveview-debounce="0"
      data-action="input->page#run change->page#run"
      class="flex-1 border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400">
  </div>

  <div class="bg-white rounded-lg shadow overflow-hidden" id="alerts-container">
    {% include "components/_alerts_table.html" %}
  </div>

</div>
{% endblock %}