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

{% block title %}Все риски студентов{% endblock %}

{% block content %}
<div>
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-800">Риски студентов</h1>
        <p class="text-gray-500 mt-1">Ранжированный список по уровню риска</p>
    </div>

    <div class="bg-white rounded-xl shadow-sm">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">#</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Студент</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Группа</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Уровень риска</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Оценка</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Факторы</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Рекомендация</th>
                    </tr>
                </thead>
                <tbody class="divide-y">
                    {% for item in risk_list %}
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-6 py-4">{{ forloop.counter }}</td>
                        <td class="px-6 py-4 font-medium">{{ item.student.last_name }} {{ item.student.first_name }}</td>
                        <td class="px-6 py-4">{{ item.student.group.name|default:"-" }}</td>
                        <td class="px-6 py-4">
                            <div class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold
                                {% if item.risk.risk_level == 'critical' %}bg-red-100 text-red-700
                                {% elif item.risk.risk_level == 'high' %}bg-orange-100 text-orange-700
                                {% elif item.risk.risk_level == 'medium' %}bg-yellow-100 text-yellow-700
                                {% else %}bg-green-100 text-green-700{% endif %}">
                                {{ item.risk.get_risk_level_display }}
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex items-center">
                                <span class="font-bold text-lg">{{ item.risk.risk_score }}%</span>
                                <div class="ml-3 w-24 bg-gray-200 rounded-full h-2">
                                    <div class="h-2 rounded-full
                                        {% if item.risk.risk_score > 70 %}bg-red-500
                                        {% elif item.risk.risk_score > 30 %}bg-yellow-500
                                        {% else %}bg-green-500{% endif %}"
                                        style="width: {{ item.risk.risk_score }}%">
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-600">{{ item.risk.top_factors|truncatechars:60 }}</td>
                        <td class="px-6 py-4 text-sm text-gray-600">{{ item.risk.recommended_action|truncatechars:50 }}</td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="7" class="px-6 py-8 text-center text-gray-500">
                            <i class="fas fa-graduation-cap text-2xl mb-2 block"></i>
                            Студенты не найдены
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}