{% extends "base.html" %}
{% block content %}
<h2>Mentor utilization</h2>

<div class="alert alert-info py-2">
  <div><strong>Program-wide unmet mentee needs (active assignments)</strong></div>
  {% if overall_unmet_total and overall_unmet_total > 0 %}
    <div class="small text-muted mb-1">Count reflects how many times a mentee need is not covered by the assigned mentor’s stated strengths.</div>
    <div>{{ overall_unmet_display }}</div>
  {% else %}
    <div class="small text-muted">No unmet needs detected across active assignments (based on mentee needs vs. mentor strengths).</div>
  {% endif %}
</div>


<div class="d-flex justify-content-end mb-2">
  <input type="text" class="form-control form-control-sm table-search-input" placeholder="Search mentors..." data-target-table-id="utilization-table">
</div>
<div class="table-responsive" style="max-height: 600px; overflow-y: auto;">
  <table id="utilization-table" class="table table-sm table-bordered align-middle sortable">
    <thead class="table-light">
      <tr>
        <th>Mentor</th>
        <th>Capacity</th>
        <th>Assigned mentees</th>
        <th>Unmet mentee needs (count)</th>
        <th>Unmet mentee needs (by area)</th>
      </tr>
    </thead>
    <tbody>
      {% for row in usage %}
      <tr>
        <td>{{ row.label }}</td>
        <td>{{ row.capacity }}</td>
        <td>{{ row.used }}</td>
        <td>{{ row.unmet_total }}</td>
        <td style="min-width: 260px;">{{ row.unmet_needs }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}