{% extends "base.html" %}
{% block content %}
<h2>Mentor pool</h2>
<div class="mb-3">
  <form method="post" class="d-inline">
    <input type="hidden" name="action" value="activate_all">
    <button class="btn btn-sm btn-outline-secondary">Mark all active</button>
  </form>
  <form method="post" class="d-inline ms-2">
    <input type="hidden" name="action" value="deactivate_all">
    <button class="btn btn-sm btn-outline-secondary">Mark all inactive</button>
  </form>
  <a href="{{ url_for('main.mentor_pool_export_csv', include_archived=('1' if show_archived else None)) }}" class="btn btn-sm btn-outline-primary ms-2">Export as CSV</a>
  <form method="get" class="d-inline ms-3">
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" id="showArchivedMentors" name="show_archived" value="1" {% if show_archived %}checked{% endif %} onchange="this.form.submit()">
      <label class="form-check-label" for="showArchivedMentors">Show archived</label>
    </div>
  </form>
</div>
<form method="post">
  <input type="hidden" name="action" value="save">
  <input type="hidden" name="mentor_id" id="deleteMentorId" value="">
  <input type="hidden" name="bulk_query" id="mentorBulkQuery" value="">
  <input type="hidden" name="show_archived" value="{{ '1' if show_archived else '' }}">
  <input type="hidden" name="show_archived" value="{% if show_archived %}1{% endif %}">
<div class="row g-2 align-items-end mb-2">
  <div class="col-md-9">
    <label class="form-label small mb-1">Search mentors...</label>
    <input type="text" class="form-control form-control-sm table-search-input" id="mentorSearch" placeholder="Search mentors..." data-target-table-id="mentor-pool-table">
  </div>
  <div class="col-md-3 text-end">
    <button type="submit" name="action" value="bulk_archive_filtered" class="btn btn-sm btn-outline-secondary"
      onclick="document.getElementById('mentorBulkQuery').value=document.getElementById('mentorSearch').value || ''; return confirm('Archive all filtered mentors? Only inactive mentors with no assignments will be archived.');">
      Archive filtered
    </button>
    {% if show_archived %}
      <button type="submit" name="action" value="bulk_restore_filtered" class="btn btn-sm btn-outline-success ms-1"
        onclick="document.getElementById('mentorBulkQuery').value=document.getElementById('mentorSearch').value || ''; return confirm('Restore all filtered mentors?');">
        Restore filtered
      </button>
    {% endif %}
  </div>
</div>
<div class="table-responsive" style="max-height: 600px; overflow-y: auto; overflow-x: auto;">
    <table id="mentor-pool-table" class="table table-sm table-bordered align-middle sortable">
      <thead class="table-light">
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Application Date</th>
          <th>Email</th>
          <th>CUNY ID</th>
          <th>Phone</th>
          <th>GPA</th>
          <th>Identity</th>
          <th>Gender</th>
          <th>I am interested in</th>
          <th>Major</th>
          <th>Hobbies/Interests</th>
          <th>Strengths</th>
          <th>Status</th>
          <th>Work-study</th>
          <th>Capacity</th>
          <th>Active?</th>
          <th>Notes</th>
          {% if show_archived %}
            <th>Archived?</th>
            <th>Archived by</th>
            <th>Archived on</th>
          {% endif %}
          <th>Archive / Delete</th>
        </tr>
      </thead>
      <tbody>
        {% for m in mentors %}
        <tr>
          <td><input type="text" name="m_{{m.id}}_first_name" value="{{ m.first_name }}" class="form-control form-control-sm" style="min-width: 140px;"></td>
          <td><input type="text" name="m_{{m.id}}_last_name" value="{{ m.last_name }}" class="form-control form-control-sm" style="min-width: 140px;"></td>
          <td style="min-width: 120px; white-space: nowrap;">{% if m.application_date %}{{ m.application_date }}{% else %}<span class="text-muted">—</span>{% endif %}</td>
          <td><input type="text" name="m_{{m.id}}_email" value="{{ m.email }}" class="form-control form-control-sm" style="min-width: 220px;"></td>
          <td><input type="text" name="m_{{m.id}}_cuny" value="{{ m.cuny }}" class="form-control form-control-sm" style="min-width: 140px;"></td>
          <td><input type="text" name="m_{{m.id}}_phone" value="{{ m.phone }}" class="form-control form-control-sm" style="min-width: 140px;"></td>
          <td><input type="text" name="m_{{m.id}}_gpa" value="{{ m.gpa }}" class="form-control form-control-sm" style="min-width: 80px;"></td>
          <td>{{ m.identity }}</td>
          <td>{{ m.gender }}</td>
          <td>{{ m.interests }}</td>
          <td><input type="text" name="m_{{m.id}}_major" value="{{ m.major or '' }}" class="form-control form-control-sm" style="min-width: 160px;"></td>
          <td style="min-width: 260px; white-space: pre-wrap;">{{ m.hobbies_interests }}</td>
          <td style="min-width: 260px; white-space: pre-wrap;">{{ m.strengths }}{% if m.strengths_other %} ; {{ m.strengths_other }}{% endif %}</td>
          <td>
            <div class="d-flex align-items-center">
              <select name="m_{{m.id}}_status" class="form-select form-select-sm mentor-status" style="min-width: 140px;">
                {% for status in all_statuses %}
                  <option value="{{ status }}" {% if status == m.status %}selected{% endif %}>{{ status }}</option>
                {% endfor %}
              </select>
              <button type="button" class="btn btn-sm btn-link p-0 ms-1" onclick="fillDownSelect('mentor-status', {{ loop.index0 }})" title="Fill status down">↓</button>
            </div>
          </td>
          <td><input type="text" name="m_{{m.id}}_work_study" value="{{ m.work_study }}" class="form-control form-control-sm" style="min-width: 140px;"></td>
          <td><input type="number" name="m_{{m.id}}_capacity" value="{{ m.capacity }}" class="form-control form-control-sm" min="1" style="min-width: 90px;"></td>
          <td class="text-center">
            <div class="d-flex justify-content-center align-items-center">
              <input type="checkbox" name="m_{{m.id}}_is_active" value="1" class="form-check-input mentor-active" {% if m.is_active %}checked{% endif %}>
              <button type="button" class="btn btn-sm btn-link p-0 ms-1" onclick="fillDownCheckbox('mentor-active', {{ loop.index0 }})" title="Fill active down">↓</button>
            </div>
          </td>
          <td><input type="text" name="m_{{m.id}}_notes" value="{{ m.notes }}" class="form-control form-control-sm" style="min-width: 220px;"></td>
          {% if show_archived %}
            <td class="text-center">
              {% if m.is_archived %}<span class="badge text-bg-secondary">Archived</span>{% else %}<span class="text-muted">—</span>{% endif %}
            </td>
            <td style="min-width: 140px;">{% if m.is_archived %}{{ m.archived_by }}{% else %}<span class="text-muted">—</span>{% endif %}</td>
            <td style="min-width: 170px;">{% if m.is_archived %}{{ m.archived_on }}{% else %}<span class="text-muted">—</span>{% endif %}</td>
          {% endif %}
          <td class="text-center" style="min-width: 110px;">
            {% if not m.is_archived %}
              <button type="submit" name="action" value="archive_mentor" class="btn btn-sm btn-outline-secondary" title="Archive mentor"
                onclick="document.getElementById('deleteMentorId').value='{{ m.id }}'; return confirm('Archive this mentor? They will be removed from operational views but retained for history.');">📦</button>
            {% else %}
              <button type="submit" name="action" value="restore_mentor" class="btn btn-sm btn-outline-success" title="Restore mentor"
                onclick="document.getElementById('deleteMentorId').value='{{ m.id }}'; return confirm('Restore this mentor to the active pool?');">↩</button>
              <button type="submit" name="action" value="hard_delete_mentor" class="btn btn-sm btn-outline-danger ms-1" title="Permanently delete mentor"
                onclick="document.getElementById('deleteMentorId').value='{{ m.id }}'; return confirm('Permanently delete this archived mentor? This cannot be undone.');">🗑</button>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  <div class="mt-2">
    <button class="btn btn-primary btn-sm">Save mentors</button>
  </div>
</form>

<script>
  // Prevent Enter key in the search box from submitting the form (which could trigger bulk actions)
  (function(){
    const search = document.getElementById('mentorSearch');
    if (!search) return;
    search.addEventListener('keydown', function(ev){
      if (ev.key === 'Enter') { ev.preventDefault(); }
    });
  })();
</script>
{% endblock %}