{% extends 'base.html' %}

{% block title %}{{ page_title|default:"All Tasks" }} - KeepItGoing{% endblock %}

{% block content %}
<!-- Header -->
<div class="task-pane-header">
    <h1 class="task-pane-title">{{ page_title|default:"All Tasks" }}</h1>
    <div style="display: flex; align-items: center; gap: var(--space-md);">
        <span class="task-count">{{ tasks|length }} task{{ tasks|length|pluralize }}</span>
        <select id="sort-select" onchange="updateSort()" style="padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);">
            <option value="default" {% if current_sort == 'default' %}selected{% endif %}>Default</option>
            <option value="due_date" {% if current_sort == 'due_date' %}selected{% endif %}>Due Date (Earliest)</option>
            <option value="due_date_desc" {% if current_sort == 'due_date_desc' %}selected{% endif %}>Due Date (Latest)</option>
            <option value="priority" {% if current_sort == 'priority' %}selected{% endif %}>Priority (High to Low)</option>
            <option value="priority_low" {% if current_sort == 'priority_low' %}selected{% endif %}>Priority (Low to High)</option>
        </select>
    </div>
</div>

<!-- Quick Add -->
<form method="post" action="{% url 'task-quick-add' %}" class="quick-add">
    {% csrf_token %}
    <input type="hidden" name="next" value="{{ request.get_full_path }}">
    {% if current_tag_id %}
    <input type="hidden" name="tag" value="{{ current_tag_id }}">
    {% endif %}
    <input type="text" name="title" class="quick-add-input" placeholder="Add a new task..." required>
    <button type="submit" class="btn btn-primary">Add</button>
</form>

<!-- Running Timer -->
{% if running_timer %}
<div class="time-tracker" style="background-color: var(--accent); color: var(--text-on-accent); margin-bottom: var(--space-lg);">
    <div class="time-tracker-header">
        <span class="time-tracker-label" style="color: var(--text-on-accent); opacity: 0.9;">Timer running for: <strong>{{ running_timer.task.title }}</strong></span>
        <span class="time-tracker-total" id="running-timer" data-started="{{ running_timer.started_at.isoformat }}">00:00:00</span>
    </div>
</div>
{% endif %}

<!-- Task List -->
{% if tasks %}
<div class="task-list" id="task-list">
    {% for task in tasks %}
    {% include 'tasks/_task_item.html' %}
    {% endfor %}
</div>
{% else %}
<div class="empty-state">
    <p>No tasks yet.</p>
    <p class="text-muted">Add one above!</p>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
// Running timer display
const timerDisplay = document.getElementById('running-timer');
if (timerDisplay) {
    const startedAt = new Date(timerDisplay.dataset.started);
    function updateTimer() {
        const now = new Date();
        const diff = Math.floor((now - startedAt) / 1000);
        const hours = Math.floor(diff / 3600).toString().padStart(2, '0');
        const minutes = Math.floor((diff % 3600) / 60).toString().padStart(2, '0');
        const seconds = (diff % 60).toString().padStart(2, '0');
        timerDisplay.textContent = `${hours}:${minutes}:${seconds}`;
    }
    updateTimer();
    setInterval(updateTimer, 1000);
}

// Sort change handler
function updateSort() {
    const sortValue = document.getElementById('sort-select').value;
    const url = new URL(window.location.href);
    if (sortValue === 'default') {
        url.searchParams.delete('sort');
    } else {
        url.searchParams.set('sort', sortValue);
    }
    window.location.href = url.toString();
}
</script>
{% endblock %}