{% extends 'academy/admin_base.html' %}
{% block title %}Assignments{% endblock %}

{% block extra_css %}
<style>
    .assignments-page {
        padding: 2.5rem 4rem;
        max-width: 1280px;
        margin: 0 auto;
    }

    .page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 2.5rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid rgba(201, 168, 76, 0.15);
    }

    .page-header h1 {
        font-size: 2.3rem;
        margin: 0;
    }

    .panel {
        background: var(--charcoal);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 12px;
        padding: 2rem;
    }

    .panel-title {
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 1.5rem;
    }

    .data-table {
        width: 100%;
        border-collapse: collapse;
    }

    .data-table thead {
        background: rgba(201, 168, 76, 0.08);
    }

    .data-table th {
        text-align: left;
        padding: 1.2rem 1rem;
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--gold);
    }

    .data-table td {
        padding: 1.3rem 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        vertical-align: middle;
    }

    .data-table tr:hover {
        background: rgba(255, 255, 255, 0.03);
    }

    .student-name {
        font-weight: 600;
        color: var(--white);
    }

    .status-badge {
        padding: 0.4rem 1rem;
        border-radius: 30px;
        font-size: 0.82rem;
        font-weight: 600;
    }

    .status-submitted {
        background: rgba(58, 143, 95, 0.2);
        color: var(--green);
    }

    .action-btn {
        padding: 0.45rem 1rem;
        font-size: 0.85rem;
    }

    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        color: var(--gray);
    }
</style>
{% endblock %}

{% block admin_content %}

<div class="assignments-page">

    <!-- Header -->
    <div class="page-header">
        <div>
            <p
                style="color: var(--gold); font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.4rem;">
                Management</p>
            <h1>Submitted Assignments</h1>
        </div>
        <a href="#" class="btn btn-outline">+ Create New Assignment</a>
    </div>

    <div class="panel">
        <div class="panel-title">📎 All Submitted Assignments</div>

        <table class="data-table">
            <thead>
                <tr>
                    <th>Student</th>
                    <th>Assignment Title</th>
                    <th>Submitted On</th>
                    <th>Status</th>
                    <th style="width: 120px;">Action</th>
                </tr>
            </thead>
            <tbody>
                {% for assignment in assignments %}
                <tr>
                    <td>
                        <div class="student-name">{{ assignment.student.full_name }}</div>
                        <small style="color: var(--gray-light);">{{ assignment.student.get_course_display }}</small>
                    </td>
                    <td>{{ assignment.title }}</td>
                    <td>{{ assignment.submitted_at|date:"d M Y • H:i" }}</td>
                    <td>
                        <span class="status-badge status-submitted">
                            ✓ Submitted
                        </span>
                    </td>
                    <td>
                        {% if assignment.file %}
                        <!-- Fixed: Using a safe temporary link -->
                        <a href="{{ assignment.file.url }}" target="_blank"
                            class="btn btn-gold action-btn">
                            Review
                        </a>
                        {% endif %}
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="5">
                        <div class="empty-state">
                            <div style="font-size: 4.5rem; margin-bottom: 1rem; opacity: 0.4;">📭</div>
                            <h4>No assignments submitted yet</h4>
                            <p>When students upload their work, they will appear here.</p>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Quick Stats -->
    <div
        style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 2.5rem;">
        <div class="panel" style="text-align: center;">
            <h5 style="color: var(--gray-light);">Total Submitted</h5>
            <h2 style="color: var(--gold); margin: 0.5rem 0 0;">{{ assignments|length }}</h2>
        </div>
        <div class="panel" style="text-align: center;">
            <h5 style="color: var(--gray-light);">Pending Review</h5>
            <h2 style="color: var(--red); margin: 0.5rem 0 0;">{{ pending_count|default:0 }}</h2>
        </div>
        <div class="panel" style="text-align: center;">
            <h5 style="color: var(--gray-light);">Graded</h5>
            <h2 style="color: var(--green); margin: 0.5rem 0 0;">{{ graded_count|default:0 }}</h2>
        </div>
    </div>

</div>

{% endblock %}