<div class="sidebar">
    <h3 class="brand"><a href="#">{{ document.title }}</a></h3>

    <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
    <div class="menu-list">
        <ul id="menu-content" class="menu-content collapse out">
            {% for section_key, section in document.data.items %}
            <li data-toggle="collapse" data-target="#{{ section_key }}-dropdown" class="collapsed">
                <a><i class="fa fa-dot-circle-o fa-lg"></i> {% if section_key %}{{ section_key }}{% else %}API Endpoints{% endif %} <span class="arrow"></span></a>
            </li>
            <ul class="sub-menu {% if section_key %}collapse{% endif %}" id="{{ section_key }}-dropdown">
                {% for link_key, link in section.links.items %}
                    <li><a href="#{{ section_key }}-{{ link_key }}">{{ link.title|default:link_key }}</a></li>
                {% endfor %}
            </ul>
            {% endfor %}
        </ul>

        <ul class="menu-list menu-list-bottom">
            <li data-toggle="collapse" data-target="#auth-control" class="collapsed">
                <a><i class="fa fa-user fa-lg"></i> Authentication</a> <span id="selected-authentication">{% if user.is_authenticated %}session{% else %}none{% endif %}</span>
            </li>
            <ul class="sub-menu collapse out" id="auth-control">
                <li data-auth="none" {% if not user.is_authenticated %}class="active"{% endif %}><a href="#" data-language="none">none</a></li>
                <li data-auth="token" data-toggle="modal" data-target="#auth_token_modal"><a href="#">token</a></li>
                <li data-auth="basic" data-toggle="modal" data-target="#auth_basic_modal"><a href="#">basic</a></li>
                <li data-auth="session"  data-toggle="modal" data-target="#auth_session_modal" {% if user.is_authenticated %}class="active"{% endif %}><a href="#">session</a></li>
            </ul>

            <li data-toggle="collapse" data-target="#language-control" class="collapsed">
                <a><i class="fa fa-code fa-lg"></i> Source Code</a> <span id="selected-language">shell</span>
            </li>
            <ul class="sub-menu collapse out" id="language-control">
                <li class="active"><a href="#" data-language="shell">shell</a></li>
                <li><a href="#" data-language="javascript">javascript</a></li>
                <li><a href="#" data-language="python">python</a></li>
            </ul>
        </ul>

    </div>
</div>
