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

{% block title %}Мой риск{% endblock %}

{% block content %}
<div class="max-w-3xl mx-auto">
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-800">Мой академический риск</h1>
        <p class="text-gray-500">{{ student.last_name }} {{ student.first_name }}, {{ student.group.name }}</p>
    </div>

    <!-- Карточка риска -->
    <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
        <div class="text-center">
            <div class="text-6xl font-bold {% if risk.risk_level == 'critical' %}text-red-600{% elif risk.risk_level == 'high' %}text-orange-600{% elif risk.risk_level == 'medium' %}text-yellow-600{% else %}text-green-600{% endif %}">
                {{ risk.risk_score }}%
            </div>
            <p class="text-gray-500 mt-2">оценка риска</p>
            <div class="mt-3">
                <span class="px-4 py-2 rounded-full text-sm font-semibold 
                    {% if risk.risk_level == 'critical' %}bg-red-100 text-red-700
                    {% elif risk.risk_level == 'high' %}bg-orange-100 text-orange-700
                    {% elif risk.risk_level == 'medium' %}bg-yellow-100 text-yellow-700
                    {% else %}bg-green-100 text-green-700{% endif %}">
                    {{ risk.get_risk_level_display }}
                </span>
            </div>
        </div>
    </div>

    <!-- Факторы риска -->
    <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
        <h2 class="font-semibold text-gray-700 mb-3">
            <i class="fas fa-exclamation-triangle mr-2 text-orange-500"></i>Факторы риска
        </h2>
        <p class="text-gray-600">{{ risk.top_factors|default:"Нет выявленных факторов" }}</p>
        
        <div class="mt-4 p-3 bg-gray-50 rounded-lg">
            <p class="text-sm font-medium text-gray-700">
                <i class="fas fa-lightbulb mr-2 text-yellow-500"></i>Рекомендация:
            </p>
            <p class="text-sm text-gray-600 mt-1">{{ risk.recommended_action }}</p>
        </div>
    </div>

    <!-- Ближайшие задания -->
    <div class="bg-white rounded-xl shadow-sm p-6">
        <h2 class="font-semibold text-gray-700 mb-4">
            <i class="fas fa-tasks text-indigo-500 mr-2"></i>Мои ближайшие задания
        </h2>
        {% if upcoming_assignments %}
        <div class="space-y-3">
            {% for assignment in upcoming_assignments %}
            <div class="flex justify-between items-center border-b pb-2">
                <div>
                    <p class="font-medium">{{ assignment.title }}</p>
                    <p class="text-sm text-gray-500">{{ assignment.subject.name }}</p>
                </div>
                <div class="text-right">
                    <p class="text-sm text-gray-600">
                        <i class="fas fa-calendar-alt mr-1"></i>{{ assignment.deadline|date:"d.m.Y" }}
                    </p>
                </div>
            </div>
            {% endfor %}
        </div>
        <a href="/my-assignments/" class="text-indigo-600 text-sm mt-3 inline-block">
            Все задания <i class="fas fa-arrow-right ml-1"></i>
        </a>
        {% else %}
        <p class="text-gray-500">Нет активных заданий</p>
        {% endif %}
    </div>
</div>
{% endblock %}