{% extends 'base.html' %}
{% load static %}
{% block content %}
{% include 'profile/header.html' %}
{% include 'profile/drawer.html' %}

<br />
<br />
<br />
<br />
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>نظرات واحد شما</title>
    
</head>
<body>
    <div class="container">
        <h1>نظرات ثبت‌ شده برای واحد شما</h1>

        {% if evaluations %}
            <div class="row animate__animated animate__delay-0.1s animate__fadeIn ">
                {% for evaluation in evaluations %}
                    <div class="col-md-6 col-lg-4 mb-4" data-aos="fade-up">
                        <div class="card p-3">
                            <div class="card-body">
                                <i class="fas fa-comments evaluation-icon"></i>
                                <h5 class="card-title">وظیفه: {{ evaluation.mainTask }}</h5>
                                <p class="card-text">نظر: {{ evaluation.get_value_choices_display }}</p>
                                <p class="card-text">توضیحات: {{ evaluation.description }}</p>
                            </div>
                            <div class="card-footer">
                                <small>تاریخ: {{ evaluation.time }}</small>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <p class="no-evaluation">هیچ نظری برای واحد شما ثبت نشده است.</p>
        {% endif %}
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        AOS.init({
            duration: 1000,
            once: true,
        });
    </script>
</body>

<style>
    body {
        background: linear-gradient(135deg, #74b9ff, #a29bfe);
        color: #2d3436;
    }
    h1 {
        text-align: center;
        font-size: 2.5rem;
        color: #ffffff;
        margin-bottom: 30px;
        text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
    }
    .card {
        background: rgba(255, 255, 255, 0.8);
        border: none;
        border-radius: 10px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .card:hover {
        transform: scale(1.05);
        box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.2);
    }
    .card-title {
        color: #0984e3;
    }
    .card-text {
        color: #636e72;
    }
    .card-footer {
        font-size: 0.9rem;
        color: #b2bec3;
    }
    .no-evaluation {
        text-align: center;
        font-size: 1.2rem;
        color: #d63031;
        font-weight: bold;
        animation: fadeIn 2s ease;
    }
    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    .evaluation-icon {
        font-size: 2rem;
        color: #6c5ce7;
        margin-bottom: 10px;
    }
</style>
{% endblock %}
