{% extends "base.html" %}
{% block title %}To-Do — POPS{% endblock %}

{% block content %}
<div class="d-flex align-items-center justify-content-between mb-4">
  <h5 class="text-white mb-0">To-Do</h5>
</div>

{# ── Add task ── #}
<form method="POST" action="/todos" class="mb-3 d-flex gap-2" style="max-width:480px">
  <input type="text" name="title" required
         class="form-control form-control-sm bg-dark border-secondary text-white"
         placeholder="New task…">
  <button type="submit" class="btn btn-sm btn-primary px-3">Add</button>
</form>

<div class="card">
  {% if todos %}
  <table class="table table-dark table-hover mb-0 align-middle" style="font-size:.875rem">
    <thead>
      <tr class="text-secondary small">
        <th class="fw-normal" style="width:32px"></th>
        <th class="fw-normal">Task</th>
        <th class="fw-normal text-end">Created</th>
        <th class="fw-normal" style="width:40px"></th>
      </tr>
    </thead>
    <tbody>
    {% for t in todos %}
    {% set done = t.done %}
    <tr class="{% if done %}opacity-50{% endif %}">
      <td>
        {% if done %}
          <i class="bi bi-check-circle-fill text-success"></i>
        {% else %}
        <form method="POST" action="/todos/{{ t.id }}/done" class="m-0">
          <button type="submit" class="btn btn-link p-0 text-secondary" title="Mark done">
            <i class="bi bi-circle"></i>
          </button>
        </form>
        {% endif %}
      </td>
      <td class="{% if done %}text-decoration-line-through text-secondary{% else %}text-white{% endif %}">
        {{ t.title }}
      </td>
      <td class="text-secondary small text-end text-nowrap">
        {{ t.created[:10] if t.created else '—' }}
      </td>
      <td>
        <form method="POST" action="/todos/{{ t.id }}/delete" class="m-0 text-end">
          <button type="submit" class="btn btn-link p-0 text-secondary" title="Delete">
            <i class="bi bi-trash3"></i>
          </button>
        </form>
      </td>
    </tr>
    {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="card-body text-secondary">No tasks. Nice.</div>
  {% endif %}
</div>
{% endblock %}