From 721bc7c25ed5a1f71b9aa71de2e355814427d342 Mon Sep 17 00:00:00 2001
From: Ari Anisfeld <ari.anisfeld@gmail.com>
Date: Sat, 23 Dec 2023 17:04:58 -0600
Subject: [PATCH 1/7] #41 add students

---
 prijateli_tree/app/routers/administration.py  | 80 ++++++++++++++++++-
 .../app/templates/admin_bulk_add.html         | 41 ++++++++++
 2 files changed, 120 insertions(+), 1 deletion(-)
 create mode 100644 prijateli_tree/app/templates/admin_bulk_add.html

diff --git a/prijateli_tree/app/routers/administration.py b/prijateli_tree/app/routers/administration.py
index 6ae5bf59..090c0d1a 100644
--- a/prijateli_tree/app/routers/administration.py
+++ b/prijateli_tree/app/routers/administration.py
@@ -5,7 +5,16 @@
 from pathlib import Path
 from typing import Annotated
 
-from fastapi import APIRouter, Depends, Form, Request
+import pandas as pd
+from fastapi import (
+    APIRouter,
+    Depends,
+    File,
+    Form,
+    HTTPException,
+    Request,
+    UploadFile,
+)
 from fastapi.responses import HTMLResponse, RedirectResponse, Response
 from fastapi.templating import Jinja2Templates
 from fastapi_login import LoginManager
@@ -32,6 +41,7 @@
     ROLE_STUDENT,
     ROLE_SUPER_ADMIN,
 )
+from prijateli_tree.app.utils.games import raise_exception_if_not
 
 
 base_dir = Path(__file__).resolve().parent
@@ -364,3 +374,71 @@ def add_players_to_game(pos_players: list[GamePlayer], game, db) -> None:
         )
     db.commit()
     db.refresh(game)
+
+
+@router.get("/add_students", response_class=HTMLResponse)
+def dashboard_add_students(
+    request: Request,
+    user=Depends(login_manager.optional),
+) -> Response:
+    if user is None:
+        return RedirectResponse("login", status_code=HTTPStatus.FOUND)
+
+    return templates.TemplateResponse(
+        "admin_bulk_add.html",
+        {
+            "request": request,
+        },
+    )
+
+
+@router.post("/add_students", response_class=HTMLResponse)
+def add_students(
+    file: UploadFile = File(...),
+    user=Depends(login_manager.optional),
+    db: Session = Depends(get_db),
+) -> RedirectResponse:
+    if user is None:
+        return RedirectResponse("login", status_code=HTTPStatus.FOUND)
+
+    try:
+        student_df = pd.read_csv(file.file)
+        expected_fields = [
+            "first_name",
+            "last_name",
+            "grade_level",
+            "high_school_id",
+            "language_id",
+            "qualtrics_id",
+        ]
+        raise_exception_if_not(
+            all([x in student_df.columns for x in expected_fields]),
+            detail="Upload file is missing expected fields",
+        )
+
+        for index, student in student_df.iterrows():
+            student_in = User(
+                created_by=user.id,
+                **student,
+                role="student",
+            )
+            db.add(student_in)
+        db.commit()
+
+    except Exception as e:
+        # Rollback the transaction if an error occurs
+        raise HTTPException(
+            status_code=500, detail=f"Internal Server Error: {str(e)}"
+        )
+
+    finally:
+        file.file.close()
+
+    redirect_url = URL("/admin/dashboard").include_query_params(
+        success=f"{index + 1} students added to the database."
+    )
+
+    return RedirectResponse(
+        redirect_url,
+        status_code=HTTPStatus.FOUND,
+    )
diff --git a/prijateli_tree/app/templates/admin_bulk_add.html b/prijateli_tree/app/templates/admin_bulk_add.html
new file mode 100644
index 00000000..5619ff20
--- /dev/null
+++ b/prijateli_tree/app/templates/admin_bulk_add.html
@@ -0,0 +1,41 @@
+{% extends "base.html" %}
+{% block title %}
+  PrijateliTree - Add Students
+{% endblock title %}
+{% block helper_script %}
+  <script>
+  function cleanParams() {
+      // Used to clear the URL of parameters after the banner alert is closed.
+      window.history.replaceState(null, '', window.location.pathname);
+    }
+  </script>
+{% endblock helper_script %}
+{% block content %}
+  {% if error %}
+    <div class="alert alert-danger alert-dismissible fade show" role="alert">
+      <strong>ERROR:</strong> {{ error }}
+      <button type="button"
+              class="btn-close"
+              data-bs-dismiss="alert"
+              aria-label="Close"
+              onclick="cleanParams()"></button>
+    </div>
+  {% endif %}
+  <div class="container-sm">
+    <div class="row">
+      <div class="form-container bg-light-subtle col-xs-12 offset-md-1 col-md-10 offset-lg-1 col col-lg-10 offset-xl-3 col col-xl-6">
+        <form method="post"
+              action='{{ url_for("add_students") }}'
+              enctype="multipart/form-data">
+          <label for="file">Choose a CSV file:</label>
+          <input type="file" name="file" accept=".csv" required>
+          <br>
+          <button type="submit" class="btn btn-primary float-end">Upload Data</button>
+        </form>
+      </div>
+    </div>
+  </div>
+{% endblock content %}
+<form class="d-flex" action='{{ url_for("logout") }}'>
+  <button class="float-end btn btn-primary" type="submit">Logout</button>
+</form>

From fdd25f4fce88413a7b383e3b3ff54f61b6a792c6 Mon Sep 17 00:00:00 2001
From: Ari Anisfeld <ari.anisfeld@gmail.com>
Date: Tue, 9 Jan 2024 22:50:54 -0600
Subject: [PATCH 2/7] #76 adding dataTable select

---
 prijateli_tree/app/static/css/datatables.min.css    | 13 +++++++++++++
 .../app/static/js/dataTables.select.min.js          |  4 ++++
 prijateli_tree/app/templates/base.html              |  4 ++++
 3 files changed, 21 insertions(+)
 create mode 100644 prijateli_tree/app/static/css/datatables.min.css
 create mode 100644 prijateli_tree/app/static/js/dataTables.select.min.js

diff --git a/prijateli_tree/app/static/css/datatables.min.css b/prijateli_tree/app/static/css/datatables.min.css
new file mode 100644
index 00000000..3fc0c3f6
--- /dev/null
+++ b/prijateli_tree/app/static/css/datatables.min.css
@@ -0,0 +1,13 @@
+/*
+ * This combined file was created by the DataTables downloader builder:
+ *   https://datatables.net/download
+ *
+ * To rebuild or modify this file with the latest versions of the included
+ * software please visit:
+ *   https://datatables.net/download/#dt/dt-1.13.8
+ *
+ * Included libraries:
+ *  DataTables 1.13.8
+ */
+
+ :root{--dt-row-selected: 13, 110, 253;--dt-row-selected-text: 255, 255, 255;--dt-row-selected-link: 9, 10, 11;--dt-row-stripe: 0, 0, 0;--dt-row-hover: 0, 0, 0;--dt-column-ordering: 0, 0, 0;--dt-html-background: white}:root.dark{--dt-html-background: rgb(33, 37, 41)}table.dataTable td.dt-control{text-align:center;cursor:pointer}table.dataTable td.dt-control:before{display:inline-block;color:rgba(0, 0, 0, 0.5);content:"▶"}table.dataTable tr.dt-hasChild td.dt-control:before{content:"▼"}html.dark table.dataTable td.dt-control:before{color:rgba(255, 255, 255, 0.5)}html.dark table.dataTable tr.dt-hasChild td.dt-control:before{color:rgba(255, 255, 255, 0.5)}table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc,table.dataTable thead>tr>th.sorting_asc_disabled,table.dataTable thead>tr>th.sorting_desc_disabled,table.dataTable thead>tr>td.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>td.sorting_asc_disabled,table.dataTable thead>tr>td.sorting_desc_disabled{cursor:pointer;position:relative;padding-right:26px}table.dataTable thead>tr>th.sorting:before,table.dataTable thead>tr>th.sorting:after,table.dataTable thead>tr>th.sorting_asc:before,table.dataTable thead>tr>th.sorting_asc:after,table.dataTable thead>tr>th.sorting_desc:before,table.dataTable thead>tr>th.sorting_desc:after,table.dataTable thead>tr>th.sorting_asc_disabled:before,table.dataTable thead>tr>th.sorting_asc_disabled:after,table.dataTable thead>tr>th.sorting_desc_disabled:before,table.dataTable thead>tr>th.sorting_desc_disabled:after,table.dataTable thead>tr>td.sorting:before,table.dataTable thead>tr>td.sorting:after,table.dataTable thead>tr>td.sorting_asc:before,table.dataTable thead>tr>td.sorting_asc:after,table.dataTable thead>tr>td.sorting_desc:before,table.dataTable thead>tr>td.sorting_desc:after,table.dataTable thead>tr>td.sorting_asc_disabled:before,table.dataTable thead>tr>td.sorting_asc_disabled:after,table.dataTable thead>tr>td.sorting_desc_disabled:before,table.dataTable thead>tr>td.sorting_desc_disabled:after{position:absolute;display:block;opacity:.125;right:10px;line-height:9px;font-size:.8em}table.dataTable thead>tr>th.sorting:before,table.dataTable thead>tr>th.sorting_asc:before,table.dataTable thead>tr>th.sorting_desc:before,table.dataTable thead>tr>th.sorting_asc_disabled:before,table.dataTable thead>tr>th.sorting_desc_disabled:before,table.dataTable thead>tr>td.sorting:before,table.dataTable thead>tr>td.sorting_asc:before,table.dataTable thead>tr>td.sorting_desc:before,table.dataTable thead>tr>td.sorting_asc_disabled:before,table.dataTable thead>tr>td.sorting_desc_disabled:before{bottom:50%;content:"▲";content:"▲"/""}table.dataTable thead>tr>th.sorting:after,table.dataTable thead>tr>th.sorting_asc:after,table.dataTable thead>tr>th.sorting_desc:after,table.dataTable thead>tr>th.sorting_asc_disabled:after,table.dataTable thead>tr>th.sorting_desc_disabled:after,table.dataTable thead>tr>td.sorting:after,table.dataTable thead>tr>td.sorting_asc:after,table.dataTable thead>tr>td.sorting_desc:after,table.dataTable thead>tr>td.sorting_asc_disabled:after,table.dataTable thead>tr>td.sorting_desc_disabled:after{top:50%;content:"▼";content:"▼"/""}table.dataTable thead>tr>th.sorting_asc:before,table.dataTable thead>tr>th.sorting_desc:after,table.dataTable thead>tr>td.sorting_asc:before,table.dataTable thead>tr>td.sorting_desc:after{opacity:.6}table.dataTable thead>tr>th.sorting_desc_disabled:after,table.dataTable thead>tr>th.sorting_asc_disabled:before,table.dataTable thead>tr>td.sorting_desc_disabled:after,table.dataTable thead>tr>td.sorting_asc_disabled:before{display:none}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}div.dataTables_scrollBody>table.dataTable>thead>tr>th:before,div.dataTables_scrollBody>table.dataTable>thead>tr>th:after,div.dataTables_scrollBody>table.dataTable>thead>tr>td:before,div.dataTables_scrollBody>table.dataTable>thead>tr>td:after{display:none}div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-26px;text-align:center;padding:2px;z-index:10}div.dataTables_processing>div:last-child{position:relative;width:80px;height:15px;margin:1em auto}div.dataTables_processing>div:last-child>div{position:absolute;top:0;width:13px;height:13px;border-radius:50%;background:rgb(13, 110, 253);background:rgb(var(--dt-row-selected));animation-timing-function:cubic-bezier(0, 1, 1, 0)}div.dataTables_processing>div:last-child>div:nth-child(1){left:8px;animation:datatables-loader-1 .6s infinite}div.dataTables_processing>div:last-child>div:nth-child(2){left:8px;animation:datatables-loader-2 .6s infinite}div.dataTables_processing>div:last-child>div:nth-child(3){left:32px;animation:datatables-loader-2 .6s infinite}div.dataTables_processing>div:last-child>div:nth-child(4){left:56px;animation:datatables-loader-3 .6s infinite}@keyframes datatables-loader-1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes datatables-loader-3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes datatables-loader-2{0%{transform:translate(0, 0)}100%{transform:translate(24px, 0)}}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}table.dataTable th.dt-left,table.dataTable td.dt-left{text-align:left}table.dataTable th.dt-center,table.dataTable td.dt-center,table.dataTable td.dataTables_empty{text-align:center}table.dataTable th.dt-right,table.dataTable td.dt-right{text-align:right}table.dataTable th.dt-justify,table.dataTable td.dt-justify{text-align:justify}table.dataTable th.dt-nowrap,table.dataTable td.dt-nowrap{white-space:nowrap}table.dataTable thead th,table.dataTable thead td,table.dataTable tfoot th,table.dataTable tfoot td{text-align:left}table.dataTable thead th.dt-head-left,table.dataTable thead td.dt-head-left,table.dataTable tfoot th.dt-head-left,table.dataTable tfoot td.dt-head-left{text-align:left}table.dataTable thead th.dt-head-center,table.dataTable thead td.dt-head-center,table.dataTable tfoot th.dt-head-center,table.dataTable tfoot td.dt-head-center{text-align:center}table.dataTable thead th.dt-head-right,table.dataTable thead td.dt-head-right,table.dataTable tfoot th.dt-head-right,table.dataTable tfoot td.dt-head-right{text-align:right}table.dataTable thead th.dt-head-justify,table.dataTable thead td.dt-head-justify,table.dataTable tfoot th.dt-head-justify,table.dataTable tfoot td.dt-head-justify{text-align:justify}table.dataTable thead th.dt-head-nowrap,table.dataTable thead td.dt-head-nowrap,table.dataTable tfoot th.dt-head-nowrap,table.dataTable tfoot td.dt-head-nowrap{white-space:nowrap}table.dataTable tbody th.dt-body-left,table.dataTable tbody td.dt-body-left{text-align:left}table.dataTable tbody th.dt-body-center,table.dataTable tbody td.dt-body-center{text-align:center}table.dataTable tbody th.dt-body-right,table.dataTable tbody td.dt-body-right{text-align:right}table.dataTable tbody th.dt-body-justify,table.dataTable tbody td.dt-body-justify{text-align:justify}table.dataTable tbody th.dt-body-nowrap,table.dataTable tbody td.dt-body-nowrap{white-space:nowrap}table.dataTable{width:100%;margin:0 auto;clear:both;border-collapse:separate;border-spacing:0}table.dataTable thead th,table.dataTable tfoot th{font-weight:bold}table.dataTable>thead>tr>th,table.dataTable>thead>tr>td{padding:10px;border-bottom:1px solid rgba(0, 0, 0, 0.3)}table.dataTable>thead>tr>th:active,table.dataTable>thead>tr>td:active{outline:none}table.dataTable>tfoot>tr>th,table.dataTable>tfoot>tr>td{padding:10px 10px 6px 10px;border-top:1px solid rgba(0, 0, 0, 0.3)}table.dataTable tbody tr{background-color:transparent}table.dataTable tbody tr.selected>*{box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.9);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.9);color:rgb(255, 255, 255);color:rgb(var(--dt-row-selected-text))}table.dataTable tbody tr.selected a{color:rgb(9, 10, 11);color:rgb(var(--dt-row-selected-link))}table.dataTable tbody th,table.dataTable tbody td{padding:8px 10px}table.dataTable.row-border>tbody>tr>th,table.dataTable.row-border>tbody>tr>td,table.dataTable.display>tbody>tr>th,table.dataTable.display>tbody>tr>td{border-top:1px solid rgba(0, 0, 0, 0.15)}table.dataTable.row-border>tbody>tr:first-child>th,table.dataTable.row-border>tbody>tr:first-child>td,table.dataTable.display>tbody>tr:first-child>th,table.dataTable.display>tbody>tr:first-child>td{border-top:none}table.dataTable.row-border>tbody>tr.selected+tr.selected>td,table.dataTable.display>tbody>tr.selected+tr.selected>td{border-top-color:#0262ef}table.dataTable.cell-border>tbody>tr>th,table.dataTable.cell-border>tbody>tr>td{border-top:1px solid rgba(0, 0, 0, 0.15);border-right:1px solid rgba(0, 0, 0, 0.15)}table.dataTable.cell-border>tbody>tr>th:first-child,table.dataTable.cell-border>tbody>tr>td:first-child{border-left:1px solid rgba(0, 0, 0, 0.15)}table.dataTable.cell-border>tbody>tr:first-child>th,table.dataTable.cell-border>tbody>tr:first-child>td{border-top:none}table.dataTable.stripe>tbody>tr.odd>*,table.dataTable.display>tbody>tr.odd>*{box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.023);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.023)}table.dataTable.stripe>tbody>tr.odd.selected>*,table.dataTable.display>tbody>tr.odd.selected>*{box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.923);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.923)}table.dataTable.hover>tbody>tr:hover>*,table.dataTable.display>tbody>tr:hover>*{box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.035);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.035)}table.dataTable.hover>tbody>tr.selected:hover>*,table.dataTable.display>tbody>tr.selected:hover>*{box-shadow:inset 0 0 0 9999px #0d6efd !important;box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 1) !important}table.dataTable.order-column>tbody tr>.sorting_1,table.dataTable.order-column>tbody tr>.sorting_2,table.dataTable.order-column>tbody tr>.sorting_3,table.dataTable.display>tbody tr>.sorting_1,table.dataTable.display>tbody tr>.sorting_2,table.dataTable.display>tbody tr>.sorting_3{box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.019);box-shadow:inset 0 0 0 9999px rgba(var(--dt-column-ordering), 0.019)}table.dataTable.order-column>tbody tr.selected>.sorting_1,table.dataTable.order-column>tbody tr.selected>.sorting_2,table.dataTable.order-column>tbody tr.selected>.sorting_3,table.dataTable.display>tbody tr.selected>.sorting_1,table.dataTable.display>tbody tr.selected>.sorting_2,table.dataTable.display>tbody tr.selected>.sorting_3{box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.919);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.919)}table.dataTable.display>tbody>tr.odd>.sorting_1,table.dataTable.order-column.stripe>tbody>tr.odd>.sorting_1{box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.054);box-shadow:inset 0 0 0 9999px rgba(var(--dt-column-ordering), 0.054)}table.dataTable.display>tbody>tr.odd>.sorting_2,table.dataTable.order-column.stripe>tbody>tr.odd>.sorting_2{box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.047);box-shadow:inset 0 0 0 9999px rgba(var(--dt-column-ordering), 0.047)}table.dataTable.display>tbody>tr.odd>.sorting_3,table.dataTable.order-column.stripe>tbody>tr.odd>.sorting_3{box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.039);box-shadow:inset 0 0 0 9999px rgba(var(--dt-column-ordering), 0.039)}table.dataTable.display>tbody>tr.odd.selected>.sorting_1,table.dataTable.order-column.stripe>tbody>tr.odd.selected>.sorting_1{box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.954);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.954)}table.dataTable.display>tbody>tr.odd.selected>.sorting_2,table.dataTable.order-column.stripe>tbody>tr.odd.selected>.sorting_2{box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.947);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.947)}table.dataTable.display>tbody>tr.odd.selected>.sorting_3,table.dataTable.order-column.stripe>tbody>tr.odd.selected>.sorting_3{box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.939);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.939)}table.dataTable.display>tbody>tr.even>.sorting_1,table.dataTable.order-column.stripe>tbody>tr.even>.sorting_1{box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.019);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.019)}table.dataTable.display>tbody>tr.even>.sorting_2,table.dataTable.order-column.stripe>tbody>tr.even>.sorting_2{box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.011);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.011)}table.dataTable.display>tbody>tr.even>.sorting_3,table.dataTable.order-column.stripe>tbody>tr.even>.sorting_3{box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.003);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.003)}table.dataTable.display>tbody>tr.even.selected>.sorting_1,table.dataTable.order-column.stripe>tbody>tr.even.selected>.sorting_1{box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.919);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.919)}table.dataTable.display>tbody>tr.even.selected>.sorting_2,table.dataTable.order-column.stripe>tbody>tr.even.selected>.sorting_2{box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.911);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.911)}table.dataTable.display>tbody>tr.even.selected>.sorting_3,table.dataTable.order-column.stripe>tbody>tr.even.selected>.sorting_3{box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.903);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.903)}table.dataTable.display tbody tr:hover>.sorting_1,table.dataTable.order-column.hover tbody tr:hover>.sorting_1{box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.082);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.082)}table.dataTable.display tbody tr:hover>.sorting_2,table.dataTable.order-column.hover tbody tr:hover>.sorting_2{box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.074);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.074)}table.dataTable.display tbody tr:hover>.sorting_3,table.dataTable.order-column.hover tbody tr:hover>.sorting_3{box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.062);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.062)}table.dataTable.display tbody tr:hover.selected>.sorting_1,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_1{box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.982);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.982)}table.dataTable.display tbody tr:hover.selected>.sorting_2,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_2{box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.974);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.974)}table.dataTable.display tbody tr:hover.selected>.sorting_3,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_3{box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.962);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.962)}table.dataTable.no-footer{border-bottom:1px solid rgba(0, 0, 0, 0.3)}table.dataTable.compact thead th,table.dataTable.compact thead td,table.dataTable.compact tfoot th,table.dataTable.compact tfoot td,table.dataTable.compact tbody th,table.dataTable.compact tbody td{padding:4px}table.dataTable th,table.dataTable td{box-sizing:content-box}.dataTables_wrapper{position:relative;clear:both}.dataTables_wrapper .dataTables_length{float:left}.dataTables_wrapper .dataTables_length select{border:1px solid #aaa;border-radius:3px;padding:5px;background-color:transparent;color:inherit;padding:4px}.dataTables_wrapper .dataTables_filter{float:right;text-align:right}.dataTables_wrapper .dataTables_filter input{border:1px solid #aaa;border-radius:3px;padding:5px;background-color:transparent;color:inherit;margin-left:3px}.dataTables_wrapper .dataTables_info{clear:both;float:left;padding-top:.755em}.dataTables_wrapper .dataTables_paginate{float:right;text-align:right;padding-top:.25em}.dataTables_wrapper .dataTables_paginate .paginate_button{box-sizing:border-box;display:inline-block;min-width:1.5em;padding:.5em 1em;margin-left:2px;text-align:center;text-decoration:none !important;cursor:pointer;color:inherit !important;border:1px solid transparent;border-radius:2px;background:transparent}.dataTables_wrapper .dataTables_paginate .paginate_button.current,.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{color:inherit !important;border:1px solid rgba(0, 0, 0, 0.3);background-color:rgba(0, 0, 0, 0.05);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(230, 230, 230, 0.05)), color-stop(100%, rgba(0, 0, 0, 0.05)));background:-webkit-linear-gradient(top, rgba(230, 230, 230, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);background:-moz-linear-gradient(top, rgba(230, 230, 230, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);background:-ms-linear-gradient(top, rgba(230, 230, 230, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);background:-o-linear-gradient(top, rgba(230, 230, 230, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);background:linear-gradient(to bottom, rgba(230, 230, 230, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%)}.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active{cursor:default;color:#666 !important;border:1px solid transparent;background:transparent;box-shadow:none}.dataTables_wrapper .dataTables_paginate .paginate_button:hover{color:white !important;border:1px solid #111;background-color:#111;background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111));background:-webkit-linear-gradient(top, #585858 0%, #111 100%);background:-moz-linear-gradient(top, #585858 0%, #111 100%);background:-ms-linear-gradient(top, #585858 0%, #111 100%);background:-o-linear-gradient(top, #585858 0%, #111 100%);background:linear-gradient(to bottom, #585858 0%, #111 100%)}.dataTables_wrapper .dataTables_paginate .paginate_button:active{outline:none;background-color:#0c0c0c;background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(100%, #0c0c0c));background:-webkit-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:-moz-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:-ms-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:-o-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);box-shadow:inset 0 0 3px #111}.dataTables_wrapper .dataTables_paginate .ellipsis{padding:0 1em}.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_processing,.dataTables_wrapper .dataTables_paginate{color:inherit}.dataTables_wrapper .dataTables_scroll{clear:both}.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody{-webkit-overflow-scrolling:touch}.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>th,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>td,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>th,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>td{vertical-align:middle}.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>th>div.dataTables_sizing,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>td>div.dataTables_sizing,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>th>div.dataTables_sizing,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>td>div.dataTables_sizing{height:0;overflow:hidden;margin:0 !important;padding:0 !important}.dataTables_wrapper.no-footer .dataTables_scrollBody{border-bottom:1px solid rgba(0, 0, 0, 0.3)}.dataTables_wrapper.no-footer div.dataTables_scrollHead table.dataTable,.dataTables_wrapper.no-footer div.dataTables_scrollBody>table{border-bottom:none}.dataTables_wrapper:after{visibility:hidden;display:block;content:"";clear:both;height:0}@media screen and (max-width: 767px){.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_paginate{float:none;text-align:center}.dataTables_wrapper .dataTables_paginate{margin-top:.5em}}@media screen and (max-width: 640px){.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter{float:none;text-align:center}.dataTables_wrapper .dataTables_filter{margin-top:.5em}}html.dark{--dt-row-hover: 255, 255, 255;--dt-row-stripe: 255, 255, 255;--dt-column-ordering: 255, 255, 255}html.dark table.dataTable>thead>tr>th,html.dark table.dataTable>thead>tr>td{border-bottom:1px solid rgb(89, 91, 94)}html.dark table.dataTable>thead>tr>th:active,html.dark table.dataTable>thead>tr>td:active{outline:none}html.dark table.dataTable>tfoot>tr>th,html.dark table.dataTable>tfoot>tr>td{border-top:1px solid rgb(89, 91, 94)}html.dark table.dataTable.row-border>tbody>tr>th,html.dark table.dataTable.row-border>tbody>tr>td,html.dark table.dataTable.display>tbody>tr>th,html.dark table.dataTable.display>tbody>tr>td{border-top:1px solid rgb(64, 67, 70)}html.dark table.dataTable.row-border>tbody>tr.selected+tr.selected>td,html.dark table.dataTable.display>tbody>tr.selected+tr.selected>td{border-top-color:#0257d5}html.dark table.dataTable.cell-border>tbody>tr>th,html.dark table.dataTable.cell-border>tbody>tr>td{border-top:1px solid rgb(64, 67, 70);border-right:1px solid rgb(64, 67, 70)}html.dark table.dataTable.cell-border>tbody>tr>th:first-child,html.dark table.dataTable.cell-border>tbody>tr>td:first-child{border-left:1px solid rgb(64, 67, 70)}html.dark .dataTables_wrapper .dataTables_filter input,html.dark .dataTables_wrapper .dataTables_length select{border:1px solid rgba(255, 255, 255, 0.2);background-color:var(--dt-html-background)}html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{border:1px solid rgb(89, 91, 94);background:rgba(255, 255, 255, 0.15)}html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active{color:#666 !important}html.dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover{border:1px solid rgb(53, 53, 53);background:rgb(53, 53, 53)}html.dark .dataTables_wrapper .dataTables_paginate .paginate_button:active{background:#3a3a3a}
diff --git a/prijateli_tree/app/static/js/dataTables.select.min.js b/prijateli_tree/app/static/js/dataTables.select.min.js
new file mode 100644
index 00000000..35ac0c60
--- /dev/null
+++ b/prijateli_tree/app/static/js/dataTables.select.min.js
@@ -0,0 +1,4 @@
+/*! Select for DataTables 1.7.0
+ * © SpryMedia Ltd - datatables.net/license/mit
+ */
+!function(l){var s,c;"function"==typeof define&&define.amd?define(["jquery","datatables.net"],function(e){return l(e,window,document)}):"object"==typeof exports?(s=require("jquery"),c=function(e,t){t.fn.dataTable||require("datatables.net")(e,t)},"undefined"==typeof window?module.exports=function(e,t){return e=e||window,t=t||s(e),c(e,t),l(t,e,e.document)}:(c(window,s),module.exports=l(s,window,window.document))):l(jQuery,window,document)}(function(m,i,e,h){"use strict";var _=m.fn.dataTable;function r(n,e,t){function l(t,l){l<t&&(e=l,l=t,t=e);var e,s=!1;return n.columns(":visible").indexes().filter(function(e){return e===t&&(s=!0),e===l?!(s=!1):s})}function s(t,l){var e,s=n.rows({search:"applied"}).indexes(),c=(s.indexOf(t)>s.indexOf(l)&&(e=l,l=t,t=e),!1);return s.filter(function(e){return e===t&&(c=!0),e===l?!(c=!1):c})}var c,t=n.cells({selected:!0}).any()||t?(c=l(t.column,e.column),s(t.row,e.row)):(c=l(0,e.column),s(0,e.row)),t=n.cells(t,c).flatten();n.cells(e,{selected:!0}).any()?n.cells(t).deselect():n.cells(t).select()}function s(e){var t=e.settings()[0]._select.selector;m(e.table().container()).off("mousedown.dtSelect",t).off("mouseup.dtSelect",t).off("click.dtSelect",t),m("body").off("click.dtSelect"+p(e.table().node()))}function c(o){var a,t=m(o.table().container()),l=o.settings()[0],s=l._select.selector;t.on("mousedown.dtSelect",s,function(e){(e.shiftKey||e.metaKey||e.ctrlKey)&&t.css("-moz-user-select","none").one("selectstart.dtSelect",s,function(){return!1}),i.getSelection&&(a=i.getSelection())}).on("mouseup.dtSelect",s,function(){t.css("-moz-user-select","")}).on("click.dtSelect",s,function(e){var t,l=o.select.items();if(a){var s=i.getSelection();if((!s.anchorNode||m(s.anchorNode).closest("table")[0]===o.table().node())&&s!==a)return}var c,s=o.settings()[0],n=o.settings()[0].oClasses.sWrapper.trim().replace(/ +/g,".");m(e.target).closest("div."+n)[0]==o.table().container()&&(n=o.cell(m(e.target).closest("td, th"))).any()&&(c=m.Event("user-select.dt"),u(o,c,[l,n,e]),c.isDefaultPrevented()||(c=n.index(),"row"===l?(t=c.row,w(e,o,s,"row",t)):"column"===l?(t=n.index().column,w(e,o,s,"column",t)):"cell"===l&&(t=n.index(),w(e,o,s,"cell",t)),s._select_lastCell=c))}),m("body").on("click.dtSelect"+p(o.table().node()),function(e){var t;!l._select.blurable||m(e.target).parents().filter(o.table().container()).length||0===m(e.target).parents("html").length||m(e.target).parents("div.DTE").length||(t=m.Event("select-blur.dt"),u(o,t,[e.target,e]),t.isDefaultPrevented())||f(l,!0)})}function u(e,t,l,s){s&&!e.flatten().length||("string"==typeof t&&(t+=".dt"),l.unshift(e),m(e.table().node()).trigger(t,l))}function n(o){var i=new _.Api(o);o._select_init=!0,o.aoRowCreatedCallback.push({fn:function(e,t,l){var s,c,n=o.aoData[l];for(n._select_selected&&m(e).addClass(o._select.className),s=0,c=o.aoColumns.length;s<c;s++)(o.aoColumns[s]._select_selected||n._selected_cells&&n._selected_cells[s])&&m(n.anCells[s]).addClass(o._select.className)},sName:"select-deferRender"}),i.on("preXhr.dt.dtSelect",function(e,t){var l,s;t===i.settings()[0]&&(l=i.rows({selected:!0}).ids(!0).filter(function(e){return e!==h}),s=i.cells({selected:!0}).eq(0).map(function(e){var t=i.row(e.row).id(!0);return t?{row:t,column:e.column}:h}).filter(function(e){return e!==h}),i.one("draw.dt.dtSelect",function(){i.rows(l).select(),s.any()&&s.each(function(e){i.cells(e.row,e.column).select()})}))}),i.on("draw.dtSelect.dt select.dtSelect.dt deselect.dtSelect.dt info.dt",function(){var s,c,n,o,a,e;(e=(s=i).settings()[0])._select.info&&e.aanFeatures.i&&"api"!==s.select.style()&&(c=s.rows({selected:!0}).flatten().length,n=s.columns({selected:!0}).flatten().length,o=s.cells({selected:!0}).flatten().length,a=function(e,t,l){e.append(m('<span class="select-item"/>').append(s.i18n("select."+t+"s",{_:"%d "+t+"s selected",0:"",1:"1 "+t+" selected"},l)))},m.each(e.aanFeatures.i,function(e,t){t=m(t);var l=m('<span class="select-info"/>'),s=(a(l,"row",c),a(l,"column",n),a(l,"cell",o),t.children("span.select-info"));s.length&&s.remove(),""!==l.text()&&t.append(l)})),i.state.save()}),i.on("destroy.dtSelect",function(){m(i.rows({selected:!0}).nodes()).removeClass(i.settings()[0]._select.className),s(i),i.off(".dtSelect"),m("body").off(".dtSelect"+p(i.table().node()))})}function d(e,t,l,s){var c,n=e[t+"s"]({search:"applied"}).indexes(),s=m.inArray(s,n),o=m.inArray(l,n);e[t+"s"]({selected:!0}).any()||-1!==s?(o<s&&(c=o,o=s,s=c),n.splice(o+1,n.length),n.splice(0,s)):n.splice(m.inArray(l,n)+1,n.length),e[t](l,{selected:!0}).any()?(n.splice(m.inArray(l,n),1),e[t+"s"](n).deselect()):e[t+"s"](n).select()}function f(e,t){!t&&"single"!==e._select.style||((t=new _.Api(e)).rows({selected:!0}).deselect(),t.columns({selected:!0}).deselect(),t.cells({selected:!0}).deselect())}function w(e,t,l,s,c){var n=t.select.style(),o=t.select.toggleable(),a=t[s](c,{selected:!0}).any();a&&!o||("os"===n?e.ctrlKey||e.metaKey?t[s](c).select(!a):e.shiftKey?"cell"===s?r(t,c,l._select_lastCell||null):d(t,s,c,l._select_lastCell?l._select_lastCell[s]:null):(o=t[s+"s"]({selected:!0}),a&&1===o.flatten().length?t[s](c).deselect():(o.deselect(),t[s](c).select())):"multi+shift"==n&&e.shiftKey?"cell"===s?r(t,c,l._select_lastCell||null):d(t,s,c,l._select_lastCell?l._select_lastCell[s]:null):t[s](c).select(!a))}function p(e){return e.id.replace(/[^a-zA-Z0-9\-\_]/g,"-")}_.select={},_.select.version="1.7.0",_.select.init=function(c){var e,t,l,s,n,o,a,i,r,u,d,f=c.settings()[0];f._select||(e=c.state.loaded(),t=function(e,t,l){if(null!==l&&l.select!==h){if(c.rows({selected:!0}).any()&&c.rows().deselect(),l.select.rows!==h&&c.rows(l.select.rows).select(),c.columns({selected:!0}).any()&&c.columns().deselect(),l.select.columns!==h&&c.columns(l.select.columns).select(),c.cells({selected:!0}).any()&&c.cells().deselect(),l.select.cells!==h)for(var s=0;s<l.select.cells.length;s++)c.cell(l.select.cells[s].row,l.select.cells[s].column).select();c.state.save()}},c.on("stateSaveParams",function(e,t,l){l.select={},l.select.rows=c.rows({selected:!0}).ids(!0).toArray(),l.select.columns=c.columns({selected:!0})[0],l.select.cells=c.cells({selected:!0})[0].map(function(e){return{row:c.row(e.row).id(!0),column:e.column}})}).on("stateLoadParams",t).one("init",function(){t(0,0,e)}),s=f.oInit.select,l=_.defaults.select,l=s===h?l:s,s="row",i=a=!(o=!(n="api")),r="td, th",d=!(u="selected"),f._select={},!0===l?(n="os",d=!0):"string"==typeof l?(n=l,d=!0):m.isPlainObject(l)&&(l.blurable!==h&&(o=l.blurable),l.toggleable!==h&&(a=l.toggleable),l.info!==h&&(i=l.info),l.items!==h&&(s=l.items),d=(n=l.style!==h?l.style:"os",!0),l.selector!==h&&(r=l.selector),l.className!==h)&&(u=l.className),c.select.selector(r),c.select.items(s),c.select.style(n),c.select.blurable(o),c.select.toggleable(a),c.select.info(i),f._select.className=u,m.fn.dataTable.ext.order["select-checkbox"]=function(t,e){return this.api().column(e,{order:"index"}).nodes().map(function(e){return"row"===t._select.items?m(e).parent().hasClass(t._select.className):"cell"===t._select.items&&m(e).hasClass(t._select.className)})},!d&&m(c.table().node()).hasClass("selectable")&&c.select.style("os"))},m.each([{type:"row",prop:"aoData"},{type:"column",prop:"aoColumns"}],function(e,i){_.ext.selector[i.type].push(function(e,t,l){var s,c=t.selected,n=[];if(!0!==c&&!1!==c)return l;for(var o=0,a=l.length;o<a;o++)s=e[i.prop][l[o]],(!0===c&&!0===s._select_selected||!1===c&&!s._select_selected)&&n.push(l[o]);return n})}),_.ext.selector.cell.push(function(e,t,l){var s,c=t.selected,n=[];if(c===h)return l;for(var o=0,a=l.length;o<a;o++)s=e.aoData[l[o].row],(!0!==c||!s._selected_cells||!0!==s._selected_cells[l[o].column])&&(!1!==c||s._selected_cells&&s._selected_cells[l[o].column])||n.push(l[o]);return n});var t=_.Api.register,l=_.Api.registerPlural;function o(t,l){return function(e){return e.i18n("buttons."+t,l)}}function a(e){e=e._eventNamespace;return"draw.dt.DT"+e+" select.dt.DT"+e+" deselect.dt.DT"+e}t("select()",function(){return this.iterator("table",function(e){_.select.init(new _.Api(e))})}),t("select.blurable()",function(t){return t===h?this.context[0]._select.blurable:this.iterator("table",function(e){e._select.blurable=t})}),t("select.toggleable()",function(t){return t===h?this.context[0]._select.toggleable:this.iterator("table",function(e){e._select.toggleable=t})}),t("select.info()",function(t){return t===h?this.context[0]._select.info:this.iterator("table",function(e){e._select.info=t})}),t("select.items()",function(t){return t===h?this.context[0]._select.items:this.iterator("table",function(e){e._select.items=t,u(new _.Api(e),"selectItems",[t])})}),t("select.style()",function(l){return l===h?this.context[0]._select.style:this.iterator("table",function(e){e._select||_.select.init(new _.Api(e)),e._select_init||n(e),e._select.style=l;var t=new _.Api(e);s(t),"api"!==l&&c(t),u(new _.Api(e),"selectStyle",[l])})}),t("select.selector()",function(t){return t===h?this.context[0]._select.selector:this.iterator("table",function(e){s(new _.Api(e)),e._select.selector=t,"api"!==e._select.style&&c(new _.Api(e))})}),l("rows().select()","row().select()",function(e){var l=this;return!1===e?this.deselect():(this.iterator("row",function(e,t){f(e),e.aoData[t]._select_selected=!0,m(e.aoData[t].nTr).addClass(e._select.className)}),this.iterator("table",function(e,t){u(l,"select",["row",l[t]],!0)}),this)}),t("row().selected()",function(){var e=this.context[0];return!!(e&&this.length&&e.aoData[this[0]]&&e.aoData[this[0]]._select_selected)}),l("columns().select()","column().select()",function(e){var l=this;return!1===e?this.deselect():(this.iterator("column",function(e,t){f(e),e.aoColumns[t]._select_selected=!0;t=new _.Api(e).column(t);m(t.header()).addClass(e._select.className),m(t.footer()).addClass(e._select.className),t.nodes().to$().addClass(e._select.className)}),this.iterator("table",function(e,t){u(l,"select",["column",l[t]],!0)}),this)}),t("column().selected()",function(){var e=this.context[0];return!!(e&&this.length&&e.aoColumns[this[0]]&&e.aoColumns[this[0]]._select_selected)}),l("cells().select()","cell().select()",function(e){var l=this;return!1===e?this.deselect():(this.iterator("cell",function(e,t,l){f(e);t=e.aoData[t];t._selected_cells===h&&(t._selected_cells=[]),t._selected_cells[l]=!0,t.anCells&&m(t.anCells[l]).addClass(e._select.className)}),this.iterator("table",function(e,t){u(l,"select",["cell",l.cells(l[t]).indexes().toArray()],!0)}),this)}),t("cell().selected()",function(){var e=this.context[0];if(e&&this.length){e=e.aoData[this[0][0].row];if(e&&e._selected_cells&&e._selected_cells[this[0][0].column])return!0}return!1}),l("rows().deselect()","row().deselect()",function(){var l=this;return this.iterator("row",function(e,t){e.aoData[t]._select_selected=!1,e._select_lastCell=null,m(e.aoData[t].nTr).removeClass(e._select.className)}),this.iterator("table",function(e,t){u(l,"deselect",["row",l[t]],!0)}),this}),l("columns().deselect()","column().deselect()",function(){var l=this;return this.iterator("column",function(s,e){s.aoColumns[e]._select_selected=!1;var t=new _.Api(s),l=t.column(e);m(l.header()).removeClass(s._select.className),m(l.footer()).removeClass(s._select.className),t.cells(null,e).indexes().each(function(e){var t=s.aoData[e.row],l=t._selected_cells;!t.anCells||l&&l[e.column]||m(t.anCells[e.column]).removeClass(s._select.className)})}),this.iterator("table",function(e,t){u(l,"deselect",["column",l[t]],!0)}),this}),l("cells().deselect()","cell().deselect()",function(){var l=this;return this.iterator("cell",function(e,t,l){t=e.aoData[t];t._selected_cells!==h&&(t._selected_cells[l]=!1),t.anCells&&!e.aoColumns[l]._select_selected&&m(t.anCells[l]).removeClass(e._select.className)}),this.iterator("table",function(e,t){u(l,"deselect",["cell",l[t]],!0)}),this});var v=0;return m.extend(_.ext.buttons,{selected:{text:o("selected","Selected"),className:"buttons-selected",limitTo:["rows","columns","cells"],init:function(l,e,s){var c=this;s._eventNamespace=".select"+v++,l.on(a(s),function(){var e,t;c.enable((e=l,t=s,!(-1===m.inArray("rows",t.limitTo)||!e.rows({selected:!0}).any())||!(-1===m.inArray("columns",t.limitTo)||!e.columns({selected:!0}).any())||!(-1===m.inArray("cells",t.limitTo)||!e.cells({selected:!0}).any())))}),this.disable()},destroy:function(e,t,l){e.off(l._eventNamespace)}},selectedSingle:{text:o("selectedSingle","Selected single"),className:"buttons-selected-single",init:function(t,e,l){var s=this;l._eventNamespace=".select"+v++,t.on(a(l),function(){var e=t.rows({selected:!0}).flatten().length+t.columns({selected:!0}).flatten().length+t.cells({selected:!0}).flatten().length;s.enable(1===e)}),this.disable()},destroy:function(e,t,l){e.off(l._eventNamespace)}},selectAll:{text:o("selectAll","Select all"),className:"buttons-select-all",action:function(e,t,l,s){var c=this.select.items(),n=s.selectorModifier;(n?("function"==typeof n&&(n=n.call(t,e,t,l,s)),this[c+"s"](n)):this[c+"s"]()).select()}},selectNone:{text:o("selectNone","Deselect all"),className:"buttons-select-none",action:function(){f(this.settings()[0],!0)},init:function(t,e,l){var s=this;l._eventNamespace=".select"+v++,t.on(a(l),function(){var e=t.rows({selected:!0}).flatten().length+t.columns({selected:!0}).flatten().length+t.cells({selected:!0}).flatten().length;s.enable(0<e)}),this.disable()},destroy:function(e,t,l){e.off(l._eventNamespace)}},showSelected:{text:o("showSelected","Show only selected"),className:"buttons-show-selected",action:function(e,s,t,l){var c;l._filter?(-1!==(c=_.ext.search.indexOf(l._filter))&&(_.ext.search.splice(c,1),l._filter=null),this.active(!1)):(l._filter=c=function(e,t,l){return e!==s.settings()[0]||e.aoData[l]._select_selected},_.ext.search.push(c),this.active(!0)),s.draw()}}}),m.each(["Row","Column","Cell"],function(e,t){var c=t.toLowerCase();_.ext.buttons["select"+t+"s"]={text:o("select"+t+"s","Select "+c+"s"),className:"buttons-select-"+c+"s",action:function(){this.select.items(c)},init:function(e){var s=this;e.on("selectItems.dt.DT",function(e,t,l){s.active(l===c)})}}}),m.fn.DataTable.select=_.select,m(e).on("preInit.dt.dtSelect",function(e,t){"dt"===e.namespace&&_.select.init(new _.Api(t))}),_});
diff --git a/prijateli_tree/app/templates/base.html b/prijateli_tree/app/templates/base.html
index c6b6d50a..6242ce4d 100644
--- a/prijateli_tree/app/templates/base.html
+++ b/prijateli_tree/app/templates/base.html
@@ -17,6 +17,8 @@
     </title>
     <link href="{{ url_for('static', path='/css/bootstrap.min.css') }}"
           rel="stylesheet">
+    <link href="{{ url_for('static', path='css/datatables.min.css') }}"
+          rel="stylesheet">
     <link href="{{ url_for('static', path='/css/custom.css') }}"
           rel="stylesheet">
     <script type="text/javascript"
@@ -27,6 +29,8 @@
             src="{{ url_for('static', path='/js/jquery.dataTables.min.js') }}"></script>
     <script type="text/javascript"
             src="{{ url_for('static', path='/js/dataTables.bootstrap5.min.js') }}"></script>
+    <script type="text/javascript"
+            src="{{url_for('static', path='js/dataTables.select.min.js')}}"></script>
     {% block helper_script %}
     {% endblock helper_script %}
   </head>

From 0ba2f7a06221fc4400c2cd1f68405ed041e67c6b Mon Sep 17 00:00:00 2001
From: Ari Anisfeld <ari.anisfeld@gmail.com>
Date: Tue, 9 Jan 2024 22:52:31 -0600
Subject: [PATCH 3/7] #76 adds ability to select students

---
 .../app/templates/create_session.html         | 80 +++++++++++++++++++
 1 file changed, 80 insertions(+)

diff --git a/prijateli_tree/app/templates/create_session.html b/prijateli_tree/app/templates/create_session.html
index 47db7002..cbad105c 100644
--- a/prijateli_tree/app/templates/create_session.html
+++ b/prijateli_tree/app/templates/create_session.html
@@ -4,6 +4,49 @@
 {% endblock title %}
 {% block helper_script %}
   <script>
+  $(document).ready(function() {
+     $('#students').DataTable({
+       select: 'multi'
+    });
+
+    $('#students tbody').on( 'click', 'tr', function () {
+        $(this).toggleClass('selected');
+    } );
+
+    $('#button').click( function () {
+      const selectedRows = $('#students').DataTable().rows('.selected').data().toArray();
+      const formData = new FormData();
+      const numbers = ["one", "two", "three", "four", "five", "six"]
+      const languageCounter = {}
+      for (i in selectedRows) {
+        formData.append("player_" + numbers[i], parseInt(selectedRows[i][0]))
+        lang = selectedRows[i][1]
+        languageCounter[lang] = languageCounter[lang] ? languageCounter[lang]  + 1 : 1;
+      }
+      const languageCounts = Object.values(languageCounter)
+      if (selectedRows.length != 6) {
+        alert("Must select 6 students")
+        return
+      } else if (languageCounts[0] != 3 || languageCounts[1] != 3) {
+        alert("A session must contain exactly 3 players from distinct mother tongues")
+        return
+      }
+
+      console.log(formData)
+
+      fetch('{{ url_for("create_session") }}', {
+          method: 'POST',
+          body: formData
+        })
+      .then(resp => {
+        window.location.href = resp.url
+      }) // or, resp.text(), etc
+      .catch(error => {
+          console.error(error);
+      });
+    });
+  });
+
   function cleanParams() {
       // Used to clear the URL of parameters after the banner alert is closed.
       window.history.replaceState(null, '', window.location.pathname);
@@ -21,7 +64,44 @@
               onclick="cleanParams()"></button>
     </div>
   {% endif %}
+  <!-- DataTable columns and headers go here -->
   <div class="container-sm">
+    <div class="row">
+      <table id="students"
+             class="display bg-light-subtle table table-hover table-bordered">
+        <caption>List of Students</caption>
+        <thead>
+          <tr>
+            <th scope="col" hidden>ID</th>
+            <th scope="col" hidden>Language</th>
+            <th scope="col">Name</th>
+            <th scope="col">Email</th>
+            <th scope="col">Grade</th>
+            <th scope="col">High School</th>
+          </tr>
+        </thead>
+        <tbody class="table-group-divider">
+          {% if students|length == 0 %}
+            <tr class="empty-table">
+              <td colspan="7">There are no students currently in the system.</td>
+            </tr>
+          {% endif %}
+          {% for s in students|sort(attribute='high_school.name, last_name') %}
+            <tr>
+              <!-- hidden columns referenced in js-->
+              <td hidden>{{ s.id }}</td>
+              <td hidden>{{ s.language.abbr }}</td>
+              <td>{{ s.name_str }}</td>
+              <td>{{ s.email }}</td>
+              <td>{{ s.grade_level }}</td>
+              <td>{{ s.high_school.name }}</td>
+            </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+    <button id="button">Save Selection</button>
+    <!-- HERE WE ARE <div class="container-sm">-->
     <div class="row">
       <div class="form-container bg-light-subtle col-xs-12 offset-md-1 col-md-10 offset-lg-1 col col-lg-10 offset-xl-3 col col-xl-6">
         <form method="post" action='{{ url_for("create_session") }}'>

From 8cfe2ce3df75c7a7169c5d20d98383ae559b1dfa Mon Sep 17 00:00:00 2001
From: Ari Anisfeld <ari.anisfeld@gmail.com>
Date: Wed, 10 Jan 2024 12:11:56 -0600
Subject: [PATCH 4/7] #76 making default number of games

---
 prijateli_tree/app/routers/administration.py | 8 ++++++--
 prijateli_tree/app/utils/constants.py        | 1 +
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/prijateli_tree/app/routers/administration.py b/prijateli_tree/app/routers/administration.py
index d790b682..de2c5e8a 100644
--- a/prijateli_tree/app/routers/administration.py
+++ b/prijateli_tree/app/routers/administration.py
@@ -40,6 +40,7 @@
     ROLE_ADMIN,
     ROLE_STUDENT,
     ROLE_SUPER_ADMIN,
+    NUMBER_OF_GAMES,
 )
 from prijateli_tree.app.utils.games import raise_exception_if_not
 
@@ -192,7 +193,10 @@ def create_session(
 ) -> RedirectResponse:
     if user is None:
         return RedirectResponse("login", status_code=HTTPStatus.FOUND)
-
+    
+    if num_games is None:
+        num_games = NUMBER_OF_GAMES
+        logging.info(f"Setting number of games to {num_games}")
     player_ids = [
         player_one,
         player_two,
@@ -232,7 +236,7 @@ def create_session(
             redirect_url,
             status_code=HTTPStatus.FOUND,
         )
-
+    logging.info("Setting up session")
     session = GameSession(
         created_by=user.id,
         num_games=num_games,
diff --git a/prijateli_tree/app/utils/constants.py b/prijateli_tree/app/utils/constants.py
index f3749c98..f6c7a447 100644
--- a/prijateli_tree/app/utils/constants.py
+++ b/prijateli_tree/app/utils/constants.py
@@ -18,6 +18,7 @@
 NETWORK_TYPE_SEGREGATED = "segregated"
 NETWORK_TYPE_SELF_SELECTED = "self-selected"
 NUMBER_OF_ROUNDS = 3
+NUMBER_OF_GAMES = 15
 ROLE_ADMIN = "admin"
 ROLE_STUDENT = "student"
 ROLE_SUPER_ADMIN = "super-admin"

From 8c1255c55f405408432cdd33e3b443fd4c45e401 Mon Sep 17 00:00:00 2001
From: Ari Anisfeld <ari.anisfeld@gmail.com>
Date: Wed, 10 Jan 2024 12:13:00 -0600
Subject: [PATCH 5/7] NUMBER_OF_GAMES to router

---
 prijateli_tree/app/routers/administration.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/prijateli_tree/app/routers/administration.py b/prijateli_tree/app/routers/administration.py
index de2c5e8a..efbe8d65 100644
--- a/prijateli_tree/app/routers/administration.py
+++ b/prijateli_tree/app/routers/administration.py
@@ -36,11 +36,11 @@
     KEY_LOGIN_SECRET,
     NETWORK_TYPE_INTEGRATED,
     NETWORK_TYPE_SEGREGATED,
+    NUMBER_OF_GAMES,
     NUMBER_OF_ROUNDS,
     ROLE_ADMIN,
     ROLE_STUDENT,
     ROLE_SUPER_ADMIN,
-    NUMBER_OF_GAMES,
 )
 from prijateli_tree.app.utils.games import raise_exception_if_not
 
@@ -193,7 +193,7 @@ def create_session(
 ) -> RedirectResponse:
     if user is None:
         return RedirectResponse("login", status_code=HTTPStatus.FOUND)
-    
+
     if num_games is None:
         num_games = NUMBER_OF_GAMES
         logging.info(f"Setting number of games to {num_games}")

From e2867df545d1af2f1a75ba622372c7bc4f14d6c4 Mon Sep 17 00:00:00 2001
From: Ari Anisfeld <ari.anisfeld@gmail.com>
Date: Wed, 10 Jan 2024 13:48:25 -0600
Subject: [PATCH 6/7] #76 finishing touches

---
 prijateli_tree/app/routers/administration.py  |   2 +-
 .../app/templates/create_session.html         | 138 +++++++++---------
 2 files changed, 71 insertions(+), 69 deletions(-)

diff --git a/prijateli_tree/app/routers/administration.py b/prijateli_tree/app/routers/administration.py
index 4dd60cfb..b42a8f8a 100644
--- a/prijateli_tree/app/routers/administration.py
+++ b/prijateli_tree/app/routers/administration.py
@@ -184,13 +184,13 @@ def dashboard_create_session(
 
 @router.post("/session", response_class=HTMLResponse)
 def create_session(
-    num_games: Annotated[int, Form()],
     player_one: Annotated[int, Form()],
     player_two: Annotated[int, Form()],
     player_three: Annotated[int, Form()],
     player_four: Annotated[int, Form()],
     player_five: Annotated[int, Form()],
     player_six: Annotated[int, Form()],
+    num_games: Annotated[int, Form()] | None = None,
     user=Depends(login_manager.optional),
     db: Session = Depends(Database),
 ) -> RedirectResponse:
diff --git a/prijateli_tree/app/templates/create_session.html b/prijateli_tree/app/templates/create_session.html
index cbad105c..f5e21b5d 100644
--- a/prijateli_tree/app/templates/create_session.html
+++ b/prijateli_tree/app/templates/create_session.html
@@ -6,7 +6,7 @@
   <script>
   $(document).ready(function() {
      $('#students').DataTable({
-       select: 'multi'
+       "select": 'multi',
     });
 
     $('#students tbody').on( 'click', 'tr', function () {
@@ -18,6 +18,7 @@
       const formData = new FormData();
       const numbers = ["one", "two", "three", "four", "five", "six"]
       const languageCounter = {}
+
       for (i in selectedRows) {
         formData.append("player_" + numbers[i], parseInt(selectedRows[i][0]))
         lang = selectedRows[i][1]
@@ -68,7 +69,7 @@
   <div class="container-sm">
     <div class="row">
       <table id="students"
-             class="display bg-light-subtle table table-hover table-bordered">
+             class="display  bg-light-subtle ">
         <caption>List of Students</caption>
         <thead>
           <tr>
@@ -100,81 +101,82 @@
         </tbody>
       </table>
     </div>
-    <button id="button">Save Selection</button>
-    <!-- HERE WE ARE <div class="container-sm">-->
-    <div class="row">
-      <div class="form-container bg-light-subtle col-xs-12 offset-md-1 col-md-10 offset-lg-1 col col-lg-10 offset-xl-3 col col-xl-6">
-        <form method="post" action='{{ url_for("create_session") }}'>
-          <div class="mb-3 row">
-            <label for="num-games" class="col-sm-4 col-form-label">Number of Games</label>
-            <div class="col-sm-8">
-              <input type="number"
-                     min="1"
-                     step="1"
-                     max="50"
-                     class="form-control form-control-sm"
-                     value="1"
-                     id="num-games"
-                     name="num_games">
-            </div>
+  
+  <button id="button" class="btn btn-primary float-start">Save Selection</button>
+  <!--START OF FORM-->
+  <div class="row">
+    <div class="form-container bg-light-subtle col-xs-12 offset-md-1 col-md-10 offset-lg-1 col col-lg-10 offset-xl-3 col col-xl-6">
+      <form method="post" action='{{ url_for("create_session") }}'>
+        <div class="mb-3 row">
+          <label for="num-games" class="col-sm-4 col-form-label">Number of Games</label>
+          <div class="col-sm-8">
+            <input type="number"
+                   min="1"
+                   step="1"
+                   max="50"
+                   class="form-control form-control-sm"
+                   value="1"
+                   id="num-games"
+                   name="num_games">
           </div>
-          <div class="mb-3 row">
-            <label for="pos-one" class="col-sm-4 form-label">Player One</label>
-            <div class="col-sm-8">
-              <select id="pos-one" class="form-select form-select-sm" name="player_one">
-                {% for s in students|sort(attribute='last_name') %}<option value="{{ s.id }}">{{ s.name_str }}</option>{% endfor %}
-              </select>
-            </div>
+        </div>
+        <div class="mb-3 row">
+          <label for="pos-one" class="col-sm-4 form-label">Player One</label>
+          <div class="col-sm-8">
+            <select id="pos-one" class="form-select form-select-sm" name="player_one">
+              {% for s in students|sort(attribute='last_name') %}<option value="{{ s.id }}">{{ s.name_str }}</option>{% endfor %}
+            </select>
           </div>
-          <div class="mb-3 row">
-            <label for="pos-two" class="col-sm-4 form-label">Player Two</label>
-            <div class="col-sm-8">
-              <select id="pos-two" class="form-select form-select-sm" name="player_two">
-                {% for s in students|sort(attribute='last_name') %}<option value="{{ s.id }}">{{ s.name_str }}</option>{% endfor %}
-              </select>
-            </div>
+        </div>
+        <div class="mb-3 row">
+          <label for="pos-two" class="col-sm-4 form-label">Player Two</label>
+          <div class="col-sm-8">
+            <select id="pos-two" class="form-select form-select-sm" name="player_two">
+              {% for s in students|sort(attribute='last_name') %}<option value="{{ s.id }}">{{ s.name_str }}</option>{% endfor %}
+            </select>
           </div>
-          <div class="mb-3 row">
-            <label for="pos-three" class="col-sm-4 form-label">Player Three</label>
-            <div class="col-sm-8">
-              <select id="pos-three" class="form-select form-select-sm" name="player_three">
-                {% for s in students|sort(attribute='last_name') %}<option value="{{ s.id }}">{{ s.name_str }}</option>{% endfor %}
-              </select>
-            </div>
+        </div>
+        <div class="mb-3 row">
+          <label for="pos-three" class="col-sm-4 form-label">Player Three</label>
+          <div class="col-sm-8">
+            <select id="pos-three" class="form-select form-select-sm" name="player_three">
+              {% for s in students|sort(attribute='last_name') %}<option value="{{ s.id }}">{{ s.name_str }}</option>{% endfor %}
+            </select>
           </div>
-          <div class="mb-3 row">
-            <label for="pos-four" class="col-sm-4 form-label">Player Four</label>
-            <div class="col-sm-8">
-              <select id="pos-four" class="form-select form-select-sm" name="player_four">
-                {% for s in students|sort(attribute='last_name') %}<option value="{{ s.id }}">{{ s.name_str }}</option>{% endfor %}
-              </select>
-            </div>
+        </div>
+        <div class="mb-3 row">
+          <label for="pos-four" class="col-sm-4 form-label">Player Four</label>
+          <div class="col-sm-8">
+            <select id="pos-four" class="form-select form-select-sm" name="player_four">
+              {% for s in students|sort(attribute='last_name') %}<option value="{{ s.id }}">{{ s.name_str }}</option>{% endfor %}
+            </select>
           </div>
-          <div class="mb-3 row">
-            <label for="pos-five" class="col-sm-4 form-label">Player Five</label>
-            <div class="col-sm-8">
-              <select id="pos-five"
-                      class="col-sm-4 form-select form-select-sm"
-                      name="player_five">
-                {% for s in students|sort(attribute='last_name') %}<option value="{{ s.id }}">{{ s.name_str }}</option>{% endfor %}
-              </select>
-            </div>
+        </div>
+        <div class="mb-3 row">
+          <label for="pos-five" class="col-sm-4 form-label">Player Five</label>
+          <div class="col-sm-8">
+            <select id="pos-five"
+                    class="col-sm-4 form-select form-select-sm"
+                    name="player_five">
+              {% for s in students|sort(attribute='last_name') %}<option value="{{ s.id }}">{{ s.name_str }}</option>{% endfor %}
+            </select>
           </div>
-          <div class="mb-3 row">
-            <label for="pos-six" class="col-sm-4 form-label">Player Six</label>
-            <div class="col-sm-8">
-              <select id="pos-six"
-                      class="col-sm-4 form-select form-select-sm"
-                      name="player_six">
-                {% for s in students|sort(attribute='last_name') %}<option value="{{ s.id }}">{{ s.name_str }}</option>{% endfor %}
-              </select>
-            </div>
+        </div>
+        <div class="mb-3 row">
+          <label for="pos-six" class="col-sm-4 form-label">Player Six</label>
+          <div class="col-sm-8">
+            <select id="pos-six"
+                    class="col-sm-4 form-select form-select-sm"
+                    name="player_six">
+              {% for s in students|sort(attribute='last_name') %}<option value="{{ s.id }}">{{ s.name_str }}</option>{% endfor %}
+            </select>
           </div>
-          <button type="submit" class="btn btn-primary float-end">Create</button>
-        </form>
-      </div>
+        </div>
+        <button type="submit" class="btn btn-primary float-end">Create</button>
+      </form>
     </div>
   </div>
+</div>
 {% endblock content %}
 <form class="d-flex" action='{{ url_for("logout") }}'>
   <button class="float-end btn btn-primary" type="submit">Logout</button>

From d6dec91806c29b7f7f681250a3f3786d78f3ce6a Mon Sep 17 00:00:00 2001
From: Ari Anisfeld <ari.anisfeld@gmail.com>
Date: Wed, 10 Jan 2024 13:48:58 -0600
Subject: [PATCH 7/7] lint

---
 .../app/templates/create_session.html         | 136 +++++++++---------
 1 file changed, 67 insertions(+), 69 deletions(-)

diff --git a/prijateli_tree/app/templates/create_session.html b/prijateli_tree/app/templates/create_session.html
index f5e21b5d..44827c1f 100644
--- a/prijateli_tree/app/templates/create_session.html
+++ b/prijateli_tree/app/templates/create_session.html
@@ -68,8 +68,7 @@
   <!-- DataTable columns and headers go here -->
   <div class="container-sm">
     <div class="row">
-      <table id="students"
-             class="display  bg-light-subtle ">
+      <table id="students" class="display  bg-light-subtle ">
         <caption>List of Students</caption>
         <thead>
           <tr>
@@ -101,82 +100,81 @@
         </tbody>
       </table>
     </div>
-  
-  <button id="button" class="btn btn-primary float-start">Save Selection</button>
-  <!--START OF FORM-->
-  <div class="row">
-    <div class="form-container bg-light-subtle col-xs-12 offset-md-1 col-md-10 offset-lg-1 col col-lg-10 offset-xl-3 col col-xl-6">
-      <form method="post" action='{{ url_for("create_session") }}'>
-        <div class="mb-3 row">
-          <label for="num-games" class="col-sm-4 col-form-label">Number of Games</label>
-          <div class="col-sm-8">
-            <input type="number"
-                   min="1"
-                   step="1"
-                   max="50"
-                   class="form-control form-control-sm"
-                   value="1"
-                   id="num-games"
-                   name="num_games">
+    <button id="button" class="btn btn-primary float-start">Save Selection</button>
+    <!--START OF FORM-->
+    <div class="row">
+      <div class="form-container bg-light-subtle col-xs-12 offset-md-1 col-md-10 offset-lg-1 col col-lg-10 offset-xl-3 col col-xl-6">
+        <form method="post" action='{{ url_for("create_session") }}'>
+          <div class="mb-3 row">
+            <label for="num-games" class="col-sm-4 col-form-label">Number of Games</label>
+            <div class="col-sm-8">
+              <input type="number"
+                     min="1"
+                     step="1"
+                     max="50"
+                     class="form-control form-control-sm"
+                     value="1"
+                     id="num-games"
+                     name="num_games">
+            </div>
           </div>
-        </div>
-        <div class="mb-3 row">
-          <label for="pos-one" class="col-sm-4 form-label">Player One</label>
-          <div class="col-sm-8">
-            <select id="pos-one" class="form-select form-select-sm" name="player_one">
-              {% for s in students|sort(attribute='last_name') %}<option value="{{ s.id }}">{{ s.name_str }}</option>{% endfor %}
-            </select>
+          <div class="mb-3 row">
+            <label for="pos-one" class="col-sm-4 form-label">Player One</label>
+            <div class="col-sm-8">
+              <select id="pos-one" class="form-select form-select-sm" name="player_one">
+                {% for s in students|sort(attribute='last_name') %}<option value="{{ s.id }}">{{ s.name_str }}</option>{% endfor %}
+              </select>
+            </div>
           </div>
-        </div>
-        <div class="mb-3 row">
-          <label for="pos-two" class="col-sm-4 form-label">Player Two</label>
-          <div class="col-sm-8">
-            <select id="pos-two" class="form-select form-select-sm" name="player_two">
-              {% for s in students|sort(attribute='last_name') %}<option value="{{ s.id }}">{{ s.name_str }}</option>{% endfor %}
-            </select>
+          <div class="mb-3 row">
+            <label for="pos-two" class="col-sm-4 form-label">Player Two</label>
+            <div class="col-sm-8">
+              <select id="pos-two" class="form-select form-select-sm" name="player_two">
+                {% for s in students|sort(attribute='last_name') %}<option value="{{ s.id }}">{{ s.name_str }}</option>{% endfor %}
+              </select>
+            </div>
           </div>
-        </div>
-        <div class="mb-3 row">
-          <label for="pos-three" class="col-sm-4 form-label">Player Three</label>
-          <div class="col-sm-8">
-            <select id="pos-three" class="form-select form-select-sm" name="player_three">
-              {% for s in students|sort(attribute='last_name') %}<option value="{{ s.id }}">{{ s.name_str }}</option>{% endfor %}
-            </select>
+          <div class="mb-3 row">
+            <label for="pos-three" class="col-sm-4 form-label">Player Three</label>
+            <div class="col-sm-8">
+              <select id="pos-three" class="form-select form-select-sm" name="player_three">
+                {% for s in students|sort(attribute='last_name') %}<option value="{{ s.id }}">{{ s.name_str }}</option>{% endfor %}
+              </select>
+            </div>
           </div>
-        </div>
-        <div class="mb-3 row">
-          <label for="pos-four" class="col-sm-4 form-label">Player Four</label>
-          <div class="col-sm-8">
-            <select id="pos-four" class="form-select form-select-sm" name="player_four">
-              {% for s in students|sort(attribute='last_name') %}<option value="{{ s.id }}">{{ s.name_str }}</option>{% endfor %}
-            </select>
+          <div class="mb-3 row">
+            <label for="pos-four" class="col-sm-4 form-label">Player Four</label>
+            <div class="col-sm-8">
+              <select id="pos-four" class="form-select form-select-sm" name="player_four">
+                {% for s in students|sort(attribute='last_name') %}<option value="{{ s.id }}">{{ s.name_str }}</option>{% endfor %}
+              </select>
+            </div>
           </div>
-        </div>
-        <div class="mb-3 row">
-          <label for="pos-five" class="col-sm-4 form-label">Player Five</label>
-          <div class="col-sm-8">
-            <select id="pos-five"
-                    class="col-sm-4 form-select form-select-sm"
-                    name="player_five">
-              {% for s in students|sort(attribute='last_name') %}<option value="{{ s.id }}">{{ s.name_str }}</option>{% endfor %}
-            </select>
+          <div class="mb-3 row">
+            <label for="pos-five" class="col-sm-4 form-label">Player Five</label>
+            <div class="col-sm-8">
+              <select id="pos-five"
+                      class="col-sm-4 form-select form-select-sm"
+                      name="player_five">
+                {% for s in students|sort(attribute='last_name') %}<option value="{{ s.id }}">{{ s.name_str }}</option>{% endfor %}
+              </select>
+            </div>
           </div>
-        </div>
-        <div class="mb-3 row">
-          <label for="pos-six" class="col-sm-4 form-label">Player Six</label>
-          <div class="col-sm-8">
-            <select id="pos-six"
-                    class="col-sm-4 form-select form-select-sm"
-                    name="player_six">
-              {% for s in students|sort(attribute='last_name') %}<option value="{{ s.id }}">{{ s.name_str }}</option>{% endfor %}
-            </select>
+          <div class="mb-3 row">
+            <label for="pos-six" class="col-sm-4 form-label">Player Six</label>
+            <div class="col-sm-8">
+              <select id="pos-six"
+                      class="col-sm-4 form-select form-select-sm"
+                      name="player_six">
+                {% for s in students|sort(attribute='last_name') %}<option value="{{ s.id }}">{{ s.name_str }}</option>{% endfor %}
+              </select>
+            </div>
           </div>
-        </div>
-        <button type="submit" class="btn btn-primary float-end">Create</button>
-      </form>
+          <button type="submit" class="btn btn-primary float-end">Create</button>
+        </form>
+      </div>
     </div>
   </div>
-</div>
 {% endblock content %}
 <form class="d-flex" action='{{ url_for("logout") }}'>
   <button class="float-end btn btn-primary" type="submit">Logout</button>