{% set installed = installed_software() %}

{% macro nav_link(endpoint,url, name) %}
    {% set current_route = request.endpoint %}
    {% if current_route.startswith(endpoint): %}
        <li class="nav-item active"><a href="{{ url }}">{{name}}</a></li>
    {% else: %}
        <li class="nav-item"><a href="{{ url }}">{{name}}</a></li>
    {% endif %}
{% endmacro %}

<div>
    <div id="menuWrapper" text-align="left">
        <div>
            <nav class="primary-navigation">
                <ul>
                    {{ nav_link('startPage',"/",'Start') }}
                    {{ nav_link('search.',"/meter_search_and_overview",'Startup Config') }}
                    {{ nav_link('administration','/administration','Administration') }}
                    {{ nav_link('mbushub','/mbushub_portconf?SLNR=0','MBusHub') }}
                    <li class="dropdown">
                        <button class="dropbtn" onclick="foldOut()" title="softwaresInstalled">Installed
                            Software</button>
                        <ul id="myDropdown" class="dropdown-content" style="padding-inline-start: .5em; padding-block: .1em;">
                                {% for program in installed %}
                                    {% if program.name != 'mbushub': %}
                                        {{ nav_link(program.endpoint,program.link_url,program.pretty_name) }}
                                    {% endif %}
                                {% endfor %}
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a target="_blank" title="PiiGAB Online" href="http://www.piigab.com">PiiGAB Online</a>
                    </li>
                </ul>
            </nav>
            <div class="menu-status">

                <div class="unit-status" id="unit-status">
                    <!--Auto update status -->
                    <div>
                        <fieldset>
                            <legend class="bold">Auto update status</legend>
                            <small>Asks gateway status continually if turned on.</small>
                            <div class="flex justify-content-center">
                                <div>
                                    <input type="radio" name="status-radio" id="status-auto-update-on" value="on" onchange="onAutoUpdateChanged();">
                                    <label for="status-auto-update-on">On</label>
                                </div>
                                <div>
                                    <input type="radio" name="status-radio" id="status-auto-update-off" checked value="off" onchange="onAutoUpdateChanged();">
                                    <label for="status-auto-update-off">Off</label>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                    <section class="flow">
                        <!--Loop status -->
                        <div id="unitSubDiv" class="unit-status-text">
                            <div class="grid" style="gap:1rem;">
                                <p id="unit-header" class="unit-header">MBus loop status</p>
                                <p id="unit-status-error"></p>
                                <p id="unit-status-current">0.0 mA </p>
                                <p id="unit-status-percentage">0% of mbus loop</p>
                                <p id="unit-status-voltage">0 V</p>
                            </div>
                        </div>
                        <!--Search status -->
                        <div class="" id="search-status">
                            <div class="unit-status-text flow">
                                <p class="bold" id="search-status-text">No Search active</p>
                                <div id="statusSubDiv" style="overflow: hidden; overflow-y: scroll;">
                                    <ul id="status-search-list" class="unit-status-text"></ul>
                                </div>
                            </div>
                        </div>
                    </section>
                    
                </div>
            </div>
        </div>
    </div>
</div>