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

<br />
<br />

<br />
<br />
 
<div class="container mt-4">
    <h2 class="mb-4 text-center">لیست کارنامه‌ها</h2>
    {%include 'profile/message.html'%}

    <a href="{% url 'reportcard_create' %}" class="btn btn-success mb-3 ">ایجاد کارنامه جدید</a>

    <div class="table-responsive animate__animated animate__delay-0.1s animate__fadeIn">  <!-- فعال کردن اسکرول افقی در حالت موبایل -->
        <table class="table table-bordered bg-light text-center"> <!-- اضافه کردن بکگراند به جدول -->
            <thead class="bg-dark text-white">  <!-- اضافه کردن بکگراند به هدر جدول -->
                <tr>
                    <th>ردیف</th>
                    <th>عکس</th>
                    <th>نام</th>
                    <th>نام خانوادگی</th>
                    <th>نوع کارنامه </th>
                    <th>حلقه‌ی‌مربوطه</th>
                    <th>بازه زمانی</th>



                    
                    <th>عملیات</th>
                </tr>
            </thead>
            <tbody>
                {% for reportcard in reportcards %}
                <tr >
                    <td>{{ forloop.counter }}</td>
                    <td> 
                        {% if reportcard.person.person_private_info.pic  %}
                            <img src="{{ reportcard.person.person_private_info.pic.url }}" alt="تصویر" width="60" height="60" class="rounded-circle"/>
                        {% else %}
                            <img src="{% static 'media\users\default_profile.png' %}" alt="بدون تصویر" width="60" height="60" class="rounded-circle"/>
                        {% endif %}
                    </td>
                    <td class="text-center align-middle">{{reportcard.person.user.first_name }}</td>
                    <td class="text-center align-middle">{{ reportcard.person.user.last_name }}</td>
                    <td class="text-center align-middle">{{reportcard.title}}</td>
                    <td class="text-center align-middle">{{reportcard.ring}}</td>
                    <td class="text-center align-middle">{{reportcard.date}}( {{ reportcard.date.end_date|date:"Y/m/d" }}تا {{ reportcard.date.start_date|date:"Y/m/d" }}
                        )</td>

                    <td class="text-center align-middle">
                        <div class="text-center d-flex justify-content-center">
                            <a href="{% url 'reportcard_detail' reportcard.pk %}" class="text-primary mx-1" title="مشاهده">
                                <i class="fas fa-eye"></i>
                            </a>
                            <a href="{% url 'reportcard_update' reportcard.pk %}" class="text-warning mx-1" title="ویرایش">
                                <i class="fas fa-edit"></i>
                            </a>
                            <a href="{% url 'reportcard_delete' reportcard.pk %}" class="text-danger mx-1" title="حذف">
                                <i class="fas fa-trash"></i>
                            </a>
                        </div>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="4" class="text-center">کارنامه‌ای یافت نشد.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{%endblock%}