{% load cradmin_kss_styleguide_tags %}
<header class="kss-header">
    {% block toctitle %}
        <h1 class="kss-header__title">
            <a href="{% url 'cradmin_kss_styleguide_guide' unique_id=styleguideconfig.unique_id %}" class="kss-header__title-link">{{ styleguideconfig.label }}</a>
        </h1>
    {% endblock toctitle %}

    <button type="button" class="kss-header__menu" onclick="cradmin_kss_styleguide_toggle_menu()">
        <span class="icon-hamburger  icon-hamburger--light">
            <span class="icon-hamburger__bar"></span>
            <span class="icon-hamburger__bar"></span>
            <span class="icon-hamburger__bar"></span>
        </span>
        <span class="kss-header__menu-text">Menu</span>
    </button>
</header>

<nav class="kss-menu" onclick="cradmin_kss_styleguide_toggle_menu()">
    <div class="kss-menu__content">
        {% for childnode in sectiontree.sorted_children %}
            {% render_kss_toc_node styleguideconfig=styleguideconfig node=childnode %}
        {% endfor %}
    </div>
</nav>


<ul class="kss-sizer"></ul>



<script>
    var menuState = false;

    function cradmin_kss_styleguide_toggle_menu() {
        var menu = document.querySelector('.kss-menu');
        var menuToggle = document.querySelector('.kss-header__menu-text');
        var burger = document.querySelector('.icon-hamburger');

        if (menuState) {
            menu.classList.remove('kss-menu--show');
            burger.classList.remove('icon-hamburger--close');
            menuToggle.innerHTML = 'Menu';
        } else {
            menu.classList.add('kss-menu--show');
            burger.classList.add('icon-hamburger--close');
            menuToggle.innerHTML = 'Close';
        }

        menuState = !menuState;
    }

    var kssIframeSizes = [
        { size: 320 },
        { size: 480 },
        { size: 600 },
        { size: 720 },
        { size: 840 },
        { size: 960 },
        { size: 1080 },
        { size: 1280, selected: true }
    ].reverse();

    function kssSetSelection(size) {
        kssIframeSizes.forEach(function(item) {
            if (item.size !== parseInt(size, 10)) {
                item.selected = false;
            } else {
                item.selected = true;
            }
        });
    }

    function kssSetSize(size) {
        if (event) {
            event.preventDefault();
        }

        localStorage.setItem('kssFrameSize', size);

        kssInitSizer();
    }

    function kssResizeAllIframes() {
        var iframes = document.querySelectorAll('iframe');

        iframes.forEach(function(iframe) {
            cradmin_kss_styleguide_autoresize_iframe(iframe);
        });
    }

    function kssUpdateIframes(size) {
        var previews = document.querySelectorAll('.kss-usage__preview-content');

        previews.forEach(function(item) {
            item.style.width = size + 'px';
        });

        kssResizeAllIframes();
    }

    function kssInitSizer() {
        var controls = document.querySelector('.kss-sizer');

        if (localStorage.getItem('kssFrameSize')) {
            kssSetSelection(localStorage.getItem('kssFrameSize'));
        }

        var sizers = kssIframeSizes.map(function(item, index) {
            var classes = 'kss-sizer__sizer';

            if (item.selected) {
                classes += '  kss-sizer__sizer--selected';

                if (window.innerWidth < item.size) {
                    kssSetSize(kssIframeSizes[index + 1].size);
                    return;
                }

                kssUpdateIframes(item.size);
            }

            if (window.innerWidth > item.size) {
                return  '<li class="kss-sizer__item">' +
                            '<a role="button" href="" class="' + classes + '" id="kss-sizer-' + item.size + '" onclick="kssSetSize(' + item.size + ')" style="width: ' + item.size + 'px;">' +
                                '<span>' + item.size + '</span>' +
                                '<span>' + item.size + '</span>' +
                            '</a>' +
                        '</li>';
            }
        });

        controls.innerHTML = sizers.join(' ');
    }

    window.addEventListener('resize', kssInitSizer);

    document.addEventListener('DOMContentLoaded', kssInitSizer);
</script>
