{% extends 'base.html' %}

{% block title %}Tasks | Cilvera{% endblock title %}

{% block content %}
<div class="card shadow-sm border-0">
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center mb-3 gap-3 flex-wrap">
      <h1 class="h5 mb-0">Tasks <span class="badge text-bg-secondary">{{ page_obj.paginator.count }}</span></h1>
      <form class="row g-2" method="get">
        <div class="col-12 col-md-auto">
          <input class="form-control" name="q" type="search" placeholder="Search" value="{{ q }}">
        </div>
        <div class="col-12 col-md-auto">
          <select class="form-select" name="status">
            <option value="">All statuses</option>
            {% for value, label in status_options %}
              <option value="{{ value }}" {% if status == value %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-12 col-md-auto">
          <button class="btn btn-primary" type="submit">Filter</button>
        </div>
      </form>
    </div>
    <div class="table-responsive">
      <table class="table table-hover align-middle">
        <thead>
          <tr>
            <th>Title</th>
            <th>Customer</th>
            <th>Status</th>
            <th>Assignee</th>
            <th>Due date</th>
          </tr>
        </thead>
        <tbody>
          {% for task in tasks %}
            <tr>
              <td>{{ task.title }}</td>
              <td>{{ task.customer.full_name }}</td>
              <td><span class="badge text-bg-light border">{{ task.get_status_display }}</span></td>
              <td>{{ task.assignee|default:'-' }}</td>
              <td>{{ task.due_date|default:'-' }}</td>
            </tr>
          {% empty %}
            <tr><td colspan="5" class="text-center text-secondary">No tasks found.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    {% include 'shared/pagination.html' %}
  </div>
</div>
{% endblock content %}