{% extends "django_program/manage/base.html" %}

{% block title %}Registration Flow{% endblock %}

{% block breadcrumb %}
<div class="breadcrumb">
  <a href="{% url 'manage:dashboard' conference.slug %}">Dashboard</a>
  <span class="breadcrumb-separator"></span>
  <a href="{% url 'manage:reports-dashboard' conference.slug %}">Reports</a>
  <span class="breadcrumb-separator"></span>
  Registration Flow
</div>
{% endblock %}

{% block page_title %}
<h1>Registration Flow</h1>
<p>Daily registrations and cancellations for {{ conference.name }}</p>
{% endblock %}

{% block page_actions %}
{% if perms.program_conference.export_reports %}
<a href="{% url 'manage:report-registration-flow-export' conference.slug %}?date_from={{ current_date_from }}&date_until={{ current_date_until }}" class="btn btn-secondary btn-sm">Export CSV</a>
{% endif %}
{% endblock %}

{% block content %}

{% include "django_program/manage/charts/_chart_utils.html" %}

<div style="margin-bottom: 1.5rem;">
  {% include "django_program/manage/charts/_registration_pulse.html" with chart_data=chart_flow_json %}
</div>

<div class="stat-grid">
  <div class="stat-card">
    <div class="stat-card-value">{{ total_registrations }}</div>
    <div class="stat-card-label">Total Registrations</div>
  </div>
  <div class="stat-card">
    <div class="stat-card-value">{{ total_cancellations }}</div>
    <div class="stat-card-label">Total Cancellations</div>
  </div>
</div>

<form method="get" class="filter-bar">
  <label for="date_from" style="font-size: 0.82rem; font-weight: 600; color: var(--color-text-secondary);">From</label>
  <input type="date" name="date_from" id="date_from" value="{{ current_date_from }}">
  <label for="date_until" style="font-size: 0.82rem; font-weight: 600; color: var(--color-text-secondary);">Until</label>
  <input type="date" name="date_until" id="date_until" value="{{ current_date_until }}">
  <button type="submit" class="btn btn-primary btn-sm">Filter</button>
  {% if current_date_from or current_date_until %}
  <a href="{% url 'manage:report-registration-flow' conference.slug %}" class="btn btn-sm btn-secondary">Clear</a>
  {% endif %}
</form>

{% if flow_rows %}
<table class="data-table" style="max-width: 700px;">
  <thead>
    <tr>
      <th>Date</th>
      <th style="text-align: right;">Registrations</th>
      <th style="text-align: right;">Cancellations</th>
      <th style="text-align: right;">Net</th>
    </tr>
  </thead>
  <tbody>
    {% for row in flow_rows %}
    <tr>
      <td>{{ row.date|date:"M j, Y" }}</td>
      <td style="text-align: right;" class="mono">{{ row.registrations }}</td>
      <td style="text-align: right;" class="mono">{{ row.cancellations }}</td>
      <td style="text-align: right;" class="mono">{{ row.net }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% else %}
<div class="empty-state">
  <p>No registration activity found for the selected date range.</p>
  {% if current_date_from or current_date_until %}
  <p><a href="{% url 'manage:report-registration-flow' conference.slug %}" class="btn btn-sm btn-secondary">Clear Filters</a></p>
  {% endif %}
</div>
{% endif %}

{% endblock %}