{% extends "base.html" %}
{% block content %}
<div class="page-header">
    <h1>Eisenhower Matrix</h1>
    <span class="text-muted">{{ total }} open tasks classified by priority &amp; urgency</span>
</div>

<!-- Filters -->
<form class="filters-bar" method="get" action="/eisenhower" id="eis-filters">
    <select name="domain_id" class="filter-select" id="eis-domain" onchange="this.form.submit()">
        <option value="">All Domains</option>
        {% for d in domains %}
        <option value="{{ d.id }}" {{ 'selected' if current_domain_id == d.id|string }}>{{ d.name }}</option>
        {% endfor %}
    </select>
    <select name="project_id" class="filter-select" id="eis-project" onchange="this.form.submit()">
        <option value="">All Projects</option>
        {% for p in projects %}
        <option value="{{ p.id }}" {{ 'selected' if current_project_id == p.id|string }}>{{ p.name }}</option>
        {% endfor %}
    </select>
    <select name="status" class="filter-select" onchange="this.form.submit()">
        <option value="">All Statuses</option>
        <option value="open" {{ 'selected' if current_status == 'open' }}>Open</option>
        <option value="in_progress" {{ 'selected' if current_status == 'in_progress' }}>In Progress</option>
        <option value="blocked" {{ 'selected' if current_status == 'blocked' }}>Blocked</option>
    </select>
    <select name="context" class="filter-select" onchange="this.form.submit()">
        <option value="">All Contexts</option>
        {% for ct in context_types %}
        <option value="{{ ct.value }}" {{ 'selected' if current_context == ct.value }}>{{ ct.label }}</option>
        {% endfor %}
    </select>
</form>

<div class="eisenhower-grid">
    <!-- Axis labels -->
    <div class="eisenhower-y-label">
        <span>Important</span>
    </div>

    <!-- Q1: Urgent + Important -->
    <div class="eisenhower-quadrant eisenhower-q1">
        <div class="eisenhower-quadrant-header">
            <h3>Do First</h3>
            <span class="eisenhower-quadrant-subtitle">Urgent &amp; Important</span>
            <span class="badge badge-red">{{ counts.do_first }}</span>
        </div>
        <div class="eisenhower-task-list">
            {% for task in quadrants.do_first %}
            <a href="/tasks/{{ task.id }}" class="eisenhower-task">
                <span class="priority-dot priority-{{ task.priority }}"></span>
                <span class="eisenhower-task-title">{{ task.title }}</span>
                {% if task.due_date %}
                <span class="eisenhower-task-due {% if task.due_date < today %}overdue{% endif %}">
                    {{ task.due_date.strftime('%b %-d') }}
                </span>
                {% endif %}
                {% if task.project_name %}
                <span class="eisenhower-task-project">{{ task.project_name }}</span>
                {% endif %}
            </a>
            {% else %}
            <div class="eisenhower-empty">No tasks</div>
            {% endfor %}
        </div>
    </div>

    <!-- Q2: Not Urgent + Important -->
    <div class="eisenhower-quadrant eisenhower-q2">
        <div class="eisenhower-quadrant-header">
            <h3>Schedule</h3>
            <span class="eisenhower-quadrant-subtitle">Not Urgent &amp; Important</span>
            <span class="badge badge-accent">{{ counts.schedule }}</span>
        </div>
        <div class="eisenhower-task-list">
            {% for task in quadrants.schedule %}
            <a href="/tasks/{{ task.id }}" class="eisenhower-task">
                <span class="priority-dot priority-{{ task.priority }}"></span>
                <span class="eisenhower-task-title">{{ task.title }}</span>
                {% if task.due_date %}
                <span class="eisenhower-task-due">{{ task.due_date.strftime('%b %-d') }}</span>
                {% endif %}
                {% if task.project_name %}
                <span class="eisenhower-task-project">{{ task.project_name }}</span>
                {% endif %}
            </a>
            {% else %}
            <div class="eisenhower-empty">No tasks</div>
            {% endfor %}
        </div>
    </div>

    <!-- Second row y-label -->
    <div class="eisenhower-y-label">
        <span>Not Important</span>
    </div>

    <!-- Q3: Urgent + Not Important -->
    <div class="eisenhower-quadrant eisenhower-q3">
        <div class="eisenhower-quadrant-header">
            <h3>Delegate</h3>
            <span class="eisenhower-quadrant-subtitle">Urgent &amp; Not Important</span>
            <span class="badge badge-amber">{{ counts.delegate }}</span>
        </div>
        <div class="eisenhower-task-list">
            {% for task in quadrants.delegate %}
            <a href="/tasks/{{ task.id }}" class="eisenhower-task">
                <span class="priority-dot priority-{{ task.priority }}"></span>
                <span class="eisenhower-task-title">{{ task.title }}</span>
                {% if task.due_date %}
                <span class="eisenhower-task-due {% if task.due_date < today %}overdue{% endif %}">
                    {{ task.due_date.strftime('%b %-d') }}
                </span>
                {% endif %}
                {% if task.project_name %}
                <span class="eisenhower-task-project">{{ task.project_name }}</span>
                {% endif %}
            </a>
            {% else %}
            <div class="eisenhower-empty">No tasks</div>
            {% endfor %}
        </div>
    </div>

    <!-- Q4: Not Urgent + Not Important -->
    <div class="eisenhower-quadrant eisenhower-q4">
        <div class="eisenhower-quadrant-header">
            <h3>Eliminate</h3>
            <span class="eisenhower-quadrant-subtitle">Not Urgent &amp; Not Important</span>
            <span class="badge badge-muted">{{ counts.eliminate }}</span>
        </div>
        <div class="eisenhower-task-list">
            {% for task in quadrants.eliminate %}
            <a href="/tasks/{{ task.id }}" class="eisenhower-task">
                <span class="priority-dot priority-{{ task.priority }}"></span>
                <span class="eisenhower-task-title">{{ task.title }}</span>
                {% if task.due_date %}
                <span class="eisenhower-task-due">{{ task.due_date.strftime('%b %-d') }}</span>
                {% endif %}
                {% if task.project_name %}
                <span class="eisenhower-task-project">{{ task.project_name }}</span>
                {% endif %}
            </a>
            {% else %}
            <div class="eisenhower-empty">No tasks</div>
            {% endfor %}
        </div>
    </div>

    <!-- X-axis labels -->
    <div class="eisenhower-x-spacer"></div>
    <div class="eisenhower-x-label">Urgent</div>
    <div class="eisenhower-x-label">Not Urgent</div>
</div>

<script>
(function() {
    var domainSel = document.getElementById('eis-domain');
    var projectSel = document.getElementById('eis-project');
    var currentProjectId = '{{ current_project_id }}';
    var form = document.getElementById('eis-filters');

    domainSel.addEventListener('change', function() {
        var did = domainSel.value;
        if (!did) { form.submit(); return; }
        fetch('/projects/api/by-domain?domain_id=' + encodeURIComponent(did))
            .then(function(r) { return r.json(); })
            .then(function(projects) {
                projectSel.innerHTML = '<option value="">All Projects</option>';
                projects.forEach(function(p) {
                    var opt = document.createElement('option');
                    opt.value = p.id;
                    opt.textContent = p.name;
                    if (p.id === currentProjectId) opt.selected = true;
                    projectSel.appendChild(opt);
                });
                form.submit();
            })
            .catch(function() { form.submit(); });
    });
})();
</script>
{% endblock %}