{% extends 'base.html' %}
{% block content %}
<div class="container mt-4" style="max-width: 900px;">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0">
      <i class="bi bi-diagram-3 me-2"></i>
      Interview Stages – {{ req.code or ('REQ-' ~ req.id) }}
    </h4>
    <a href="{{ url_for('recruitment.requisition_view', req_id=req.id) }}"
       class="btn btn-outline-secondary btn-sm">
      <i class="bi bi-arrow-left me-1"></i> Back to Requisition
    </a>
  </div>

  <div class="row g-3">
    <!-- Add / Edit form -->
    <div class="col-lg-4">
      <div class="card shadow-sm h-100">
        <div class="card-header bg-light fw-semibold">
          {% if edit_stage %}Edit Stage{% else %}Add Stage{% endif %}
        </div>
        <div class="card-body">
          <form method="POST" class="vstack gap-2">
            {{ csrf_token() if csrf_token is defined }}
            <input type="hidden" name="action" value="save">
            <input type="hidden" name="stage_id" value="{{ edit_stage.id if edit_stage else '' }}">

            <div>
              <label class="form-label fw-semibold">Stage Name<span class="text-danger">*</span></label>
              <input type="text"
                     name="name"
                     class="form-control form-control-sm"
                     value="{{ edit_stage.name if edit_stage else '' }}"
                     required>
            </div>

            <div>
              <label class="form-label fw-semibold">Order</label>
              <input type="number"
                     name="order"
                     class="form-control form-control-sm"
                     value="{{ edit_stage.order if edit_stage else (stages|length + 1) }}">
              <div class="form-text">Lower number = earlier stage.</div>
            </div>

            <div class="form-check mt-1">
              <input class="form-check-input"
                     type="checkbox"
                     name="is_final"
                     id="is_final"
                     {% if edit_stage and edit_stage.is_final %}checked{% endif %}>
              <label class="form-check-label small" for="is_final">
                Mark as final stage
              </label>
            </div>

            <div class="d-flex justify-content-between mt-3">
              {% if edit_stage %}
                <a href="{{ url_for('recruitment.manage_requisition_stages', req_id=req.id) }}"
                   class="btn btn-outline-secondary btn-sm">
                  Cancel
                </a>
                <button type="submit" class="btn btn-primary btn-sm">
                  <i class="bi bi-save me-1"></i> Update Stage
                </button>
              {% else %}
                <span></span>
                <button type="submit" class="btn btn-primary btn-sm">
                  <i class="bi bi-plus-lg me-1"></i> Add Stage
                </button>
              {% endif %}
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- Stage list -->
    <div class="col-lg-8">
      <div class="card shadow-sm h-100">
        <div class="card-header bg-light fw-semibold">
          Existing Stages
        </div>
        <div class="card-body p-0">
          <table class="table table-sm mb-0 align-middle">
            <thead class="table-light">
              <tr>
                <th style="width: 60px;">Order</th>
                <th>Name</th>
                <th style="width: 120px;">Final?</th>
                <th style="width: 140px;">Actions</th>
              </tr>
            </thead>
            <tbody>
            {% if stages %}
              {% for s in stages %}
              <tr>
                <td>{{ s.order }}</td>
                <td>{{ s.name }}</td>
                <td>
                  {% if s.is_final %}
                    <span class="badge bg-success">Yes</span>
                  {% else %}
                    <span class="badge bg-secondary">No</span>
                  {% endif %}
                </td>
                <td>
                  <div class="d-flex gap-1">
                    <a href="{{ url_for('recruitment.manage_requisition_stages', req_id=req.id, stage_id=s.id) }}"
                       class="btn btn-outline-primary btn-sm" title="Edit">
                      <i class="bi bi-pencil-square"></i>
                    </a>
                    <form method="POST"
                          onsubmit="return confirm('Delete this stage?');">
                      {{ csrf_token() if csrf_token is defined }}
                      <input type="hidden" name="action" value="delete">
                      <input type="hidden" name="stage_id" value="{{ s.id }}">
                      <button type="submit" class="btn btn-outline-danger btn-sm" title="Delete">
                        <i class="bi bi-trash"></i>
                      </button>
                    </form>
                  </div>
                </td>
              </tr>
              {% endfor %}
            {% else %}
              <tr>
                <td colspan="4" class="text-center text-muted py-3">
                  No stages defined yet. Use the form on the left to add one.
                </td>
              </tr>
            {% endif %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}