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

            <!-- Modal Header -->
            <div class="modal-header border-0">
                <h3 class="modal-title fs-5" id="sectionTitle">
                    Section Modal Title
                    <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">
                <form id="sectionForm">

                    <!-- Section Character -->
                    <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="Section Character">
                                <i class="bi bi-layers"></i>
                            </span>
                            <input type="text" name="sectionCharacter" id="sectionCharacter" class="form-control" minlength="1" maxlength="3" value="A">
                        </div>
                        <button type="button" id="sectionCharacterNext" class="btn btn-outline-company border-secondary-subtle ms-3" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Find next available character">
                            <i class="bi bi-arrow-clockwise"></i>
                        </button>
                    </div>
                    <div class="col-md-6 mt-2 text-danger" id="sectionCharacterError" style="display: hidden"></div>
                    <!-- End Section Character -->

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

            <!-- Modal Footer -->
            <div class="modal-footer border-0">
                <button type="button" class="btn btn-company px-4" id="saveSection">Save</button>
            </div>
            <!-- End Modal Footer -->

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