{% extends "base.html" %}

{% block title %}Dashboard - MyOrg Assistant{% endblock %}

{% block content %}
<div class="dashboard">
    <div class="dashboard-header">
        <h2>📊 Dashboard</h2>
        <p class="date">{{ today }}</p>
    </div>

    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-value">{{ stats.events_today }}</div>
            <div class="stat-label">Events Today</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ stats.priority_tasks }}</div>
            <div class="stat-label">Priority Tasks</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ stats.due_soon }}</div>
            <div class="stat-label">Due Soon</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ stats.active_projects }}</div>
            <div class="stat-label">Active Projects</div>
        </div>
    </div>

    <div class="dashboard-grid">
        <!-- Today's Events -->
        <div class="dashboard-section">
            <h3>📅 Today's Schedule</h3>
            {% if events %}
                <div class="event-list">
                    {% for event in events %}
                    <div class="event-item">
                        <span class="event-time">
                            {% if event.time %}{{ event.time.strftime('%H:%M') }}{% else %}All day{% endif %}
                        </span>
                        <span class="event-desc">{{ event.description }}</span>
                        {% for context in event.contexts %}
                        <span class="tag context">@{{ context }}</span>
                        {% endfor %}
                    </div>
                    {% endfor %}
                </div>
            {% else %}
                <p class="empty-state">No events scheduled today</p>
            {% endif %}
        </div>

        <!-- Priority Tasks -->
        <div class="dashboard-section">
            <h3>✅ Priority Tasks</h3>
            {% if priority_tasks %}
                <div class="task-list">
                    {% for task in priority_tasks %}
                    <div class="task-item">
                        <span class="priority-badge priority-{{ task.priority }}">{{ task.priority }}</span>
                        <span class="task-desc">{{ task.description }}</span>
                        {% for project in task.projects %}
                        <span class="tag project">+{{ project }}</span>
                        {% endfor %}
                    </div>
                    {% endfor %}
                </div>
                <a href="/tasks?priority=A" class="btn-link">View all →</a>
            {% else %}
                <p class="empty-state">No priority tasks</p>
            {% endif %}
        </div>

        <!-- Due Soon -->
        <div class="dashboard-section">
            <h3>⏰ Due Soon</h3>
            {% if due_soon %}
                <div class="task-list">
                    {% for task in due_soon %}
                    <div class="task-item">
                        <span class="task-desc">{{ task.description }}</span>
                        <span class="due-date">📅 {{ task.due_date.strftime('%Y-%m-%d') }}</span>
                    </div>
                    {% endfor %}
                </div>
            {% else %}
                <p class="empty-state">Nothing due soon</p>
            {% endif %}
        </div>

        <!-- Active Projects -->
        <div class="dashboard-section">
            <h3>📂 Active Projects</h3>
            {% if active_projects %}
                <div class="project-list">
                    {% for project in active_projects %}
                    <div class="project-item">
                        <span class="project-tag">+{{ project.tag }}</span>
                        <span class="project-desc">{{ project.description }}</span>
                    </div>
                    {% endfor %}
                </div>
                <a href="/projects" class="btn-link">View all →</a>
            {% else %}
                <p class="empty-state">No active projects</p>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}