{% extends "base.html" %}
{% block title %}My Certificates{% endblock %}
{% block nav_certificates_student %}active{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h2><i class="fa-solid fa-certificate me-2"></i>My Certificates</h2>
        <p class="text-muted mb-0">
            {% if enrollment %}{{ enrollment.program }}{% endif %}
        </p>
    </div>
</div>

{% if enrollment %}
    {% if certificates %}
    <div class="row g-4">
        {% for cert in certificates %}
        <div class="col-md-6 col-lg-5">
            <div class="portal-card h-100" style="border-top: 4px solid var(--color-secondary);">
                <div class="portal-card-body text-center py-4 px-4">
                    <!-- Icon -->
                    <div class="mb-3">
                        <i class="fa-solid fa-certificate fa-3x" style="color: var(--color-secondary);"></i>
                    </div>
                    <!-- Org name -->
                    <p class="text-muted small mb-1 fw-semibold text-uppercase" style="letter-spacing:0.05em;">
                        Mirella &amp; Lino Saputo Foundation LTD
                    </p>
                    <p class="text-muted small mb-3">In partnership with UVTAB</p>
                    <!-- Award text -->
                    <p class="mb-1 text-muted small">This certifies that</p>
                    <h4 class="fw-bold mb-1" style="color: var(--color-primary);">
                        {{ enrollment.student.get_full_name }}
                    </h4>
                    <p class="text-muted small mb-3">{{ enrollment.student_number }}</p>
                    <p class="mb-1 text-muted small">has been awarded the</p>
                    <h5 class="fw-bold mb-1" style="color: var(--color-secondary);">
                        {{ enrollment.program.get_level_display }}
                    </h5>
                    <p class="fw-semibold mb-3">{{ enrollment.program.name }}</p>
                    <!-- Meta -->
                    <hr>
                    <div class="row text-center g-2">
                        <div class="col-6">
                            <div class="text-muted" style="font-size:0.75rem;">Issue Date</div>
                            <div class="fw-semibold small">{{ cert.issue_date|date:"d M Y" }}</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted" style="font-size:0.75rem;">Academic Year</div>
                            <div class="fw-semibold small">{{ cert.academic_year }}</div>
                        </div>
                        {% if cert.certificate_number %}
                        <div class="col-12 mt-1">
                            <div class="text-muted" style="font-size:0.75rem;">Certificate Number</div>
                            <div class="fw-semibold small font-monospace">{{ cert.certificate_number }}</div>
                        </div>
                        {% endif %}
                    </div>
                    {% if cert.notes %}
                    <p class="text-muted small mt-3 mb-0 fst-italic">{{ cert.notes }}</p>
                    {% endif %}

                    <div class="mt-3 pt-3 border-top d-flex flex-column gap-2">
                        {% if cert.certificate_file %}
                        <a href="{{ cert.certificate_file.url }}" target="_blank"
                           class="btn btn-sm btn-success w-100">
                            <i class="fa-solid fa-download me-1"></i> Download Certificate
                        </a>
                        {% endif %}
                        <a href="{% url 'portal:certificate_print' cert.pk %}" target="_blank"
                           class="btn btn-sm btn-outline-primary w-100">
                            <i class="fa-solid fa-print me-1"></i> Print Certificate
                        </a>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    {% else %}
    <div class="portal-card">
        <div class="portal-card-body text-center py-5">
            <i class="fa-solid fa-certificate fa-3x mb-3 d-block" style="color:var(--color-secondary);opacity:0.4;"></i>
            <h5 class="mb-2">No Certificates Yet</h5>
            <p class="text-muted mb-0">
                Your UVTAB certificates will appear here once they have been issued and recorded
                by the admin.
            </p>
        </div>
    </div>
    {% endif %}

{% else %}
<div class="alert alert-info">
    <i class="fa-solid fa-circle-info me-2"></i>
    No enrollment found. Your certificates will appear here once you are enrolled.
</div>
{% endif %}
{% endblock %}