{% extends "base.html" %}
{% load humanize %}
{% block title %}Assignments — {{ course.name }}{% endblock %}
{% block nav_courses_student %}active{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <a href="{% url 'content:student_course_detail' course_pk=course.pk %}" class="text-muted small d-block mb-1">
            <i class="fa-solid fa-arrow-left me-1"></i> {{ course.name }}
        </a>
        <h2><i class="fa-solid fa-file-pen me-2"></i>Assignments</h2>
        <p class="text-muted mb-0">{{ course.name }} — {{ course.program.name }}</p>
    </div>
</div>

{% if not rows %}
<div class="portal-card">
    <div class="portal-card-body text-center py-5 text-muted">
        <i class="fa-solid fa-file-pen fa-2x mb-3 d-block" style="opacity:0.3;"></i>
        <p class="mb-1">No assignments published yet.</p>
        <p class="small">Check back after your teacher publishes assignments.</p>
    </div>
</div>
{% else %}
<div class="row g-4">
    {% for row in rows %}
    <div class="col-md-6">
        <div class="portal-card h-100" style="border-top:3px solid {% if row.submission %}var(--color-secondary){% else %}var(--color-primary){% endif %};">
            <div class="portal-card-body">
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <h6 class="fw-bold mb-0">{{ row.assignment.title }}</h6>
                    {% if row.submission %}
                        {% if row.submission.grade %}
                        <span class="badge bg-{{ row.submission.grade_color }} ms-2">{{ row.submission.grade }}</span>
                        {% else %}
                        <span class="badge bg-success ms-2"><i class="fa-solid fa-check me-1"></i>Submitted</span>
                        {% endif %}
                    {% elif row.assignment.is_overdue %}
                        <span class="badge bg-danger ms-2">Overdue</span>
                    {% else %}
                        <span class="badge bg-warning text-dark ms-2">Pending</span>
                    {% endif %}
                </div>

                {% if row.assignment.description %}
                <p class="text-muted small mb-2">{{ row.assignment.description|truncatechars:120 }}</p>
                {% endif %}

                {% if row.assignment.due_date %}
                <div class="small text-muted mb-3">
                    <i class="fa-solid fa-clock me-1"></i>
                    Due: {{ row.assignment.due_date|date:"d M Y, H:i" }}
                    {% if row.assignment.is_overdue and not row.submission %}
                    <span class="text-danger fw-semibold ms-1">— Overdue</span>
                    {% endif %}
                </div>
                {% endif %}

                {% if row.submission and row.submission.feedback %}
                <div class="alert alert-info py-2 small mb-2">
                    <strong>Feedback:</strong> {{ row.submission.feedback }}
                </div>
                {% endif %}

                <a href="{% url 'content:student_submit' course_pk=course.pk pk=row.assignment.pk %}"
                   class="btn btn-sm {% if row.submission %}btn-outline-secondary{% else %}btn-primary{% endif %} w-100">
                    {% if row.submission %}
                    <i class="fa-solid fa-pen me-1"></i> Update Submission
                    {% else %}
                    <i class="fa-solid fa-upload me-1"></i> Submit Assignment
                    {% endif %}
                </a>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}
{% endblock %}