{% extends "base.html" %}

{% block title %}
    Teams & Members | 
{% endblock title %}

{% block content %}
    <div class="bg-body p-4">
        <a href="{% url 'index' %}" class="btn btn-primary px-4">Back</a>
    </div>

    <div class="container my-4 p-4 pb-0 bg-body-secondary rounded">
        <div class="row mb-4">
            <div class="col-md-6 col-xl-8">
                <h3>Teams &amp; Members</h3>
            </div>
            <div class="col-md-6 col-xl-4">
                <div class="input-group mb-4 mb-md-0">
                    <input type="search" class="form-control" placeholder="Search Members" id="search">
                    <button type="button" class="btn border bg-body-tertiary" id="searchButton"><i class="bi bi-search"></i></button>
                </div>
            </div>
        </div>

        <div class="row" id="teamsContainer"></div>
        <div class="col-12 text-center pb-4" id="teamsLoadingSpinner">
            <div class="spinner-border spinner-border-lg" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
        <div class="pb-4" id="teamsNotFound">
            <div class="alert alert-danger m-0" role="alert">
                No teams found under that search
            </div>
        </div>
          
    </div>

    <!-- Edit Modal -->
    <div class="modal fade" id="editMemberModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content border-0 bg-body-secondary">
                <div class="modal-header">
                    <h3 class="modal-title fs-5" id="editMemberName">Member Name Here</h3>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <label for="editMemberFirstName" class="form-label">Forename</label>
                        <input type="text" name="editMemberFirstName" id="editMemberFirstName" class="form-control mb-2">
    
                        <label for="editMemberLastName" class="form-label">Surname</label>
                        <input type="text" name="editMemberLastName" id="editMemberLastName" class="form-control mb-2">
    
                        <label for="editMemberTeam" class="form-label">Team</label>
                        <select name="editMemberTeam" id="editMemberTeam" class="form-select mb-2">
                            {% for team in teams %}
                                <option value="{{ team.identifier }}">{{ team.identifier }}</option>
                            {% endfor %}
                        </select>

                        <label for="editMemberPeg" class="form-label">Peg Number</label>
                        <input type="number" name="editMemberPeg" id="editMemberPeg" class="form-control" min="1" max="9999">
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="saveEditModal">Save Changes</button>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}

{% load static %}
{% block scripts %}
    <script type="text/javascript">
        const getTeamsUrl = "{% url 'get-teams' %}";
        const updateMemberUrl = "{% url 'update-member' %}";
        const csrfMiddlewareToken = "{{ csrf_token }}";
    </script>
    <script src="{% static 'js/teams.js' %}"></script>
{% endblock scripts %}