[Jams] Huge amount of work on code jam admin area

8 files changed, 736 insertions, 4 deletions

diff --git a/templates/main/base.html b/templates/main/base.html
index d87376b1..8893be01 100644
--- a/templates/main/base.html
+++ b/templates/main/base.html
@@ -10,14 +10,15 @@
             <script src="{{ static_file('js/fouc.js') }}"></script>
 
             <!-- Other JS loads -->
-<!--            <script defer src="https://pro.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-DtPgXIYsUR6lLmJK14ZNUi11aAoezQtw4ut26Zwy9/6QXHH8W3+gjrRDT+lHiiW4" crossorigin="anonymous"></script>-->
             <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.39/js/uikit.min.js"></script>
+            <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
 
             <!-- Stylesheets -->
             <link rel="shortcut icon" href="{{ static_file('favicon.ico') }}">
             <link rel="stylesheet" href="{{ static_file('uikit_blurple.css') }}"/>
             <link rel="stylesheet" href="{{ static_file('style.css') }}"/>
             <link rel="stylesheet" href="{{ static_file('css/pygments-monokai.css') }}"/>
+            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
 
             <!-- OpenGraph metadata -->
             <meta property="og:title" content="Python Discord | {% block og_title %}{% endblock %}">
diff --git a/templates/staff/staff.html b/templates/staff/index.html
index b22bfcec..31fddceb 100644
--- a/templates/staff/staff.html
+++ b/templates/staff/index.html
@@ -7,11 +7,12 @@
         <h1 class="uk-text-center">
             Management links
         </h1>
+
+        <a class="uk-button uk-button-primary" href="{{ url_for("staff.jams.index") }}">Code Jams</a>
         {% if manager %}
             <a class="uk-button uk-button-primary" href="{{ url_for("staff.tables.index") }}">Table Management</a>
-        {% else %}
-            <p>Nothing for you yet, I'm afraid.</p>
         {% endif %}
+
         <h1 class="uk-title uk-text-center">
             App config
         </h1>
diff --git a/templates/staff/jams/create.html b/templates/staff/jams/create.html
new file mode 100644
index 00000000..49a8b615
--- /dev/null
+++ b/templates/staff/jams/create.html
@@ -0,0 +1,76 @@
+{% extends "main/base.html" %}
+{% block title %}Staff | Jams | Create{% endblock %}
+{% block og_title %}Staff | Jams | Create{% endblock %}
+{% block og_description %}Create a brand new code jam{% endblock %}
+{% block content %}
+    <div class="uk-container uk-container-small uk-section">
+        <h1 class="uk-text-center">Code Jam: Create</h1>
+
+        <form action="{{ url_for("staff.jams.create") }}" method="post" class="uk-form-horizontal">
+            <div>
+                <div class="uk-form-label">
+                    <label class="uk-form-label" for="title">Title</label>
+                </div>
+
+                <div class="uk-form-controls uk-form-controls-text">
+                    <input class="uk-input" name="title" id="title" type="text" required />
+                </div>
+            </div>
+            <div>
+                <div class="uk-form-label">
+                    <label class="uk-form-label" for="number">Number</label>
+                </div>
+
+                <div class="uk-form-controls uk-form-controls-text">
+                    <input class="uk-input" name="number" id="number" type="text" value="{{ number }}" disabled />
+                </div>
+            </div>
+            <div>
+                <div class="uk-form-label">
+                    <label class="uk-form-label" for="date_start">Starting date (UTC)</label>
+                </div>
+
+                <div class="uk-form-controls uk-form-controls-text">
+                    <input class="uk-input" name="date_start" id="date_start" type="text" required />
+                </div>
+            </div>
+            <div>
+                <div class="uk-form-label">
+                    <label class="uk-form-label" for="date_end">Ending date (UTC)</label>
+                </div>
+
+                <div class="uk-form-controls uk-form-controls-text">
+                    <input class="uk-input" name="date_end" id="date_end" type="text" required />
+                </div>
+            </div>
+            <div>
+                <div class="uk-form-label">
+                    <label class="uk-form-label" for="state">State</label>
+                </div>
+
+                <div class="uk-form-controls uk-form-controls-text">
+                    <select class="uk-select" name="state" id="state" disabled>
+                        <option value="planning" selected>Planning</option>
+                    </select>
+                </div>
+            </div>
+
+            <input type="hidden" name="csrf_token" id="csrf_token" value="{{ csrf_token() }}"/>
+
+            <div class="uk-align-center uk-text-center">
+                <a id="back" class="uk-button uk-button-default" href="{{ url_for("staff.jams.index") }}">
+                    <i class="uk-icon fa-fw far fa-arrow-left"></i> &nbsp;Back
+                </a>
+                <button id="done" class="uk-button uk-button-primary" type="submit">
+                    <i class="uk-icon fa-fw far fa-check"></i> &nbsp;Done
+                </button>
+            </div>
+        </form>
+
+    </div>
+
+    <script type="application/javascript">
+        const date_start = flatpickr("#date_start", {enableTime: true, altInput: true});
+        const date_end = flatpickr("#date_end", {enableTime: true, altInput: true});
+    </script>
+{% endblock %}
diff --git a/templates/staff/jams/edit_basics.html b/templates/staff/jams/edit_basics.html
new file mode 100644
index 00000000..59d69b77
--- /dev/null
+++ b/templates/staff/jams/edit_basics.html
@@ -0,0 +1,76 @@
+{% extends "main/base.html" %}
+{% block title %}Staff | Jams | Edit (Basics){% endblock %}
+{% block og_title %}Staff | Jams | Edit (Basics){% endblock %}
+{% block og_description %}Edit the basic info for a code jam{% endblock %}
+{% block content %}
+    <div class="uk-container uk-container-small uk-section">
+        <h1 class="uk-text-center">Code Jam: Edit (Basics)</h1>
+
+        <form action="{{ url_for("staff.jams.edit.basics", jam=jam.number) }}" method="post" class="uk-form-horizontal">
+            <div>
+                <div class="uk-form-label">
+                    <label class="uk-form-label" for="title">Title</label>
+                </div>
+
+                <div class="uk-form-controls uk-form-controls-text">
+                    <input class="uk-input" name="title" id="title" type="text" value="{{ jam.title }}" required />
+                </div>
+            </div>
+            <div>
+                <div class="uk-form-label">
+                    <label class="uk-form-label" for="number">Number</label>
+                </div>
+
+                <div class="uk-form-controls uk-form-controls-text">
+                    <input class="uk-input" name="number" id="number" type="text" value="{{ jam.number }}" disabled />
+                </div>
+            </div>
+            <div>
+                <div class="uk-form-label">
+                    <label class="uk-form-label" for="date_start">Starting date (UTC)</label>
+                </div>
+
+                <div class="uk-form-controls uk-form-controls-text">
+                    <input class="uk-input" name="date_start" id="date_start" type="text" value="{{ jam.date_start }}" required />
+                </div>
+            </div>
+            <div>
+                <div class="uk-form-label">
+                    <label class="uk-form-label" for="date_end">Ending date (UTC)</label>
+                </div>
+
+                <div class="uk-form-controls uk-form-controls-text">
+                    <input class="uk-input" name="date_end" id="date_end" type="text" value="{{ jam.date_end }}" required />
+                </div>
+            </div>
+            <div>
+                <div class="uk-form-label">
+                    <label class="uk-form-label" for="state">State</label>
+                </div>
+
+                <div class="uk-form-controls uk-form-controls-text">
+                    <select class="uk-select" name="state" id="state" disabled>
+                        <option value="{{ jam.state }}" selected>{{ jam.state.title() }}</option>
+                    </select>
+                </div>
+            </div>
+
+            <input type="hidden" name="csrf_token" id="csrf_token" value="{{ csrf_token() }}"/>
+
+            <div class="uk-align-center uk-text-center">
+                <a id="back" class="uk-button uk-button-default" href="{{ url_for("staff.jams.index") }}">
+                    <i class="uk-icon fa-fw far fa-arrow-left"></i> &nbsp;Back
+                </a>
+                <button id="done" class="uk-button uk-button-primary" type="submit">
+                    <i class="uk-icon fa-fw far fa-check"></i> &nbsp;Done
+                </button>
+            </div>
+        </form>
+
+    </div>
+
+    <script type="application/javascript">
+        const date_start = flatpickr("#date_start", {enableTime: true, altInput: true});
+        const date_end = flatpickr("#date_end", {enableTime: true, altInput: true});
+    </script>
+{% endblock %}
diff --git a/templates/staff/jams/edit_ending.html b/templates/staff/jams/edit_ending.html
new file mode 100644
index 00000000..cc27a208
--- /dev/null
+++ b/templates/staff/jams/edit_ending.html
@@ -0,0 +1,150 @@
+{% extends "main/base.html" %}
+{% block title %}Staff | Jams | Edit (Ending Comments){% endblock %}
+{% block og_title %}Staff | Jams | Edit (Ending Comments){% endblock %}
+{% block og_description %}Edit the ending comments for a code jam{% endblock %}
+{% block extra_head %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js" type="application/javascript"></script>
+{% endblock %}
+{% block content %}
+    <div class="uk-container uk-container-small uk-section">
+        <h1 class="uk-text-center">Code Jam: Edit (Ending Comments)</h1>
+
+        <form action="{{ url_for("staff.jams.edit.ending", jam=jam.number) }}" method="post" class="uk-form-horizontal">
+            <div>
+                <div class="uk-form-label">
+                    <label class="uk-form-label">Comments (RST)</label>
+                </div>
+
+                <div class="uk-form-controls uk-form-controls-text">
+                    <div id="editor" class="uk-textarea" style="resize: vertical; min-height: 15rem;">{{ jam.end_rst }}</div>
+                </div>
+
+                <input type="hidden" name="end_rst" id="end_rst" />
+            </div>
+
+            <input type="hidden" name="csrf_token" id="csrf_token" value="{{ csrf_token() }}"/>
+
+            <div class="uk-align-center uk-text-center">
+                <a id="back" class="uk-button uk-button-default" href="{{ url_for("staff.jams.index") }}">
+                    <i class="uk-icon fa-fw far fa-arrow-left"></i> &nbsp;Back
+                </a>
+                <button class="uk-button uk-button-secondary" type="button" id="preview">
+                    <i class="uk-icon fa-fw far fa-eye"></i> &nbsp;Preview
+                </button>
+                <button id="done" class="uk-button uk-button-primary" type="submit" disabled>
+                    <i class="uk-icon fa-fw far fa-check"></i> &nbsp;Done
+                </button>
+            </div>
+        </form>
+    </div>
+
+     <div id="preview-modal" class="uk-flex-top" uk-modal>
+        <div class="uk-modal-dialog">
+            <button class="uk-modal-close-default" type="button" uk-close></button>
+
+            <div class="uk-modal-body">
+                <h2>Code Jam {{ jam.number }}: {{ jam.title }} <a href="{{ jam.repo }}" id="preview-url"><i class="uk-icon fa-fw fab fa-github"></i></a></h2>
+                <p class="uk-text-meta">Theme: <span id="preview-theme">{{ jam.theme }}</span></p>
+
+                <div id="preview-div">
+                    {{ jam.end_rst | safe }}
+                </div>
+            </div>
+
+            <div class="uk-modal-footer">
+                <div class="uk-text-center">
+                    <button class="uk-button uk-button-default uk-modal-close" type="button" id="state-cancel">
+                        <i class="uk-icon fa-fw far fa-arrow-left"></i> &nbsp;Close
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script type="application/javascript">
+        "use strict";
+
+        let csrf_token = "{{ csrf_token() }}";
+        let modal = UIkit.modal(document.getElementById("preview-modal"));
+        let preview_url = "{{ url_for("staff.render") }}";
+
+        function do_preview(callback) {
+            let oReq = new XMLHttpRequest();
+
+            oReq.addEventListener("load", function() {
+                let response = JSON.parse(this.responseText);
+
+                if (response.error !== undefined) {
+                    document.getElementById("done").disabled = true;
+
+                    if (response.error_lines !== undefined) {
+                        editor.session.setAnnotations(response.error_lines);
+                        document.getElementById("preview-div").innerHTML ="<h3>Error - see editor margin</h3>";
+                    } else {
+                        console.log("Error: " + response.error);
+                        document.getElementById("preview-div").innerHTML ="<h3>Error</h3><p>" + response.error + "<p>";
+                    }
+                } else {
+                    document.getElementById("done").disabled = false;
+                    document.getElementById("preview-div").innerHTML = response.data;
+
+                    editor.session.setAnnotations([]);
+                }
+
+                if (callback !== undefined) {
+                    callback();
+                }
+            });
+
+            let data = editor.getValue();
+
+            if (data.replace("\s", "").length < 1) {
+                document.getElementById("done").disabled = true;
+
+                if (callback !== undefined) {
+                    UIkit.notification({
+                        "message": "Please enter some text to preview",
+                        "status": "danger",
+                        "pos": "bottom-center",
+                        "timeout": 5000
+                    });
+                }
+                return false;
+            }
+
+            oReq.open("POST", preview_url);
+
+            oReq.setRequestHeader("Content-type", "application/json");
+            oReq.setRequestHeader("X-CSRFToken", csrf_token);
+
+            oReq.send(JSON.stringify({"data": editor.getValue()}));
+
+            return false;
+        }
+
+        document.getElementById("preview").onclick = function() {
+            do_preview(function() {
+                modal.show();
+            })
+        };
+
+        let editor = ace.edit("editor");
+        let timer;
+
+        editor.session.setMode("ace/mode/rst");
+        editor.session.setUseWrapMode(true);
+
+        editor.setTheme("ace/theme/iplastic");
+        editor.setShowPrintMargin(false);
+
+        editor.on("input", function() {
+            document.getElementById("done").disabled = true;
+            document.getElementById("end_rst").value = editor.getValue();
+
+            if (timer !== undefined) {
+                clearTimeout(timer);
+            }
+            timer = setTimeout(do_preview, 1000);
+        });
+    </script>
+{% endblock %}
diff --git a/templates/staff/jams/edit_info.html b/templates/staff/jams/edit_info.html
new file mode 100644
index 00000000..f1c50263
--- /dev/null
+++ b/templates/staff/jams/edit_info.html
@@ -0,0 +1,177 @@
+{% extends "main/base.html" %}
+{% block title %}Staff | Jams | Edit (Basics){% endblock %}
+{% block og_title %}Staff | Jams | Edit (Basics){% endblock %}
+{% block og_description %}Edit the basic info for a code jam{% endblock %}
+{% block extra_head %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js" type="application/javascript"></script>
+{% endblock %}
+{% block content %}
+    <div class="uk-container uk-container-small uk-section">
+        <h1 class="uk-text-center">Code Jam: Edit (Basics)</h1>
+
+        <form action="{{ url_for("staff.jams.edit.info", jam=jam.number) }}" method="post" class="uk-form-horizontal">
+            <div>
+                <div class="uk-form-label">
+                    <label class="uk-form-label" for="repo">Repo URL</label>
+                </div>
+
+                <div class="uk-form-controls uk-form-controls-text">
+                    <input class="uk-input" name="repo" id="repo" type="text" value="{{ jam.repo }}" required />
+                </div>
+            </div>
+            <div>
+                <div class="uk-form-label">
+                    <label class="uk-form-label" for="theme">Theme</label>
+                </div>
+
+                <div class="uk-form-controls uk-form-controls-text">
+                    <input class="uk-input" name="theme" id="theme" type="text" value="{{ jam.theme }}" required />
+                </div>
+            </div>
+
+            <div>
+                <div class="uk-form-label">
+                    <label class="uk-form-label">Task (RST)</label>
+                </div>
+
+                <div class="uk-form-controls uk-form-controls-text">
+                    <div id="editor" class="uk-textarea" style="resize: vertical; min-height: 15rem;">{{ jam.task_rst }}</div>
+                </div>
+
+                <input type="hidden" name="task_rst" id="task_rst" />
+            </div>
+
+            <input type="hidden" name="csrf_token" id="csrf_token" value="{{ csrf_token() }}"/>
+
+            <div class="uk-align-center uk-text-center">
+                <a id="back" class="uk-button uk-button-default" href="{{ url_for("staff.jams.index") }}">
+                    <i class="uk-icon fa-fw far fa-arrow-left"></i> &nbsp;Back
+                </a>
+                <button class="uk-button uk-button-secondary" type="button" id="preview">
+                    <i class="uk-icon fa-fw far fa-eye"></i> &nbsp;Preview
+                </button>
+                <button id="done" class="uk-button uk-button-primary" type="submit" disabled>
+                    <i class="uk-icon fa-fw far fa-check"></i> &nbsp;Done
+                </button>
+            </div>
+        </form>
+    </div>
+
+     <div id="preview-modal" class="uk-flex-top" uk-modal>
+        <div class="uk-modal-dialog">
+            <button class="uk-modal-close-default" type="button" uk-close></button>
+
+            <div class="uk-modal-body">
+                <h2>Code Jam {{ jam.number }}: {{ jam.title }} <a href="{{ jam.repo }}" id="preview-url"><i class="uk-icon fa-fw fab fa-github"></i></a></h2>
+                <p class="uk-text-meta">Theme: <span id="preview-theme">{{ jam.theme }}</span></p>
+
+                <div id="preview-div">
+                    {{ jam.task_html | safe }}
+                </div>
+            </div>
+
+            <div class="uk-modal-footer">
+                <div class="uk-text-center">
+                    <button class="uk-button uk-button-default uk-modal-close" type="button" id="state-cancel">
+                        <i class="uk-icon fa-fw far fa-arrow-left"></i> &nbsp;Close
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script type="application/javascript">
+        "use strict";
+
+        let csrf_token = "{{ csrf_token() }}";
+        let modal = UIkit.modal(document.getElementById("preview-modal"));
+        let preview_url = "{{ url_for("staff.render") }}";
+
+        function do_preview(callback) {
+            let oReq = new XMLHttpRequest();
+
+            oReq.addEventListener("load", function() {
+                let response = JSON.parse(this.responseText);
+
+                if (response.error !== undefined) {
+                    document.getElementById("done").disabled = true;
+
+                    if (response.error_lines !== undefined) {
+                        editor.session.setAnnotations(response.error_lines);
+                        document.getElementById("preview-div").innerHTML ="<h3>Error - see editor margin</h3>";
+                    } else {
+                        console.log("Error: " + response.error);
+                        document.getElementById("preview-div").innerHTML ="<h3>Error</h3><p>" + response.error + "<p>";
+                    }
+                } else {
+                    document.getElementById("done").disabled = false;
+                    document.getElementById("preview-div").innerHTML = response.data;
+
+                    editor.session.setAnnotations([]);
+                }
+
+                if (callback !== undefined) {
+                    callback();
+                }
+            });
+
+            let data = editor.getValue();
+
+            if (data.replace("\s", "").length < 1) {
+                document.getElementById("done").disabled = true;
+
+                if (callback !== undefined) {
+                    UIkit.notification({
+                        "message": "Please enter some text to preview",
+                        "status": "danger",
+                        "pos": "bottom-center",
+                        "timeout": 5000
+                    });
+                }
+                return false;
+            }
+
+            oReq.open("POST", preview_url);
+
+            oReq.setRequestHeader("Content-type", "application/json");
+            oReq.setRequestHeader("X-CSRFToken", csrf_token);
+
+            oReq.send(JSON.stringify({"data": editor.getValue()}));
+
+            return false;
+        }
+
+        document.getElementById("preview").onclick = function() {
+            do_preview(function() {
+                modal.show();
+            })
+        };
+
+        document.getElementById("theme").oninput = function() {
+            document.getElementById("preview-theme").textContent = this.value;
+        };
+
+        document.getElementById("repo").oninput = function() {
+            document.getElementById("preview-url").href = this.value;
+        };
+
+        let editor = ace.edit("editor");
+        let timer;
+
+        editor.session.setMode("ace/mode/rst");
+        editor.session.setUseWrapMode(true);
+
+        editor.setTheme("ace/theme/iplastic");
+        editor.setShowPrintMargin(false);
+
+        editor.on("input", function() {
+            document.getElementById("done").disabled = true;
+            document.getElementById("task_rst").value = editor.getValue();
+
+            if (timer !== undefined) {
+                clearTimeout(timer);
+            }
+            timer = setTimeout(do_preview, 1000);
+        });
+    </script>
+{% endblock %}
diff --git a/templates/staff/jams/index.html b/templates/staff/jams/index.html
new file mode 100644
index 00000000..0f0ce022
--- /dev/null
+++ b/templates/staff/jams/index.html
@@ -0,0 +1,251 @@
+{% extends "main/base.html" %}
+{% block title %}Staff | Home{% endblock %}
+{% block og_title %}Staff | Home{% endblock %}
+{% block og_description %}Landing page for the staff management area{% endblock %}
+{% block extra_head %}
+    <script src="{{ static_file('js/jams.js') }}"></script>
+{% endblock %}
+{% block content %}
+    <div class="uk-container uk-container-small uk-section">
+        <h1>Code Jams</h1>
+
+        <a class="uk-button uk-button-default" href="{{ url_for("staff.index") }}"><i class="uk-icon fa-fw fas fa-arrow-left"></i> &nbsp;Back</a>
+
+        <a class="uk-button uk-button-primary" href="{{ url_for("staff.jams.create") }}">Create</a>
+        {% if not jams %}
+            <p>
+                No code jams found. Create one above!
+            </p>
+        {% else %}
+            {% for jam in jams %}
+                <h2 class="uk-heading-divider">
+                    Code Jam {{ jam.number }}: {{ jam.title }}
+
+                    <span class="uk-align-right">
+                        {% if jam.state == "planning" %}
+                            <i class="uk-icon uk-text-muted fa-fw far fa-edit state-{{ jam.number }}" title="State: {{ jam.state }}" id="state-{{ jam.number }}-planning"></i>
+                        {% else %}
+                            <i class="uk-icon uk-text-muted fa-fw far fa-edit state-{{ jam.number }}" style="display: none;" title="State: {{ jam.state }}" id="state-{{ jam.number }}-planning"></i>
+                        {% endif %}
+
+                        {% if jam.state == "announced" %}
+                            <i class="uk-icon uk-text-primary fa-fw far fa-bullhorn state-{{ jam.number }}" title="State: {{ jam.state }}" id="state-{{ jam.number }}-announced"></i>
+                        {% else %}
+                            <i class="uk-icon uk-text-primary fa-fw far fa-bullhorn state-{{ jam.number }}" hidden="hidden" title="State: {{ jam.state }}" id="state-{{ jam.number }}-announced"></i>
+                        {% endif %}
+
+                        {% if jam.state == "running" %}
+                            <i class="uk-icon uk-text-success fa-fw far fa-play state-{{ jam.number }}" title="State: {{ jam.state }}" id="state-{{ jam.number }}-running"></i>
+                        {% else %}
+                            <i class="uk-icon uk-text-success fa-fw far fa-play state-{{ jam.number }}" hidden="hidden" title="State: {{ jam.state }}" id="state-{{ jam.number }}-running"></i>
+                        {% endif %}
+
+                        {% if jam.state == "judging" %}
+                            <i class="uk-icon uk-text-primary fa-fw far fa-balance-scale state-{{ jam.number }}" title="State: {{ jam.state }}" id="state-{{ jam.number }}-judging"></i>
+                        {% else %}
+                            <i class="uk-icon uk-text-primary fa-fw far fa-balance-scale state-{{ jam.number }}" hidden="hidden" title="State: {{ jam.state }}" id="state-{{ jam.number }}-judging"></i>
+                        {% endif %}
+
+                        {% if jam.state == "finished" %}
+                            <i class="uk-icon uk-text-success fa-fw far fa-check-square state-{{ jam.number }}" title="State: {{ jam.state }}" id="state-{{ jam.number }}-finished"></i>
+                        {% else %}
+                            <i class="uk-icon uk-text-success fa-fw far fa-check-square state-{{ jam.number }}" hidden="hidden" title="State: {{ jam.state }}" id="state-{{ jam.number }}-finished"></i>
+                        {% endif %}
+
+                        {% if not jam.state in states %}
+                            <i class="uk-icon uk-text-danger fa-fw far fa-question-square" title="Unknown state: {{ jam.state }}" id="state-{{ jam.number }}-unknown"></i>
+                        {% else %}
+                            <i class="uk-icon uk-text-danger fa-fw far fa-question-square" hidden="hidden" title="Unknown state: {{ jam.state }}" id="state-{{ jam.number }}-unknown"></i>
+                        {% endif %}
+                    </span>
+                </h2>
+
+                <span class="uk-label">Participants: {{ jam.participants | length }}</span>
+                <span class="uk-label uk-label-success">Start: {{ format_datetime(jam.date_start) }} (UTC)</span>
+                <span class="uk-label uk-label-danger">End: {{ format_datetime(jam.date_end)  }} (UTC)</span>
+
+                <section class="uk-section">
+                    <div class="uk-button-group uk-width-1-1">
+                        <a class="uk-button uk-button-default uk-width-expand state-button" data-jam="{{ jam.number }}" id="jam-{{ jam.number }}-button-state">
+                            <i class="uk-icon fa-fw far fa-pencil"></i> &nbsp;State
+                        </a>
+
+                        {% if jam.state == "planning" %}
+                            <a class="uk-button uk-button-default uk-width-expand" data-jam="{{ jam.number }}" id="jam-{{ jam.number }}-button-basics" href="{{ url_for("staff.jams.edit.basics", jam=jam.number) }}">
+                                <i class="uk-icon fa-fw far fa-pencil"></i> &nbsp;Basics
+                            </a>
+                        {% else %}
+                            <a class="uk-button uk-button-default uk-width-expand" hidden="hidden" data-jam="{{ jam.number }}" id="jam-{{ jam.number }}-button-basics" href="{{ url_for("staff.jams.edit.basics", jam=jam.number) }}">
+                                <i class="uk-icon fa-fw far fa-pencil"></i> &nbsp;Basics
+                            </a>
+                        {% endif %}
+
+                        {% if jam.state in ["planning", "announced"] %}
+                            <a class="uk-button uk-button-default uk-width-expand" data-jam="{{ jam.number }}" id="jam-{{ jam.number }}-button-info" href="{{ url_for("staff.jams.edit.info", jam=jam.number) }}">
+                                <i class="uk-icon fa-fw far fa-pencil"></i> &nbsp;Info
+                            </a>
+                        {% else %}
+                            <a class="uk-button uk-button-default uk-width-expand" hidden="hidden" data-jam="{{ jam.number }}" id="jam-{{ jam.number }}-button-info" href="{{ url_for("staff.jams.edit.info", jam=jam.number) }}">
+                                <i class="uk-icon fa-fw far fa-pencil"></i> &nbsp;Info
+                            </a>
+                        {% endif %}
+
+                        {% if jam.state == "judging" %}
+                            <a class="uk-button uk-button-default uk-width-expand" data-jam="{{ jam.number }}" id="jam-{{ jam.number }}-button-ending" href="{{ url_for("staff.jams.edit.ending", jam=jam.number) }}">
+                                <i class="uk-icon fa-fw far fa-pencil"></i> &nbsp;Ending
+                            </a>
+                        {% else %}
+                            <a class="uk-button uk-button-default uk-width-expand" hidden="hidden" data-jam="{{ jam.number }}" id="jam-{{ jam.number }}-button-ending" href="{{ url_for("staff.jams.edit.ending", jam=jam.number) }}">
+                                <i class="uk-icon fa-fw far fa-pencil"></i> &nbsp;Ending
+                            </a>
+                        {% endif %}
+                    </div>
+                    <br/>
+                    <div class="uk-button-group uk-width-1-1">
+                        <a class="uk-button uk-button-secondary uk-width-expand" href="# TODO">
+                            <i class="uk-icon fa-fw far fa-user"></i> &nbsp;Participants
+                        </a>
+                        <a class="uk-button uk-button-primary uk-width-expand" href="# TODO">
+                            <i class="uk-icon fa-fw far fa-users"></i> &nbsp;Teams
+                        </a>
+                    </div>
+                </section>
+            {% endfor %}
+        {% endif %}
+    </div>
+
+    <div id="state-modal" class="uk-flex-top" uk-modal>
+        <div class="uk-modal-dialog">
+            <button class="uk-modal-close-default" type="button" uk-close></button>
+
+            <div class="uk-modal-header">
+                <h2 class="uk-modal-title">Set State</h2>
+            </div>
+
+            <div class="uk-modal-body">
+                <form class="uk-form-horizontal">
+                    <div>
+                        <div class="uk-form-label">
+                            <label class="uk-form-label" for="state">State</label>
+                        </div>
+
+                        <div class="uk-form-controls uk-form-controls-text">
+                            <select class="uk-select" name="state" id="state">
+                                {% for state in states %}
+                                    <option value="{{ state }}">{{ state.title() }}</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                    </div>
+                </form>
+            </div>
+
+            <div class="uk-modal-footer">
+                <div class="uk-text-center">
+                    <button class="uk-button uk-button-default uk-modal-close" type="button" id="state-cancel">
+                        <i class="uk-icon fa-fw far fa-arrow-left"></i> &nbsp;Cancel
+                    </button>
+                    <a class="uk-button uk-button-primary" type="button" id="state-submit">
+                        <i class="uk-icon fa-fw far fa-check"></i> &nbsp;Save
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script type="application/javascript">
+        const actions = new Actions("{{ url_for("staff.jams.action") }}", "{{ csrf_token() }}");
+
+        // State modal objects
+        const state_modal = UIkit.modal(document.getElementById("state-modal"));
+        const state_input = document.getElementById("state");
+        const state_cancel = document.getElementById("state-cancel");
+        const state_submit = document.getElementById("state-submit");
+
+        state_cancel.onclick = function() {
+            state_modal.hide();
+        };
+
+        for (let button of document.getElementsByClassName("state-button")) {
+            button.onclick = function() {
+                state_modal.show();
+
+                state_submit.onclick = function() {
+                    let jam = parseInt(button.getAttribute("data-jam"));
+                    let state = state_input.value;
+
+                    actions.set_state(jam, state, function(success, data) {
+                        if (success) {
+                            UIkit.notification({
+                                "message": "State set successfully",
+                                "status": "success",
+                                "pos": "bottom-center",
+                                "timeout": 5000,
+                            });
+
+                            for (let icon of document.getElementsByClassName("state-" + jam)) {
+                                console.log(icon);
+                                icon.setAttribute("hidden", "hidden");
+                            }
+
+                            switch (state) {  // Set the state on the page too so there's no reloading
+                                case "planning":
+                                    document.getElementById("state-" + jam + "-planning").removeAttribute("hidden");
+
+                                    document.getElementById("jam-" + jam + "-button-basics").removeAttribute("hidden");
+                                    document.getElementById("jam-" + jam + "-button-info").removeAttribute("hidden");
+                                    document.getElementById("jam-" + jam + "-button-ending").setAttribute("hidden", "hidden");
+                                    break;
+                                case "announced":
+                                    document.getElementById("state-" + jam + "-announced").removeAttribute("hidden");
+
+                                    document.getElementById("jam-" + jam + "-button-basics").setAttribute("hidden", "hidden");
+                                    document.getElementById("jam-" + jam + "-button-info").removeAttribute("hidden");
+                                    document.getElementById("jam-" + jam + "-button-ending").setAttribute("hidden", "hidden");
+                                    break;
+                                case "running":
+                                    document.getElementById("state-" + jam + "-running").removeAttribute("hidden");
+
+                                    document.getElementById("jam-" + jam + "-button-basics").setAttribute("hidden", "hidden");
+                                    document.getElementById("jam-" + jam + "-button-info").setAttribute("hidden", "hidden");
+                                    document.getElementById("jam-" + jam + "-button-ending").setAttribute("hidden", "hidden");
+                                    break;
+                                case "judging":
+                                    document.getElementById("state-" + jam + "-judging").removeAttribute("hidden");
+
+                                    document.getElementById("jam-" + jam + "-button-basics").setAttribute("hidden", "hidden");
+                                    document.getElementById("jam-" + jam + "-button-info").setAttribute("hidden", "hidden");
+                                    document.getElementById("jam-" + jam + "-button-ending").removeAttribute("hidden");
+                                    break;
+                                case "finished":
+                                    document.getElementById("state-" + jam + "-finished").removeAttribute("hidden");
+
+                                    document.getElementById("jam-" + jam + "-button-basics").setAttribute("hidden", "hidden");
+                                    document.getElementById("jam-" + jam + "-button-info").setAttribute("hidden", "hidden");
+                                    document.getElementById("jam-" + jam + "-button-ending").setAttribute("hidden", "hidden");
+                                    break;
+                                default:
+                                    document.getElementById("state-" + jam + "-unknown").removeAttribute("hidden");
+
+                                    document.getElementById("jam-" + jam + "-button-basics").setAttribute("hidden", "hidden");
+                                    document.getElementById("jam-" + jam + "-button-info").setAttribute("hidden", "hidden");
+                                    document.getElementById("jam-" + jam + "-button-ending").setAttribute("hidden", "hidden");
+                                    break;
+                            }
+
+                            state_modal.hide();
+                        } else {
+                            console.log(data);
+                            UIkit.notification({
+                                "message": "Failed to set state",
+                                "status": "danger",
+                                "pos": "bottom-center",
+                                "timeout": 5000
+                            })
+                        }
+                    });
+                };
+            }
+        }
+    </script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/staff/tables/index.html b/templates/staff/tables/index.html
index 079ed306..206234bb 100644
--- a/templates/staff/tables/index.html
+++ b/templates/staff/tables/index.html
@@ -4,7 +4,7 @@
 {% block og_description %}Table management and editor{% endblock %}
 {% block content %}
     <div class="uk-container uk-section uk-container-small">
-        <a class="uk-button uk-button-default" href="{{ url_for("staff.staff_index") }}"><i class="uk-icon fa-fw fas fa-arrow-left"></i> &nbsp;Back</a>
+        <a class="uk-button uk-button-default" href="{{ url_for("staff.index") }}"><i class="uk-icon fa-fw fas fa-arrow-left"></i> &nbsp;Back</a>
         <h1 class="uk-title uk-text-center">
             Table manager
         </h1>