
<div class="modal fade" id="anglerModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content border-0">
            <form id="anglerForm">

                <!-- Modal Header -->
                <div class="modal-header border-0">
                    <h3 class="modal-title fs-5 color">
                        <span class="pe-3" id="anglerTitle">Angler Modal Title</span>
                        <div class="border-company border-bottom border-2 w-100 pt-1"></div>
                    </h3>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
                </div>
                <!-- End Modal Header -->

                <!-- Modal Body -->
                <div class="modal-body">

                    <!-- Angler Name -->
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input class="form-control" type="text" name="anglerForename" id="anglerForename" placeholder="Forename" requred maxlength="30">
                                <label for="anglerForename">Forename</label>
                            </div>
                            <div id="anglerForenameError" class="text-danger my-2 error" style="display: none;"></div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input class="form-control" type="text" name="anglerSurname" id="anglerSurname" placeholder="Surname" requred maxlength="30">
                                <label for="anglerSurname">Surname</label>
                            </div>
                            <div id="anglerSurnameError" class="text-danger my-2 error" style="display: none;"></div>
                        </div>
                    </div>
                    <!-- End Angler Name -->

                    <!-- Angler Team -->
                    <div class="input-group mb-3">
                        <span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Team">
                            <i class="bi bi-people"></i>
                        </span>
                        <select class="form-select" name="anglerTeam" id="anglerTeam" required></select>
                    </div>
                    <div id="anglerTeamError" class="text-danger my-2 error" style="display: none;"></div>
                    <!-- End Angler Team -->

                    <!-- Angler Section -->
                    <div class="col-12 mb-3">
                        <div class="input-group">
                            <span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Section">
                                <i class="bi bi-layers"></i>
                            </span>
                            <select class="form-select" name="anglerSection" id="anglerSection" required></select>
                        </div>
                        <div id="anglerSectionError" class="text-danger my-2 error" style="display: none;"></div>
                    </div>
                    <!-- End Angler Section -->

                    <!-- Angler Peg Number -->
                    <div class="row">
                        <div class="col-md-6 d-flex">
                            <div class="input-group">
                                <span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Peg Number">
                                    <i class="bi bi-tag"></i>
                                </span>
                                <input type="number" name="anglerPeg" id="anglerPeg" class="form-control" min="1" max="9999" required>
                            </div>
                            <button type="button" id="anglerPegNext" class="btn btn-outline-company border-secondary-subtle ms-3" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Find next available peg">
                                <i class="bi bi-arrow-clockwise"></i>
                            </button>
                        </div>
                        <div class="col-md-7 mt-2 pe-md-3 text-danger error" id="anglerPegError" style="display:none;"></div>
                    </div>
                    <!-- End Angler Peg Number -->

                </div>
                <!-- End Modal Body -->

                <!-- Modal Footer -->
                <div class="modal-footer border-0 d-flex">
                    <button type="button" class="btn btn-outline-danger me-auto" style="display: hidden;" id="anglerDelete">Delete Angler</button>
                    <button type="submit" class="btn btn-company px-4" id="saveAngler">Save</button>
                </div>
                <!-- End Modal Footer -->

            </form>
        </div>
    </div>
</div>