<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://yandex.st/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
    <script type='text/javascript' src="{% static 'js/xmlhttp.js' %}"></script>
    <script type='text/javascript' src="{% static 'js/cgi_switcher.js' %}"></script>
</head>
<script type="text/javascript">
    const nav_ctype = '{{ ctype }}';
    let ctypes_list = [];
    let ctypes_tries = 0;

    function nct_ctypes_retry(err) {
        console.log(err);
        if (++ctypes_tries < 4) {
            setTimeout(nct_data_load, 3000);
        } else {
            console.log('failed to load ctypes: ' + err);
        }
    }

    function nct_data_load() {
        let xmlhttp = getXmlHttp();
        let url = '{% url "get_ctypes" %}';
        xmlhttp.open('GET', url);
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState === 4) {
                if (xmlhttp.status === 200) {
                    try {
                        let res = JSON.parse(xmlhttp.responseText);
                        if (res['success']) {
                            ctypes_list = res['result'];
                            nct_generate_ctypes();
                        } else {
                            nct_ctypes_retry(xmlhttp.responseText);
                        }
                    } catch(err) { nct_ctypes_retry(err); }
                } else {
                    nct_ctypes_retry('not 200 ' + xmlhttp.responseText);
                }
            }
        };
        xmlhttp.send();
    }

    function nct_generate_ctypes() {
        let ct_select_el = document.getElementById('ctype_selector');
        if (!!ct_select_el) {
            let dd_el = document.createElement('span');
            dd_el.className = 'dropdown';
            let sel_el = document.createElement('span');
            sel_el.setAttribute('data-toggle', 'dropdown');
            sel_el.className = 'main-selector';
            sel_el.innerHTML = nav_ctype;
            let menu_el = document.createElement('ul');
            menu_el.className = 'dropdown-menu';

            for (let i=0; i<ctypes_list.length; ++i) {
                let opt_el = document.createElement('li');
                let link_el = document.createElement('a');
                link_el.innerHTML = ctypes_list[i];
                link_el.href = window.location.pathname + set_cgi_param('ctype', ctypes_list[i]);
                link_el.id = 'nav-ctype-' + ctypes_list[i];
                opt_el.appendChild(link_el);
                menu_el.appendChild(opt_el);
            }
            dd_el.appendChild(sel_el);
            dd_el.appendChild(menu_el);
            ct_select_el.innerHTML = '';
            ct_select_el.appendChild(dd_el);
        } else {
            console.log('no ctype selector');
        }
    }

    $(document).ready(function() {
        //console.log('check for load ctypes');
        let ct_select_el = document.getElementById('ctype_selector');
        if (!ct_select_el) {
            console.log('no ctype selector');
        } else {
            nct_data_load();
        }
    });
</script>
<body>
</body>
</html>
