{% extends 'base.html' %}

{% block title %}Tasks - KeepItGoing{% endblock %}

{% block content %}
<!-- Header -->
<div class="task-pane-header">
    <h1 class="task-pane-title">All Tasks</h1>
    <span class="task-count">{{ tasks|length }} task{{ tasks|length|pluralize }}</span>
</div>

<!-- Filters -->
<div style="display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-lg);">
    <form method="get" style="display: flex; gap: var(--space-sm); flex-wrap: wrap; flex: 1;">
        <select name="status" class="form-select" onchange="this.form.submit()" style="width: auto;">
            <option value="">All Status</option>
            <option value="pending" {% if current_status == 'pending' %}selected{% endif %}>Pending</option>
            <option value="in_progress" {% if current_status == 'in_progress' %}selected{% endif %}>In Progress</option>
            <option value="completed" {% if current_status == 'completed' %}selected{% endif %}>Completed</option>
            <option value="cancelled" {% if current_status == 'cancelled' %}selected{% endif %}>Cancelled</option>
        </select>

        <select name="priority" class="form-select" onchange="this.form.submit()" style="width: auto;">
            <option value="">All Priority</option>
            <option value="urgent" {% if current_priority == 'urgent' %}selected{% endif %}>Urgent</option>
            <option value="high" {% if current_priority == 'high' %}selected{% endif %}>High</option>
            <option value="medium" {% if current_priority == 'medium' %}selected{% endif %}>Medium</option>
            <option value="low" {% if current_priority == 'low' %}selected{% endif %}>Low</option>
        </select>

        <select name="tag" class="form-select" onchange="this.form.submit()" style="width: auto;">
            <option value="">All Tags</option>
            {% for tag in tags %}
            <option value="{{ tag.id }}" {% if current_tag == tag.id|stringformat:'s' %}selected{% endif %}>
                {{ tag.name }}
            </option>
            {% endfor %}
        </select>

        <a href="{% url 'task-list' %}" class="btn btn-secondary btn-sm">Clear Filters</a>
    </form>
    <a href="{% url 'task-create' %}" class="btn btn-primary">New Task</a>
</div>

<!-- Task List -->
{% if tasks %}
<div class="task-list">
    {% for task in tasks %}
    {% include 'tasks/_task_item.html' %}
    {% endfor %}
</div>
{% else %}
<div class="empty-state">
    <p>No tasks found</p>
    <p class="text-muted">Try adjusting your filters or create a new task.</p>
</div>
{% endif %}
{% endblock %}