{% extends "base.html" %}
{% block title %}Deadline Tracker - {{ config.APP_NAME }}{% endblock %}
{% block content %}
<h1>⏰ Deadline Tracker</h1>
<p style="font-size:0.85rem; color:var(--text-muted);">Every non-completed task with a deadline, sorted soonest first.</p>

{% if tracked %}
<div class="table-responsive">
<table class="data-table">
    <thead><tr><th>Urgency</th><th>Task</th><th>Deadline</th><th>Days Left</th><th>Priority</th></tr></thead>
    <tbody>
        {% for t in tracked %}
        <tr>
            <td>
                {% if t._urgency == 'Overdue' %}<span style="color:var(--error); font-weight:600;">🔴 Overdue</span>
                {% elif t._urgency == 'Due Today' %}<span style="color:#e67e22; font-weight:600;">🟠 Due Today</span>
                {% elif t._urgency == 'Due This Week' %}<span style="color:#d4a72c;">🟡 This Week</span>
                {% else %}<span style="color:var(--text-muted);">⚪ Later</span>
                {% endif %}
            </td>
            <td>{{ t.task_name }}</td>
            <td>{{ t.deadline }}</td>
            <td>{{ t._days_left }}</td>
            <td>{{ t.priority }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
</div>
{% else %}
<p>Nothing to track - no non-completed tasks currently have a deadline set.</p>
{% endif %}
{% endblock %}