{% extends "layout.html" %}
{% block title %}My Leads{% endblock %}
{% block content %}
<header class="page-banner mb-5">
  <p class="eyebrow">CRM portfolio</p>
  <h1>My Leads</h1>
  <p class="sub">Schools assigned to you and waiting for action. {{ total_items }} total lead{{ "" if total_items == 1 else "s" }} in your portfolio.</p>
</header>

<div class="kpis">
  <div class="kpi"><span>Assigned</span><b>{{ total_items|num }}</b></div>
  <div class="kpi"><span>Active</span><b>{{ active_items|num }}</b></div>
  <div class="kpi"><span>Due today</span><b>{{ due_today|num }}</b></div>
  <div class="kpi bad"><span>Overdue</span><b>{{ overdue|num }}</b></div>
  <div class="kpi good"><span>Won</span><b>{{ won_count|num }}</b></div>
</div>

{% if not my_leads %}
  <section class="panel">
    <p class="mute" style="margin:0">No leads are assigned to you right now. Assign one from the school list or pick a school and update the lead owner.</p>
  </section>
{% else %}
<section class="panel">
  <h2>Lead list</h2>
  <div class="tw">
    <table>
      <thead>
        <tr>
          <th>School</th>
          <th>Municipality</th>
          <th>Stage</th>
          <th>Priority</th>
          <th>Next follow-up</th>
          <th>Next action</th>
        </tr>
      </thead>
      <tbody>
        {% for l in my_leads %}
        <tr class="lead-row" data-href="{{ url('school_crm', kwargs={'org_id': l.school.organization_id}) }}" tabindex="0" aria-label="Open CRM page for {{ l.school.name }}">
          <td><a href="{{ url('school_crm', kwargs={'org_id': l.school.organization_id}) }}">{{ l.school.name }}</a></td>
          <td>{{ l.school.municipality }}</td>
          <td><span class="pill st-{{ l.stage }}">{{ STAGE_LABELS[l.stage] }}</span></td>
          <td><span class="pill pr-{{ l.priority or '' }}">{{ PRIORITY_LABELS.get(l.priority or '', '-') }}</span></td>
          <td class="due {{ 'late' if l.next_followup and l.next_followup < today }}">{{ l.next_followup|dt if l.next_followup else '—' }}</td>
          <td class="wrapcell">{{ l.next_action or 'No next action yet' }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</section>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
  document.querySelectorAll(".lead-row[data-href]").forEach((row) => {
    row.addEventListener("click", (event) => {
      if (event.target.closest("a, button, form, input, select, textarea")) return;
      window.location.href = row.dataset.href;
    });
    row.addEventListener("keydown", (event) => {
      if (event.target !== row || (event.key !== "Enter" && event.key !== " ")) return;
      event.preventDefault();
      window.location.href = row.dataset.href;
    });
  });
</script>
{% endblock %}