page confirm

mod.php

@@ -233,20 +233,55 @@ $lastResult = $rennenIndex > 0 ? ($ergebnisse[$rennenIndex - 1] ?? null) : null;
         <a href="?rennen=<?= min($totalRennen - 1, $rennenIndex + 1) ?>" class="btn btn-primary">Nächstes Rennen</a>
     </div>
     <hr>
-    <form method="post">
+    <form method="post" id="pageAllForm">
         <input
             type="hidden"
             name="action"
             value="page_all">
         <button
-            type="submit"
+            type="button"
-            class="btn btn-danger">
+            class="btn btn-danger"
+            data-bs-toggle="modal"
+            data-bs-target="#confirmPageAllModal">
             Alle Teams pagen
         </button>
     </form>
 
 </div>
+<div class="modal fade" id="confirmPageAllModal" tabindex="-1" aria-labelledby="confirmPageAllModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
 
+            <div class="modal-header">
+                <h5 class="modal-title" id="confirmPageAllModalLabel">
+                    ACHTUNG!
+                </h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
+            </div>
+
+            <div class="modal-body">
+                Möchtest du wirklich alle Boote pagen?
+            </div>
+
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+                    Abbrechen
+                </button>
+
+                <button type="button" class="btn btn-danger" id="confirmPageAllButton">
+                    Ja, alle pagen
+                </button>
+            </div>
+
+        </div>
+    </div>
+</div>
+
+<script>
+document.getElementById('confirmPageAllButton').addEventListener('click', function () {
+    document.getElementById('pageAllForm').submit();
+});
+</script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>