## events_tab_content: str
## entries_tab_content: str
## classes_tab_content: str
## courses_tab_content: str
## results_tab_content: str
## series_tab_content: str
## competitors_tab_content: str
## clubs_tab_content: str


<!-- Tab links -->
<div id="tabs" class="tab">
  <button id="tab.events" class="tablinks active" onclick="evnt_update(); openTab(event, 'Events')">Events</button>
  <button id="tab.entries" disabled class="tablinks" onclick="entr_update(); openTab(event, 'Entries')">Entries</button>
  <button id="tab.classes" disabled class="tablinks" onclick="cls_update(); openTab(event, 'Classes')">Classes</button>
  <button id="tab.courses" disabled class="tablinks" onclick="cou_update(); openTab(event, 'Courses')">Courses</button>
  <button id="tab.results" disabled class="tablinks" onclick="res_update(); openTab(event, 'Results')">Results</button>
  <button id="tab.series" class="tablinks" onclick="ser_update(); openTab(event, 'Series')">Series</button>
  <button id="tab.competitors" class="tablinks" onclick="comp_update(); openTab(event, 'Competitors')">Competitors</button>
  <button id="tab.clubs" class="tablinks" onclick="clb_update(); openTab(event, 'Clubs')">Clubs</button>
  <button id="tab.reader" disabled class="tablinks" onclick="evnt_mySIReader()">SI Reader ...</button>
</div>

<!-- The Modal -->
<div class="modal" id="statusDialog">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close" onclick="document.getElementById('statusDialog').style.display='none'">&times;</span>
    <div id="statusDialogContent"></div>
    <button type="button" class="btn cancel" onclick="document.getElementById('statusDialog').style.display='none'">Close</button>
  </div>
</div>

<script>
    function myfunction() {
        document.getElementById("tab.entries").disabled = true;
        document.getElementById("tab.classes").disabled = true;
        document.getElementById("tab.courses").disabled = true;
        document.getElementById("tab.results").disabled = true;
        document.getElementById("tab.reader").disabled = true;
        document.getElementById('Events').style.display = "block";
    }
</script>

<!-- Events tab content -->
${events_tab_content | n}

<!-- Entries tab content -->
${entries_tab_content | n}

<!-- Classes tab content -->
${classes_tab_content | n}

<!-- Courses tab content -->
${courses_tab_content | n}

<!-- Results tab content -->
${results_tab_content | n}

<!-- Series tab content -->
${series_tab_content | n}

<!-- Competitors tab content -->
${competitors_tab_content | n}

<!-- Clubs tab content -->
${clubs_tab_content | n}


<script>
    var event_id = null;
    
    function openTab(evt, tabName) {
        // Declare all variables
        var i, tabcontent, tablinks;

        // Get all elements with class="tabcontent" and hide them
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }

        // Get all elements with class="tablinks" and remove the class "active"
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }

        // Show the current tab, and add an "active" class to the button that opened the tab
        document.getElementById(tabName).style.display = "block";
        evt.currentTarget.className += " active";
    } 
</script>

<script>
    function table_mousedown(e) {
        if (e.target.tagName == "TD") {
            if (e.detail > 1) {
                e.preventDefault();
            }
        }
    }
</script>

<script>
    function updateDisplayedParams(selected) {
        // Declare all variables
        var i, nodes, element, parent;

        element = document.getElementById(selected);
        parent = element.parentNode;

        // Get all elements with class="params" below parent and hide them
        nodes = parent.getElementsByClassName("params");
        for (i = 0; i < nodes.length; i++) {
            nodes[i].style.display = "none";
            inputs = nodes[i].getElementsByTagName("input");
            for (j = 0; j < inputs.length; j++) {
                inputs[j].disabled = true;
            }
        }

        // Get all elements with class="required" below parent
        // and set required attribute to false
        required = parent.getElementsByClassName("required");
        for (i = 0; i < required.length; i++) {
            required[i].required = false;
        }

        // Show the parameters below selected
        element.style.display = "block";
        inputs = element.getElementsByTagName("input");
        for (j = 0; j < inputs.length; j++) {
            inputs[j].disabled = false;
        }

        // Get all elements with class="required" below selected
        // and set required attribute to true
        required = element.getElementsByClassName("required");
        for (i = 0; i < required.length; i++) {
            required[i].required = true;
        }
    }

    function mark_label(node) {
        // find form element
        elem = node.parentElement;
        while (elem != null && elem.tagName != "FORM") {
            elem = elem.parentElement;
        }
        // find label element
        if (elem != null) {
            label = elem.querySelector("label[for=" + node.id + "]");
            if (label != null) {
                if (node.tagName == "SELECT") {
                    notChanged = node.options[node.selectedIndex].defaultSelected;
                } else if (node.type == "checkbox") {
                    notChanged = node.checked == node.defaultChecked;
                } else {
                    notChanged = node.value == node.defaultValue;
                }

                if (notChanged) {
                    label.style.color = "inherit";
                } else {
                    label.style.color = "red";
                }
            }
        }
    }
</script>

<script>
    function align_form_table(id) {
        var h = 0;
        var table = document.getElementById(id);
        for (var i = 0; i < table.rows.length; i++) {
            if (h < table.rows[i].offsetHeight) {
                h = table.rows[i].offsetHeight;
            }
        }
        for (var i = 0; i < table.rows.length; i++) {
            table.rows[i].style.height = h.toString() + "px";
        }
    }
</script>

<script>
    function evnt_mySIReader() {
        url = window.location.protocol + '//' + window.location.hostname + ':' + window.location.port + '/si2?id=' + window.event_id
        window.open(url, '_blank')
    }
</script>

<script>
    function download(fileName, data, mimetype) {
        var textFileAsBlob = new Blob([data], {type: mimetype});
        var downloadLink = document.createElement("a");
        downloadLink.download = fileName;
        if (window.webkitURL != null) {
            downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
        } else {
            downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
            downloadLink.onclick = document.body.removeChild(event.target);
            downloadLink.style.display = "none";
            document.body.appendChild(downloadLink);
        }
        downloadLink.click();
    }
</script>

<script>
    function clear_filter(event, filter, table) {
        filt = document.getElementById(filter);
        filt.value = "";
        filt.focus();
        window.scrollTo(0, 0);
        filter_table(table, 'tr', filt.value);
        event.preventDefault()
    }

    function hotkey_alt_f(e) {
        if (e.altKey && e.key == "f") {
            active_tab = document.getElementsByClassName("tablinks active");
            if (active_tab.length > 0) {
                switch (active_tab[0].id) {
                    case "tab.events":
                        clear_filter(e, 'eve_filter', 'evnt.table');
                        break;
                    case "tab.entries":
                        clear_filter(e, 'entr.filter', 'entr.table');
                        break;
                    case "tab.classes":
                        clear_filter(e, 'clas.filter', 'cls.table');
                        break;
                    case "tab.courses":
                        clear_filter(e, 'cour.filter', 'cou.table');
                        break;
                    case "tab.competitors":
                        clear_filter(e, 'comp.filter', 'comp.table');
                        break;
                    case "tab.clubs":
                        clear_filter(e, 'club.filter', 'clb.table');
                        break;
                }
            }
        }
    }
    document.addEventListener('keydown', hotkey_alt_f, false);
</script>