{% extends "base.html" %}

{% block title %}Nilai Saya{% endblock %}
{% block page_title %}Nilai Saya{% endblock %}

{% block content %}
<p class="text-sm text-gray-500 mb-6">Total: {{ total }} nilai tercatat</p>

{% for mapel_name, nilai_list in grouped_nilai.items() %}
<div class="bg-white rounded-xl shadow-sm border border-gray-100 mb-4">
    <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
        <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0">
            <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
        </div>
        <div>
            <h3 class="font-semibold text-gray-800">{{ mapel_name }}</h3>
            <p class="text-xs text-gray-500">
                Rata-rata: <span class="font-semibold text-primary-600">{{ "%.1f"|format(nilai_list|map(attribute='score')|list|sum / nilai_list|length) }}</span>
            </p>
        </div>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gray-50">
                <tr>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Jenis</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Nilai</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Keterangan</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Tanggal</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                {% for n in nilai_list %}
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-3">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                            {% if n.type == 'uas' %}bg-red-100 text-red-800
                            {% elif n.type == 'uts' %}bg-orange-100 text-orange-800
                            {% elif n.type == 'kuis' %}bg-blue-100 text-blue-800
                            {% elif n.type == 'praktik' %}bg-purple-100 text-purple-800
                            {% else %}bg-gray-100 text-gray-800{% endif %}">
                            {{ n.type|upper }}
                        </span>
                    </td>
                    <td class="px-6 py-3">
                        <span class="text-sm font-bold {% if n.score >= 75 %}text-green-600{% elif n.score >= 50 %}text-yellow-600{% else %}text-red-600{% endif %}">
                            {{ n.score }}
                        </span>
                    </td>
                    <td class="px-6 py-3 text-sm text-gray-500">{{ n.description or '-' }}</td>
                    <td class="px-6 py-3 text-sm text-gray-500">{{ n.created_at.strftime('%d %b %Y') }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endfor %}

{% if not grouped_nilai %}
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8 text-center">
    <svg class="w-12 h-12 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
    <p class="text-gray-400 text-sm">Belum ada nilai tercatat</p>
</div>
{% endif %}
{% endblock %}