{% extends 'base.html' %}
{% block content %}
<div class="container mt-4" style="max-width: 900px;">
  <h4 class="mb-3">
    <i class="bi bi-calendar-event me-2"></i> Schedule Interview
  </h4>

  <!-- Header: candidate + requisition info -->
  <div class="card mb-3 shadow-sm">
    <div class="card-body">
      <div class="row g-2 align-items-center">
        <div class="col-md-6">
          <div class="fw-semibold">
            Candidate:
            <span class="text-primary">{{ app.candidate.full_name }}</span>
          </div>
          <div class="small text-muted">
            {{ app.candidate.email }}{% if app.candidate.phone %} • {{ app.candidate.phone }}{% endif %}
          </div>
        </div>
        <div class="col-md-6 text-md-end">
          <div class="fw-semibold">
            Requisition:
            <span class="text-primary">
              {{ app.requisition.code or ('REQ-' ~ app.requisition.id) }}
            </span>
          </div>
          <div class="small text-muted">
            {{ app.requisition.designation.name if app.requisition.designation else '' }}
            {% if app.requisition.department %} • {{ app.requisition.department.name }}{% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Schedule form -->
  <form method="POST" class="card shadow-sm">
    <div class="card-body">
      {{ csrf_token() if csrf_token is defined }}
      <div class="row g-3">
        <div class="col-md-6">
          <label class="form-label fw-semibold">Interview Stage</label>
          <select name="stage_id" class="form-select" required>
            <option value="">-- Select Stage --</option>
            {% for s in stages %}
            <option value="{{ s.id }}"
                    {% if app.current_stage_id == s.id %}selected{% endif %}>
              {{ s.order }}. {{ s.name }}
              {% if s.is_final %}(Final){% endif %}
            </option>
            {% endfor %}
          </select>
        </div>

        <div class="col-md-6">
          <label class="form-label fw-semibold">Interviewer</label>
          <select name="interviewer_id" class="form-select" required>
            <option value="">-- Select Interviewer --</option>
            {% for emp in interviewers %}
            <option value="{{ emp.id }}">
              {{ emp.full_name }}{% if emp.department %} ({{ emp.department.name }}){% endif %}
            </option>
            {% endfor %}
          </select>
        </div>

        <div class="col-md-6">
          <label class="form-label fw-semibold">Scheduled Date & Time</label>
          <input type="datetime-local" name="scheduled_at" class="form-control">
          <div class="form-text small text-muted">
            Optional – can be left blank if not fixed yet.
          </div>
        </div>

        <div class="col-md-3">
          <label class="form-label fw-semibold">Mode</label>
          <select name="mode" class="form-select">
            <option value="">-- Select --</option>
            <option>Online</option>
            <option>In Person</option>
            <option>Phone</option>
          </select>
        </div>

        <div class="col-md-3">
          <label class="form-label fw-semibold">Location / Link</label>
          <input type="text" name="location" class="form-control"
                 placeholder="Meeting room / MS Teams / Zoom link">
        </div>
      </div>
    </div>
    <div class="card-footer d-flex justify-content-end gap-2">
      <a href="{{ url_for('recruitment.view_application', app_id=app.id) }}"
         class="btn btn-outline-secondary btn-sm">
        Cancel
      </a>
      <button type="submit" class="btn btn-primary btn-sm">
        <i class="bi bi-calendar-check me-1"></i> Schedule
      </button>
    </div>
  </form>
</div>
{% endblock %}