<main>
    <div class="content">
        <div class="titleBox">
            <h2 class="title">Inscripción de Alumnos</h2>
            <div class="dataSearch">
                <input type="search" id="search"
                    placeholder="Buscar..." autocomplete="off" onkeypress="searching(event)">
                <button type="button" id="addNewPupils" class="search" onclick="navigationMenu('infoRegister')">Agregar Alumno</button>
                <button type="button" id="loadByExcel" class="masiveLoad" onclick="showPopup()">Cargar desde Excel</button>
            </div>
        </div>
            <table class="tableResult">
            <tbody>
                <tr>
                    <th class="ID">
                        ID
                        <div class="arrowsGroup">
                            <i class="up" id="idUp" onclick="changeOrder(this)"></i>
                            <i class="down" id="idDown" onclick="changeOrder(this)"></i>
                        </div>
                    </th>
                    <th class="grade">Grado
                        <div class="arrowsGroup">
                            <i class="up" id="gradeUp" onclick="changeOrder(this)"></i>
                            <i class="down" id="gradeDown" onclick="changeOrder(this)"></i>
                        </div>
                    </th>
                    <th class="section">Secci&oacute;n
                        <div class="arrowsGroup">
                            <i class="up" id="sectionUp" onclick="changeOrder(this)"></i>
                            <i class="down" id="sectionDown" onclick="changeOrder(this)"></i>
                        </div>
                    </th>
                    <th class="nameTable">Nombre
                        <div class="arrowsGroup">
                            <i class="up" id="nameUp" onclick="changeOrder(this)"></i>
                            <i class="down" id="nameDown" onclick="changeOrder(this)"></i>
                        </div>
                    </th>
                    <th class="ci">C&eacute;dula Escolar
                        <div class="arrowsGroup">
                            <i class="up" id="ciUp" onclick="changeOrder(this)"></i>
                            <i class="down" id="ciDown" onclick="changeOrder(this)"></i>
                        </div>
                    </th>
                    <th class="birth">Fecha de Nacimiento
                        <div class="arrowsGroup">
                            <i class="up" id="birthdateUp" onclick="changeOrder(this)"></i>
                            <i class="down" id="birthdateDown" onclick="changeOrder(this)"></i>
                        </div>
                    </th>
                    <th class="age">Edad
                        <div class="arrowsGroup">
                            <i class="up" id="ageUp" onclick="changeOrder(this)"></i>
                            <i class="down" id="ageDown" onclick="changeOrder(this)"></i>
                        </div>
                    </th>
                    <th class="gender">G&eacute;nero
                        <div class="arrowsGroup">
                            <i class="up" id="genderUp" onclick="changeOrder(this)"></i>
                            <i class="down" id="genderDown" onclick="changeOrder(this)"></i>
                        </div>
                    </th>
                </tr>
            </tbody>
        </table>
        <form class="exportBox">
            <button type="button" onclick="exportTableToExcel()" class="exportData">Exportar datos en Excel</button>
            <button type="button" class="deleteStudents" onclick="deleteSavedPupils()">Borrar alumnos</button>
        </form>
        <div class="pages"><ul class="listPages"></ul></div>
    </div>
    <div class="popup" onclick="closeWindow()"></div>
    <div class="excelEntry" onclick="closeExcelEntry()"></div>
    <div class="popupLoad"></div>
</main>