{% extends "base.html" %}
{% block title %}Dashboard - TODO{% endblock %}

{% block content %}
  <div class="row g-3">
    <div class="col-lg-4">
      <div class="card shadow-sm">
        <div class="card-body">
          <h2 class="h6 mb-3">Ny todo</h2>

          <form method="POST" action="{{ url_for('create_todo') }}">
            <div class="mb-2">
              <label class="form-label">Title</label>
              <input class="form-control" name="title" required />
            </div>

            <div class="mb-2">
              <label class="form-label">Description</label>
              <textarea class="form-control" name="description" rows="3" required></textarea>
            </div>

            <div class="mb-3">
              <label class="form-label">Status</label>
              <select class="form-select" name="status">
                <option value="not-started">Not started</option>
                <option value="in-progress">In progress</option>
                <option value="done">Done</option>
              </select>
            </div>

            <button class="btn btn-primary w-100" type="submit">
              <i class="bi bi-plus-lg me-1"></i> Skapa
            </button>
          </form>
        </div>
      </div>
    </div>

    <div class="col-lg-8">
      <div class="card shadow-sm">
        <div class="card-body">
          <h2 class="h6 mb-3">Todos</h2>

          {% if not todos %}
            <div class="text-muted">Inga todos än.</div>
          {% else %}
            <div class="table-responsive">
              <table class="table align-middle mb-0">
                <thead>
                  <tr>
                    <th>Title</th>
                    <th>Status</th>
                    <th class="d-none d-md-table-cell">Created</th>
                    <th style="width: 1%"></th>
                  </tr>
                </thead>
                <tbody>
                  {% for t in todos %}
                    <tr>
                      <td>
                        <div class="fw-semibold">{{ t.title }}</div>
                        <div class="text-muted small">{{ t.description }}</div>
                      </td>

                      <td>
                        <form method="POST" action="{{ url_for('update_status', todo_id=t.id) }}" class="d-flex gap-2">
                          <select class="form-select form-select-sm" name="status" onchange="this.form.submit()">
                            <option value="not-started" {% if t.status=='not-started' %}selected{% endif %}>Not started</option>
                            <option value="in-progress" {% if t.status=='in-progress' %}selected{% endif %}>In progress</option>
                            <option value="done" {% if t.status=='done' %}selected{% endif %}>Done</option>
                          </select>
                        </form>
                      </td>

                      <td class="d-none d-md-table-cell text-muted small">
                        {{ t.created }}
                      </td>

                      <td>
                        <form method="POST" action="{{ url_for('delete_todo', todo_id=t.id) }}">
                          <button class="btn btn-outline-danger btn-sm" type="submit" title="Delete">
                            <i class="bi bi-trash"></i>
                          </button>
                        </form>
                      </td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
{% endblock %}