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

{% block content %}
<style>
    body {
        background-color: #f0f2f5;
    }
    .dashboard-container {
        padding: 40px;
    }
    .header {
        margin-bottom: 40px;
    }
    .header h2 {
        font-weight: bold;
    }
    .assignment-card {
        background-color: white;
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        transition: transform 0.2s;
        margin-bottom: 24px;
    }
    .assignment-card:hover {
        transform: translateY(-5px);
    }
    .assignment-title {
        font-weight: 600;
        margin-bottom: 8px;
    }
    .assignment-due-date {
        color: #6c757d;
        font-size: 0.9rem;
    }
    .btn-primary {
        background-color: #6a11cb;
        border-color: #6a11cb;
    }
    .empty-state {
        text-align: center;
        padding: 40px;
        background-color: white;
        border-radius: 12px;
    }
</style>

<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Student Dashboard</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" href="#">Courses</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Grades</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        {{ user.username }}
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="#">Profile</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="{% url 'core:logout' %}">Logout</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="dashboard-container">
    <header class="header">
        <h2>Welcome, {{ user.username }}!</h2>
        <p class="text-muted">Here are your current assignments. Stay on track!</p>
    </header>

    <div class="row">
        {% for assignment in assignments %}
        <div class="col-md-6 col-lg-4">
            <div class="assignment-card">
                <h5 class="assignment-title">{{ assignment.title }}</h5>
                <p class="assignment-due-date">Due: {{ assignment.due_date|date:"M d, Y" }}</p>
                <p>{{ assignment.description|truncatewords:15 }}</p>
                <a href="{% url 'core:assignment_detail' assignment.id %}" class="btn btn-primary">View Details</a>
            </div>
        </div>
        {% empty %}
        <div class="col-12">
            <div class="empty-state">
                <i class="fas fa-check-circle fa-3x text-success mb-3"></i>
                <h4>You're all caught up!</h4>
                <p class="text-muted">No pending assignments at the moment. Great job!</p>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}
