{% extends 'base_dashboard.html' %}

{% block title %}Schedule your certification test{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-9">
    <h4 class="fw-bold mb-1">Schedule your test</h4>
    <p class="text-muted mb-4">{{ program.title }} — choose a TSN Digital Center or remote online</p>

    {% if application.schedule_slot %}
    <div class="alert alert-success border-0 small">
      Current booking: <strong>{{ application.testing_center.name }}</strong> —
      {{ application.schedule_slot.label }}
      <a href="#slots" class="ms-2">Change</a>
    </div>
    {% endif %}

    <div class="row g-4">
      {% if program.allow_center_exam %}
      <div class="col-12" id="slots">
        <div class="card border-0 shadow-sm rounded-4">
          <div class="card-body p-4">
            <h6 class="fw-bold mb-3"><i class="bi bi-building me-2"></i>Take exam at a testing center</h6>
            <p class="small text-muted">Visit a TSN Digital Center on your booked date. On-site staff will give you the unlock code.</p>

            {% if slots %}
            <div class="list-group list-group-flush">
              {% for slot in slots %}
              <form method="post" class="list-group-item px-0 d-flex flex-wrap justify-content-between align-items-center gap-2">
                {% csrf_token %}
                <input type="hidden" name="exam_mode" value="center">
                <input type="hidden" name="slot_id" value="{{ slot.pk }}">
                <div>
                  <div class="fw-semibold">{{ slot.center.name }} · {{ slot.center.city }}</div>
                  <div class="small text-muted">{{ slot.label }} · {{ slot.seats_available }} seat{{ slot.seats_available|pluralize }} left</div>
                  <div class="small text-muted">{{ slot.center.address }}</div>
                </div>
                <button class="btn btn-sm btn-primary">
                  {% if application.schedule_slot_id == slot.pk %}Keep this slot{% else %}Book this slot{% endif %}
                </button>
              </form>
              {% endfor %}
            </div>
            {% else %}
            <div class="alert alert-warning border-0 small mb-0">
              No upcoming slots available. Please check back later or contact the academy.
            </div>
            {% endif %}
          </div>
        </div>
      </div>
      {% endif %}

      {% if program.allow_remote_exam %}
      <div class="col-12">
        <div class="card border-0 shadow-sm rounded-4">
          <div class="card-body p-4">
            <h6 class="fw-bold mb-2"><i class="bi bi-camera-video me-2"></i>Take exam online (remote)</h6>
            <p class="small text-muted mb-3">Join a live video meeting with a teacher/consultant from home. They will share an unlock code.</p>
            <form method="post">
              {% csrf_token %}
              <input type="hidden" name="exam_mode" value="remote">
              <button class="btn btn-outline-primary">Choose remote online exam</button>
            </form>
          </div>
        </div>
      </div>
      {% endif %}
    </div>

    <a href="{% url 'certifications:my_certs' %}" class="btn btn-link mt-3">← Back</a>
  </div>
</div>
{% endblock %}