{% extends 'main.html' %}
{% block content %}

<!--context['club'] + member_list context_object -->

<div class="container">
    <h2>{{ club.name }}</h2>
    <!-- Membership List -->
    <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h4>Club Members</h4>
            <span>Total: {{ page_obj.paginator.count }} Members found</span>
        </div>
        <div class="card-body">
            {% if member_list %}
                <div class="table-responsive">
                    <table class="table table-striped table-hover">                    
                        <thead>
                            <tr>
                                <th>Member</th> 
                                <th>Username</th>
                                <th style='text-align:center'>Member since</th>
                                <th style='text-align:center'>Status</th>
                                <th style='text-align:center'>BAP Participant</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for member in member_list %}
                                <tr>
                                    <td><a href="{% url 'aquaristClubMember' member.id %}">{{ member.user.first_name }} {{ member.user.last_name }}</a></td>
                                    <td><a href="{% url 'aquarist' member.user.id %}">{{member.user.get_display_name}} </td>  
                                    <td style='text-align:center'>{{ member.date_requested | date:'M-Y' }} </td>
                                    <td style='text-align:center'>
                                    {% if member.is_club_admin %}
                                        Admin
                                    {% elif member.membership_approved %}
                                        Member
                                    {% else %}
                                        <font style="color:#860404;" >Pending</font>
                                    {% endif %}
                                    </td>
                                    <td style='text-align:center'>
                                    {% if member.bap_participant %}
                                        Yes
                                    {% endif %}
                                    </td>                                                                    
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                {% if is_paginated %}
                <nav aria-label="Page navigation">
                    <ul class="pagination justify-content-center">
                        {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page=1{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_region %}&global_region={{ selected_region }}{% endif %}{% if query_text %}&q={{ query_text }}{% endif %}" aria-label="First">
                                    <span aria-hidden="true">&laquo;&laquo;</span>
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_region %}&global_region={{ selected_region }}{% endif %}{% if query_text %}&q={{ query_text }}{% endif %}" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                        {% endif %}
                        
                        {# Show current page and neighboring pages #}
                        {% for i in page_obj.paginator.page_range %}
                            {% if page_obj.number == i %}
                                <li class="page-item active"><span class="page-link">{{ i }}</span></li>
                            {% elif i > page_obj.number|add:'-3' and i < page_obj.number|add:'3' %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ i }}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_region %}&global_region={{ selected_region }}{% endif %}{% if query_text %}&q={{ query_text }}{% endif %}">{{ i }}</a>
                                </li>
                            {% endif %}
                        {% endfor %}
                        
                        {% if page_obj.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_region %}&global_region={{ selected_region }}{% endif %}{% if query_text %}&q={{ query_text }}{% endif %}" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_region %}&global_region={{ selected_region }}{% endif %}{% if query_text %}&q={{ query_text }}{% endif %}" aria-label="Last">
                                    <span aria-hidden="true">&raquo;&raquo;</span>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}
            {% endif %}
        </div>
    </div>
</div>

{% endblock content %}