<html lang="en">
{% load static %}
{% load leaflet_tags %}
{% leaflet_js %}
{% leaflet_css %}
{% load filters %}
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
        integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
        crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://unpkg.com/htmx.org@1.2.0"
        integrity="sha384-DK9cslo5RE1LAnW8sCw7cSHU2nlzkXfo2NmCQD+4disC90ClC1ywgMbijNPxFVki"
        crossorigin="anonymous"></script>

    <!-- custom static files -->
    <link rel="shortcut icon" type="image/ico" href="{% static 'img/favicon.ico' %}"/>
    <link type="text/css" rel="stylesheet" href="{% static 'css/style.css' %}"/>
    <script src="{% static 'js/script.js' %}"></script>
    {% load bootstrap4 %}
    {% bootstrap_javascript jquery='full' %}
    {{ form.media }}

</head>

<script>
    var map = {};   // thanks to https://stackoverflow.com/questions/5203407/how-to-detect-if-multiple-keys-are-pressed-at-once-using-javascript
    onkeydown = onkeyup = function (e) {
        let ids = {{ form_field_ids | safe }};
        if (ids.includes(document.activeElement.id)) {
            // do nothing in case focus is in input form fields
        } else {
            let sports = {{ sports | queryset_to_list | safe }}
                e = e || event; // to deal with IE
            map[e.key] = e.type === 'keydown';
            go_to_page_with_key(event, sports)
        }
    }

    function go_to_page_with_key(event, sports) {
        if (map['g'] && map['d']) {
            window.location.href = '/';
            map = {};
        } else if (map['g'] && map['s']) {
            window.location.href = '/sports';
            map = {};
        } else if (map['g'] && map['n']) {
            window.location.href = '/add-activity';
            map = {};
        } else if (map['g'] && map['a']) {
            window.location.href = '/awards';
            map = {};
        } else if (map['g'] && map[',']) {
            window.location.href = '/settings';
            map = {};
        } else if (map['g'] && map['h']) {
            window.location.href = '/help';
            map = {};
        } else if (map['g'] && map['0']) {
            window.location.href = get_sport(event, sports);
            map = {};
        } else if (map['g'] && map['1']) {
            window.location.href = get_sport(event, sports);
            map = {};
        } else if (map['g'] && map['2']) {
            window.location.href = get_sport(event, sports);
            map = {};
        } else if (map['g'] && map['3']) {
            window.location.href = get_sport(event, sports);
            map = {};
        } else if (map['g'] && map['4']) {
            window.location.href = get_sport(event, sports);
            map = {};
        } else if (map['g'] && map['5']) {
            window.location.href = get_sport(event, sports);
            map = {};
        } else if (map['g'] && map['6']) {
            window.location.href = get_sport(event, sports);
            map = {};
        } else if (map['g'] && map['7']) {
            window.location.href = get_sport(event, sports);
            map = {};
        } else if (map['g'] && map['8']) {
            window.location.href = get_sport(event, sports);
            map = {};
        } else if (map['g'] && map['9']) {
            window.location.href = get_sport(event, sports);
            map = {};
        } else if (map['[']) {
            toggleNav();
            map = {};
        }
    }

    function get_sport(event, sports) {
        let event_as_int = Number(String.fromCharCode(event.which));
        if (event_as_int === 0) {
            event_as_int = sports.length;
        }
        return '/sport/' + sports[event_as_int - 1]
    }
</script>

<body>
{% include 'lib/navbar.html' %}
{% include 'lib/sidebar.html' %}
<div id="main">
    {% block body %}
        // content will be here
    {% endblock %}
</div>
</body>
</html>
