{% extends "base.html" %}
{% load static %}

{% block title %}
    Manage Anglers | 
{% endblock title %}

{% block style %}
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
{% endblock style %}

{% block header_buttons %}
<a href="/" class="btn btn-company px-4">Back</a>
{% endblock header_buttons %}

{% block content %}

    <div class="p-4 row">
        <div class="col-md-3">
            <div class="input-group">
                <button type="button" data-bs-toggle="dropdown" class="btn btn-outline-company border-secondary-subtle">
                    <i class="bi bi-sort-up"></i>
                </button>
                <input type="search" name="search" id="search" class="form-control border-secondary-subtle shadow-none" placeholder="Search Anglers">
                <button type="button" class="btn btn-outline-company border-secondary-subtle rounded-end" id="searchButton"><i class="bi bi-search"></i></button>
            </div>
        </div>
        <div class="col-md">
            <div class="input-group">
                <button class="btn border-secondary-subtle btn-outline-company me-4 rounded-end" id="addAngler" data-bs-toggle="tooltip" data-bs-title="Add Angler" data-bs-custom-class="light-tooltip">
                    <i class="bi bi-plus-lg"></i>
                </button>
                <button class="btn border-secondary-subtle btn-outline-company rounded-start" id="ContractView" data-bs-toggle="tooltip" data-bs-title="Compact View" data-bs-custom-class="light-tooltip">
                    <i class="bi bi-arrows-angle-contract"></i>
                </button>
                <button class="btn border-secondary-subtle btn-outline-company" id="expandView" data-bs-toggle="tooltip" data-bs-title="Enlarged View" data-bs-custom-class="light-tooltip">
                    <i class="bi bi-arrows-angle-expand"></i>
                </button>
            </div>

        </div>
    </div>

    <div class="px-4 mt-2 mb-4 row">
        {% for angler in anglers %}
        <div class="col-md-2 mb-4">
            <div class="card w-100 h-100 fluid-hover-zoom shadow-sm md-shadow-on-hover">
                <div class="card-body">
                    <h5 class="card-title">{{ angler.first_name }}</h5>
                    <h6 class="card-subtitle mb-2 text-body-secondary">{{ angler.last_name }}</h6>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    {% comment %}
    <!-- Header -->
    <div class="container"></div>
    <div class="bg-body p-4 d-flex">
        <a href="{% url 'index' %}" class="btn btn-company px-4">Back</a>
        <img class="ms-auto" width="40" src="{% static 'img/logo.webp' %}">
    </div>
    <!-- End Header -->
    <div class="container my-4 p-4 pb-0 bg-body rounded">

        <!-- Controls Header -->
        <div class="row mb-4">
            <div class="col-12 col-xl-4 d-flex">
                <h3 class="mb-3 mb-xl-0">
                    <span class="me-sm-3">Manage Anglers</span>
                    <div class="border-company border-bottom border-2 w-100 pt-1"></div>
                </h3>
            </div>
            <div class="col-sm-3 col-md-6 col-xl-4 mb-3 mb-sm-0">
                <div class="input-group justify-content-xl-end">
                    <button class="btn border-secondary-subtle btn-outline-company" id="addAngler" data-bs-toggle="tooltip" data-bs-title="Add Angler">
                        <i class="bi bi-person"></i>
                    </button>
                    <button class="btn border-secondary-subtle btn-outline-company" id="addTeam" data-bs-toggle="tooltip" data-bs-title="Add Team">
                        <i class="bi bi-people"></i>
                    </button>
                    <button class="btn border-secondary-subtle btn-outline-company" id="addSection" data-bs-toggle="tooltip" data-bs-title="Add Section">
                        <i class="bi bi-layers"></i>
                    </button>
                </div>
            </div>
            <div class="col-sm-9 col-md-6 col-xl-4">

                <!-- Search Bar -->
                <div class="input-group dropdown">
                    <button type="button" data-bs-toggle="dropdown" class="btn btn-outline-company border-secondary-subtle">
                        <i class="bi bi-sort-up"></i>
                    </button>
                    <input type="search" class="form-control border-secondary-subtle shadow-none" placeholder="Search Anglers" id="search">
                    <button type="button" class="btn btn-outline-company border-secondary-subtle rounded-end" id="searchButton"><i class="bi bi-search"></i></button>

                    <!-- Filters Dropdown -->
                    <form id="sortForm">
                        <ul class="dropdown-menu py-3 text-body-secondary bg-body-tertiary border border-light-subtle shadow-sm justify-self-center mt-2" onclick="event.stopPropagation()">
                            <li class="px-4">
                                <h3 class="h6 mb-3">Show Anglers in groups of</h3>
                                <div>
                                    <div class="d-inline-block form-check">
                                        <input type="radio" class="form-check-input" checked value="teams" name="showGroups" id="showTeams">
                                        <label for="showTeams" class="form-check-label">Teams</label>
                                    </div>
                                    <div class="d-inline-block form-check ms-4">
                                        <input type="radio" class="form-check-input" value="sections" name="showGroups" id="showSections">
                                        <label for="showSections" class="form-check-label">Sections</label>
                                    </div>
                                </div>
                            </li>
                            <li class="dropdown-divider my-3 mx-4 bg-light-subtle"></li>
                            <li class="px-4">
                                <h3 class="h6 mb-3">Sort Anglers by</h3>
                                <div>
                                    <div class="d-inline-block form-check">
                                        <input type="radio" class="form-check-input" value="names" name="sortAnglers" id="sortNames">
                                        <label for="sortNames" class="form-check-label">Name</label>
                                    </div>
                                    <div class="d-inline-block form-check ms-4">
                                        <input type="radio" class="form-check-input" checked value="pegs" name="sortAnglers" id="sortPegs">
                                        <label for="sortPegs" class="form-check-label">Peg Number</label>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </form>
                    <!-- End Filters Dropdown -->

                </div>
                <!-- End Search Bar -->

            </div>
        </div>
        <!-- End Controls Header -->

        <!-- Groups Container -->
        <div class="row" id="groups"></div>
        <!-- End Groups Container -->

        <!-- Loading Spinner -->
        <div class="col-12 text-center pb-4" id="loadingSpinner" style="display: none;">
            <div class="spinner-border spinner-border-lg" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
        <!-- End Loading Spinner -->

        <!-- Not Found Message -->
        <div class="pb-4" id="notFound" style="display: none;">
            <div class="alert alert-danger m-0" role="alert">
                No groups could be found, perhaps you need to refine your search?
            </div>
        </div>
        <!-- End Not Found Message -->
          
    </div>

    <!-- Section Modal -->
    {% include "modals/section.html" %}
    <!-- End Section Modal -->

    <!-- Team Modal -->
    {% include "modals/team.html" %}
    <!-- End Team Modal -->

    <!-- Angler Modal -->
    {% include "modals/angler.html" %}
    <!-- End Angler Modal -->
    {% endcomment %}

{% endblock content %}

{% block scripts %}
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.full.min.js"></script>

    <script type="text/javascript">
        const pageUrl = "{% url 'anglers' %}"
        // const getPageDataUrl = "{% url 'get-angler-data' %}";  DEPRICATED FOR REWRITE
        // const updateMemberUrl = "{% url 'update-member' %}";
        // const updateSectionUrl = "{% url 'update-section' %}"
        // const updateTeamUrl = "{% url 'update-team' %}"
        const getNextIdentifierUrl = "{% url 'get-next-identifier' %}"
        const csrfMiddlewareToken = "{{ csrf_token }}";
    </script>
    <script src="{% static 'js/mainapp/anglers.js' %}"></script>
{% endblock scripts %}