{% extends "admin/base.html" %}
{% load i18n %}
{% block title %}{{ title }} | {% trans 'Medlemssys' %}{% endblock %}

{% block branding %}
<h1 id="site-name" style="display: inline-block">{% trans 'Medlemssys' %}</h1>
    {% if user.is_authenticated %}
    <div id=nav_complete>
        <style>
        #nav_complete { display: inline-block; margin: 0 4px; }
        #nav_complete label { color: white; }
        .selected { background: #EDF3FE; }
        /* .selected { background: url("http://medlem.nynorsk.no/static/admin/img/default-bg.gif") repeat-x #7CA0C7; color: white; }
        #nav_table .selected a:link, #nav_table .selected a:visited, #nav_table .selected a { color: white; } */
        #nav_input { width: 270px; font-size: 16px; margin-top: -2px; margin-right: 5px; }
        #nav_table { width: 600px; background-color: white; color: black; position: absolute; z-index: 100; border: 2px solid white; outline: 1px solid #ccc; }
        #nav_table a:link, #nav_table a, #nav_table a:visited { color: black; }
        </style>
        <input type=search name=term id=nav_input placeholder="Skriv for finna medlem" autofocus class="vTextField">
        <table id=nav_table hidden>
            <thead><tr><th>Namn</th> <th>Betaling</th> <th>Lag</th></tr></thead>
            <tbody><tr><td>gjer eit søk</td> <td></td><td></td></tr></tbody>
        </table>

        <a href="{% url 'admin:medlem_giro_changelist' %}">Giro</a> /
        <a href="{% url 'admin:medlem_medlem_changelist' %}">Medlem</a>

        <script>
(function(input, table)
{
var xhr = new XMLHttpRequest();
var info = {};
var change_grace;
var pending_navigation = false;
var selected_row = null;

input.addEventListener('input', change)
input.addEventListener('blur', function() {
    if (!input.value.length)
        table.hidden = true;
});
input.addEventListener('keydown', function(e) {
    //console.log("key", e.key, "charCode", e.charCode, "keyCode", e.keyCode, "which", e.which)
    if (e.key == "Enter" || e.keyCode == 13) {
        if (selected_row && selected_row.dataset['id'] !== undefined) {
            var evt = document.createEvent("Event");
            evt.initEvent("click", true, true);
            selected_row.dispatchEvent(evt);
        }
        pending_navigation = true;
    }
    else if ((e.key == "Down" || e.keyCode == 40) && selected_row && selected_row.nextElementSibling) {
        selected_row.classList.remove("selected");
        selected_row = selected_row.nextElementSibling;
        selected_row.classList.add("selected");
    }
    else if ((e.key == "Up" || e.keyCode == 38) && selected_row && selected_row.previousElementSibling) {
        selected_row.classList.remove("selected");
        selected_row = selected_row.previousElementSibling;
        selected_row.classList.add("selected");
    }
});
//input.addEventListener('change', change)

function change(e) {
    clearTimeout(change_grace);
    if (input.value.length < 2)
    {
        table.hidden = true;
        selected_row = null;
        return;
    }

    change_grace = setTimeout(do_xhr, 5);
}

function do_xhr() {
    xhr.open('GET', '/api/get_members.json?term=' + encodeURIComponent(input.value));
    xhr.onload = function(e) {
        info = JSON.parse(xhr.responseText);
        build_table(info);
    }
    xhr.send();
}

function build_table(members) {
    var tableinfo = "";
    if (!members.length) {
        table.hidden = true;
        pending_navigation = false;
        selected_row = null;
        return;
    }
    table.tBodies[0].innerHTML = "";
    members.forEach(function(l) {
        console.log("adding to list: " + l.namn);
        var admin_url = "{% url 'admin:medlem_medlem_change' 1337 %}"
                .replace(1337, l.id);
        if (pending_navigation)
        {
            console.log("pending_nav, going to " + l.namn);
            window.location = admin_url;
            pending_navigation = false;
        }
        var tr = document.createElement("tr");
        tr.dataset['id'] = l.id;
        tr.innerHTML = "<td><a href='" + admin_url + "'>"
                 + l.namn + "</a> (" + l.alder + ")</td>"
                 + "<td>" + (''+l.bet).replace(/,/g, ', ') + "</td>"
                 + "<td>" + l.lokallag + "</td></tr>";

        tr.addEventListener('click', function() {
            window.location = admin_url;
            return false;
        });
        table.tBodies[0].appendChild(tr);
    });
    selected_row = table.querySelector("tbody tr");
    selected_row.classList.add("selected");
    table.hidden = false;
}
})(document.querySelector("#nav_input"),
   document.querySelector("#nav_table"));

        </script>
    </div>{# nav_complete #}
    {% endif %}
{% endblock branding %}

{#
{% block nav-global %}{% endblock %}
#}

{% block extrastyle %}<link type="text/css" rel="stylesheet" href="/static/medlemssys.css">{% endblock %}
