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

<!--context['bap_club', 'bap_participants', 'status', 'selected_status'] + bap_submissions context_object -->

<div class="container">
    <h3>{{ bap_club.name }}</h3>
    <!-- Filter Form -->
    <div class="card mb-4">
        <div class="card-header">
            <h4>BAP Submission Filters</h4>
        </div>
        <div class="card-body">
            <form method="get" id="filter-form">
                <div class="row mb-3">
                    <div class="col-md-5">
                        <label for="status">BAP Status:</label>
                        <select name="status" id="status" class="form-select" onchange="this.form.submit()">
                            <option value="">-- All Status Options --</option>
                            {% for value, label in status %}
                                <option value="{{ value }}" {% if value == selected_status %}selected{% endif %}>{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div> 
                    <div class="col-md-5">
                        <label for="bap_participants">Participants:</label>
                        <select name="bap_participants" id="bap_participants" class="form-control" onchange="this.form.submit()">
                            <option value="all" {% if selected_bap_particpant_id == 'all' %}selected{% endif %}>-- All Participants --</option>
                            {% for aquarist in bap_participants %}
                                <option value="{{ aquarist.id }}" {% if selected_bap_particpant_id|stringformat:"s" == aquarist.id|stringformat:"s" %}selected{% endif %}>
                                    {{ aquarist.first_name }} {{ aquarist.last_name }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-5">
                    </div>                    
                </div>               
                <!-- Hidden fields to preserve pagination when only clearing specific filters -->
                <input type="hidden" id="preservedPage" name="page" value="{{ request.GET.page|default:'' }}">
            </form>
        </div>
    </div>
    
    <!-- BAP Submissions List -->
    <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h4>BAP Submissions</h4>
            <span>Total: {{ page_obj.paginator.count }} BAP Submissions found</span>
        </div>
        <div class="card-body">
            {% if bap_submissions %}
                <div class="table-responsive">
                    <table class="table table-striped table-hover">                    
                        <thead>
                            <tr>
                                <th>Species</th>
                                <th style='text-align:center'>Aquarist</th>
                                <th style='text-align:center'>Username</th> 
                                <th style='text-align:center'>Submitted</th>
                                <th style='text-align:center'>Status</th>
                                <th style='text-align:center'>CARES</th>
                                <th style='text-align:center'>Points</th> 
                            </tr>
                        </thead>
                        <tbody>
                            {% for bap_submission in bap_submissions %}
                                <tr>
                                    <td ><a href="{% url 'bapSubmission' bap_submission.id %}">{{ bap_submission.speciesInstance.name }}</a></td>
                                    <td style='text-align:center'>{{ bap_submission.aquarist.first_name }} {{ bap_submission.aquarist.last_name }}</td>
                                    <td style='text-align:center'><a href="{% url 'aquarist' bap_submission.aquarist.id %}">{{bap_submission.aquarist.get_display_name}} </td>  
                                    <td style='text-align:center'>{{ bap_submission.created | date:'Y-m-d' }} </td>  
                                    <td style='text-align:center'>{{ bap_submission.get_status_display }}</td>
                                    {% if bap_submission.speciesInstance.species.render_cares %}
                                        <td style='text-align:center'>Yes</td>
                                    {% else %} 
                                        <td style='text-align:center'></td>
                                    {% endif %}  
                                    
                                    {% if userCanEdit and bap_submission.request_points_review %}
                                     <td style='text-align:center'><a href="{% url 'bapSubmission' bap_submission.id %}">{{ bap_submission.points }}</a></td>
                                    {% else %} 
                                        <td style='text-align:center'>{{ bap_submission.points }}</td>
                                    {% endif %}                                      
                                </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 %}
            {% else %}
                <p>None</p>
            {% endif %}
        </div>
    </div>
    <div>
        <p><a class="btn btn-secondary" href="{% url 'bapLeaderboard' bap_club.id %}" role="button">BAP Leaderboard</a></p>
        <p>BAP Submissions are created from the <i>Aquarist Species</i> available in your <i>Fishroom</i>.</p>
        <p>For help submitting BAP requests, click the BAP Submissions Help button below.</p>
        <p><a class="btn btn-secondary" href="{% url 'bap_submissions_overview' %}" role="button">BAP Submissions Help</a></p>
    </div>
</div>

{% endblock content %}