{% extends "base.html" %}
{% load static %}

{% block head %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css">
{% endblock %}

{% block title %}Dashboard - Task Manager{% endblock %}

{% block content %}
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
  <div class="container">
    <a class="navbar-brand" href="#">
        <i class="bi bi-check2-square me-2"></i>
        Task Manager
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Dashboard</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Tasks</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Profile</a>
        </li>
        <li class="nav-item">
            <a class="btn btn-primary ms-2" href="#">Logout</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<main class="container mt-5">
    <header class="hero-section text-center mb-5">
        <h1 class="display-4">Welcome Back, Alex!</h1>
        <p class="lead text-muted">Here are your tasks for today. Keep up the great work!</p>
    </header>

    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">Today's Tasks</h4>
                    <button class="btn btn-primary"><i class="bi bi-plus-lg me-1"></i> New Task</button>
                </div>
                <div class="list-group list-group-flush">
                    {% for task in tasks %}
                    <div class="list-group-item">
                        <div class="d-flex w-100 justify-content-between align-items-center">
                            <div>
                                <input class="form-check-input me-3" type="checkbox" value="" id="task-{{ task.id }}" {% if task.status == 'completed' %}checked{% endif %}>
                                <label class="form-check-label stretched-link" for="task-{{ task.id }}">
                                    <span class="task-title">{{ task.title }}</span>
                                </label>
                            </div>
                            <div>
                                <span class="badge priority-{{ task.priority }}">{{ task.priority|title }}</span>
                                <span class="badge status-{{ task.status }} ms-1">{{ task.status|title }}</span> <!-- Replaced filter -->
                            </div>
                        </div>
                        {% if task.description %}
                        <div class="ms-5 mt-1">
                            <small class="text-muted">{{ task.description }}</small>
                        </div>
                        {% endif %}
                    </div>
                    {% empty %}
                    <div class="list-group-item text-center p-4">
                        <i class="bi bi-sun fs-1 text-muted"></i>
                        <h5 class="mt-2">All clear!</h5>
                        <p class="text-muted">You have no tasks for today. Enjoy your day!</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</main>

<footer class="text-center py-4 mt-5">
    <p class="text-muted">&copy; 2025 Task Manager. All Rights Reserved.</p>
</footer>
{% endblock %}
