{% extends "base.html" %}
{% block title %}Standup — {{ today }}{% endblock %}
{% block content %}
<h1>{{ today }}</h1>

<div class="section">
  <h2>Queue <span id="badge-pending" class="badge">{{ pending | length }}</span></h2>
  <div id="card-pending" class="card">
    {% for m in pending %}
    <div class="row">
      <div class="name">
        {{ m.name }}
        <div class="sub">
          {% if m.last_attended %}last on {{ m.last_attended }}{% else %}never attended{% endif %}
        </div>
      </div>
      <form action="/mark/{{ m.id }}" method="post">
        <button class="btn btn-green" type="submit">Done ✓</button>
      </form>
    </div>
    {% else %}
    <div class="row empty">Everyone has been on standup today.</div>
    {% endfor %}
  </div>
</div>

<div class="section">
  <h2>Done today <span id="badge-done" class="badge">{{ done | length }}</span></h2>
  <div id="card-done" class="card">
    {% for m in done %}
    <div class="row">
      <div class="name">{{ m.name }}</div>
      <form action="/unmark/{{ m.id }}" method="post">
        <button class="btn btn-slate" type="submit">Undo</button>
      </form>
    </div>
    {% else %}
    <div class="row empty">No one marked yet.</div>
    {% endfor %}
  </div>
</div>

<script>
  function pendingRow(m) {
    const sub = m.last_attended ? `last on ${m.last_attended}` : 'never attended';
    return `<div class="row">
      <div class="name">${m.name}<div class="sub">${sub}</div></div>
      <form action="/mark/${m.id}" method="post">
        <button class="btn btn-green" type="submit">Done ✓</button>
      </form>
    </div>`;
  }

  function doneRow(m) {
    return `<div class="row">
      <div class="name">${m.name}</div>
      <form action="/unmark/${m.id}" method="post">
        <button class="btn btn-slate" type="submit">Undo</button>
      </form>
    </div>`;
  }

  async function poll() {
    try {
      const data = await fetch('/api/today').then(r => r.json());

      document.getElementById('badge-pending').textContent = data.pending.length;
      document.getElementById('card-pending').innerHTML = data.pending.length
        ? data.pending.map(pendingRow).join('')
        : '<div class="row empty">Everyone has been on standup today.</div>';

      document.getElementById('badge-done').textContent = data.done.length;
      document.getElementById('card-done').innerHTML = data.done.length
        ? data.done.map(doneRow).join('')
        : '<div class="row empty">No one marked yet.</div>';
    } catch (_) {}
  }

  setInterval(poll, 10000);
</script>
{% endblock %}