{% 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>
    <form method="GET" class="mb-4">
        <div class="row g-2">
            <div class="col-md-6">
                
                <input type="text" name="search" value="{% if search_query %}{{ search_query }}{% else %}{{ '' }}{% endif %}" placeholder="جستجو" class="form-control mt-5">
            </div>
            <div class="col-md-4 mt-5">
                <label for="searchField" class="form-label">فیلد جستجو:</label>
                <select name="search_field" class="btn btn-outline-dark">
                    <option value="first_name" {% if search_field == 'first_name' %}selected{% endif %}>نام</option>
                    <option value="last_name" {% if search_field == 'last_name' %}selected{% endif %}>نام خانوادگی</option>
                    <option value="national_code" {% if search_field == 'national_code' %}selected{% endif %}>کد ملی</option>
                    <option value="raste" {% if search_field == 'raste' %}selected{% endif %}>رسته</option>
                    <option value="ring" {% if search_field == 'ring' %}selected{% endif %}>حلقه</option>
                </select>
            </div>
            
            <div class="col-md-2 mt-5">
                <button type="submit" class="btn btn-primary w-100">جستجو</button>
            </div>
        </div>
    </form>

    <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>
                </tr>
            </thead>
            <tbody>
                {% for member in members %}
                    {% if member.reportcards.all %}  <!-- بررسی اینکه آیا این عضو کارنامه دارد -->
                        <tr>
                            <td class="align-middle">
                                {% if member.person_private_info.pic %}
                                            <img src="{{member.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 class="align-middle">{{ member }}</td>
                            <td class="align-middle">{{ member.national_code }}</td> <!-- نمایش کد ملی -->
                            <td class="align-middle">
                                {{ member.memberships.ring.name }} <!-- نمایش نام حلقه -->
                            </td>
                            
                <td class="align-middle" >{{ member.person_cultural.raste_categories }}</td>
                            <td class="align-middle" >
                                <a href="{% url 'member_report_cards' member.id %}" class="btn btn-info btn-sm" title="نمایش کارنامه‌ها">
                                    نمایش کارنامه‌ها
                                </a>
                            </td>
                        </tr>
                    {% endif %}
                {% empty %}
                    <tr>
                        <td colspan="2" class="text-center">هیچ عضوی یافت نشد.</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{% endblock %}