{% extends 'base.html' %}

{% block breadcrumbs %}
<nav aria-label="breadcrumb">
  <ol class="breadcrumb mb-0">
    <li class="breadcrumb-item"><a href="/">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">{{ page.title }}</li>
  </ol>
</nav>
{% endblock %}

{% block main %}
<div class="container my-4">
  <div class="row align-items-center g-3 mb-4">
    <div class="col-md-5">
      <div class="section-label mb-1">operator</div>
      <h1 class="fw-bolder text-white mb-0" style="letter-spacing: -0.01em;">{{ page.title }}</h1>
      <p class="text-muted mb-0 small mt-1">Every site you're collecting events from, event totals, and seven-day activity state.</p>
    </div>
    <div class="col-md-7">
      <div class="dashboard-toolbar">
        <form method="get" class="search-form flex-grow-1">
          <span class="search-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
            </svg>
          </span>
          <input type="text" class="form-control search-input" name="q" id="id_search" placeholder="grep properties..." {% if q %}value="{{ q }}"{% endif %} />
        </form>
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePropertyAdd" aria-expanded="false" aria-controls="collapsePropertyAdd" onclick="window.collectorQueue && collectorQueue.push({event: 'add_property_toggle'})">
          + new
        </button>
      </div>
    </div>
  </div>

  <div class="collapse mb-4" id="collapsePropertyAdd">
    <div class="bg-surface border-subtle rounded border p-3">
      <div class="section-label mb-2">register property</div>
      <p class="text-muted small mb-3">Give it any friendly name. You'll get a collector ID to embed right after you save.</p>
      <form method="POST" action="/properties" class="dashboard-toolbar">
        <input type="text" name="name" id="id_name" class="form-control flex-grow-1" placeholder="e.g. marketing-site" required>
        <button type="submit" class="btn btn-primary">Add →</button>
      </form>
    </div>
  </div>

  <div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
      <div class="metric-tile metric-accent-green">
        <div class="metric-label">total properties</div>
        <div class="metric-value">{{ totals.properties }}</div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="metric-tile metric-accent-green">
        <div class="metric-label">total events</div>
        <div class="metric-value">{{ totals.events }}</div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="metric-tile metric-accent-green">
        <div class="metric-label">page views</div>
        <div class="metric-value">{{ totals.page_views }}</div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="metric-tile metric-accent-amber">
        <div class="metric-label">sessions</div>
        <div class="metric-value">{{ totals.sessions }}</div>
      </div>
    </div>
  </div>

  <div class="section-label mb-2">registered properties</div>
  {% for property in properties %}
    <div class="property-row {% if not property.is_active %}is-quiet{% endif %}">
      <div class="pr-main">
        <div class="pr-title">
          <span class="status-dot {% if property.is_active %}is-up{% else %}is-idle{% endif %}" aria-hidden="true"></span>
          <a href="/{{ property.id }}" class="text-truncate" onclick="window.collectorQueue && collectorQueue.push({event: 'view_property'})">{{ property.name }}</a>
        </div>
        <div class="pr-id"><span class="pr-id-k">id</span>{{ property.id }}</div>
      </div>
      <div class="pr-side">
        <div class="pr-meta">
          <div class="pr-meta-cell">
            <span class="pr-meta-k">state</span>
            <span class="pr-meta-v {% if property.is_active %}text-green{% else %}text-muted{% endif %}">{% if property.is_active %}live{% else %}quiet{% endif %}</span>
          </div>
          <div class="pr-meta-cell">
            <span class="pr-meta-k">events</span>
            <span class="pr-meta-v">{{ property.total_events }}</span>
          </div>
          <div class="pr-meta-cell">
            <span class="pr-meta-k">views</span>
            <span class="pr-meta-v">{{ property.total_page_views }}</span>
          </div>
          <div class="pr-meta-cell">
            <span class="pr-meta-k">sessions</span>
            <span class="pr-meta-v">{{ property.total_session_starts }}</span>
          </div>
        </div>
        <div class="pr-actions">
          {% if not property.is_protected %}
          <button type="button" class="btn btn-sm btn-outline-danger" data-bs-toggle="modal" data-bs-target="#delete-modal-{{ property.id }}">
            Delete
          </button>
          <div class="modal fade" id="delete-modal-{{ property.id }}" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title text-white">Confirm delete</h5>
                  <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  Are you sure you want to delete <strong class="text-white">{{ property.name }}</strong>? All collected events will be removed.
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">Cancel</button>
                  <form method="post" action="/properties/{{ property.id }}/delete" class="d-inline">
                    <button type="submit" class="btn btn-outline-danger">Delete</button>
                  </form>
                </div>
              </div>
            </div>
          </div>
          {% endif %}
          <a href="/{{ property.id }}" class="btn btn-sm btn-outline-light">View →</a>
        </div>
      </div>
    </div>
  {% else %}
    <div class="text-center py-5 text-muted">
      <div class="section-label mb-3" style="justify-content:center;">no properties yet</div>
      <p class="mb-0 small">Click <strong>+ new</strong> above to register your first site.</p>
    </div>
  {% endfor %}
</div>
{% endblock %}