{% extends "base.html" %}
{% block title %}People · AI Camera{% endblock %}
{% block content %}
  <h1>People</h1>
  <p class="lead">Registered people and how many face profiles each one has.</p>
  <p id="job-note" class="muted"></p>
  {% if not db_online %}
    <div class="banner">MySQL is not connected. Start MySQL in XAMPP, then reload this page.</div>
  {% elif not people %}
    <p class="muted">No one is registered yet.</p>
  {% else %}
    <div class="card">
      {% for person in people %}
        <div class="person-row">
          <strong class="grow">{{ person.name }}</strong>
          <span class="muted">{{ person.department or "No department" }}</span>
          <span class="{{ 'bad' if person.status == 'Wanted' else 'ok' }}">{{ person.status }}</span>
          <span class="muted">{{ person.encodings }} profiles</span>
          <button class="btn train-btn" type="button"
            data-name="{{ person.name }}"
            data-department="{{ person.department }}"
            data-status="{{ person.status }}">Train</button>
        </div>
      {% endfor %}
    </div>
  {% endif %}
{% endblock %}
{% block scripts %}
<script>
const note = document.getElementById("job-note");
const bar = document.getElementById("status-bar");
let watching = false;

async function watchJob() {
  const response = await fetch("/api/status");
  const data = await response.json();
  const job = data.job || {};
  if (job.phase === "training") {
    note.textContent = job.message;
    bar.textContent = job.message;
    return;
  }
  if (watching && (job.phase === "done" || job.phase === "error")) {
    note.textContent = job.message;
    bar.textContent = job.message;
    watching = false;
    setTimeout(() => window.location.reload(), 600);
  }
}

document.querySelectorAll(".train-btn").forEach((button) => {
  button.addEventListener("click", async () => {
    const body = new FormData();
    body.set("name", button.dataset.name);
    body.set("department", button.dataset.department || "");
    body.set("status", button.dataset.status || "Normal");
    button.disabled = true;
    const response = await fetch("/people/train", { method: "POST", body });
    const data = await response.json();
    note.textContent = data.message || (data.job && data.job.message) || "";
    if (response.ok) {
      watching = true;
    } else {
      button.disabled = false;
    }
  });
});

setInterval(watchJob, 1500);
</script>
{% endblock %}