{% extends "base.html" %}
{% block title %}Enrollment Forms{% endblock %}

{# Admin inbox of enrollment submissions. Extends base.html so it picks up
   whichever design (classic / modern) the admin has selected. #}

{% block content %}
<div class="d-flex flex-wrap justify-content-between align-items-center mb-4 gap-2">
  <h2 class="mb-0"><i class="bi bi-clipboard-plus"></i> Enrollment Forms</h2>
  <div class="d-flex gap-2">
    <a href="{{ url_for('enrollment.form') }}" target="_blank"
       class="btn btn-outline-secondary" title="Open the public form in a new tab">
      <i class="bi bi-box-arrow-up-right"></i> View public form
    </a>
    {% if records %}
    <a href="{{ url_for('enrollment.admin_export_csv') }}" class="btn btn-outline-success">
      <i class="bi bi-file-earmark-spreadsheet"></i> Export CSV
    </a>
    {% endif %}
  </div>
</div>

<div class="alert alert-info d-flex align-items-start gap-2">
  <i class="bi bi-info-circle mt-1"></i>
  <div>
    Send customers this link to enroll:
    <code>{{ url_for('enrollment.form', _external=True) }}</code><br>
    <span class="small text-muted">
      Submissions are stored as JSON files on the server, outside the database —
      one file per form.
    </span>
  </div>
</div>

{% if records %}
<div class="card shadow-sm">
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-hover mb-0">
        <thead class="table-light">
          <tr>
            <th>Submitted</th>
            <th>Project</th>
            <th>Requested By</th>
            <th class="text-center">Users</th>
            <th class="text-center">Mobile App</th>
            <th>Status</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for r in records %}
          {# people_of() normalises both the current and the legacy stored shape #}
          {% set named = schema.people_of(r) %}
          {% set mobile_count = r.mobile_app.values() | select | list | length %}
          <tr>
            <td class="text-nowrap">
              <small>{{ r.submitted_at | replace('T', ' ') }}</small>
            </td>
            <td class="fw-semibold">{{ r.project_name or '—' }}</td>
            <td>{{ r.request_by or '—' }}</td>
            <td class="text-center">
              <span class="badge bg-secondary">{{ named | length }}</span>
            </td>
            <td class="text-center">
              {% if mobile_count %}
              <span class="badge bg-info text-dark">{{ mobile_count }}</span>
              {% else %}<span class="text-muted">—</span>{% endif %}
            </td>
            <td>
              <span class="badge bg-{{ 'success' if r.status == 'completed'
                                       else 'warning text-dark' if r.status == 'in_progress'
                                       else 'danger' }}">
                {{ schema.STATUS_LABELS.get(r.status, r.status) }}
              </span>
            </td>
            <td class="text-end text-nowrap">
              <a href="{{ url_for('enrollment.admin_detail', submission_id=r.id) }}"
                 class="btn btn-sm btn-outline-primary">
                <i class="bi bi-eye"></i> Open
              </a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% else %}
<div class="card shadow-sm">
  <div class="card-body text-center py-5 text-muted">
    <i class="bi bi-inbox fs-2 d-block mb-2"></i>
    No enrollment forms have been submitted yet.
  </div>
</div>
{% endif %}
{% endblock %}