{% extends "base.j2" %}

{% block content %}
<div class="container py-4">
    <div style="float: right">
        <select name="lang" id="lang">
            {% for lang in lang_enum %}
                <option value="{{ lang.value }}"{% if lang_selected == lang %} selected="selected"{% endif %}>{{ lang.name() }}</option>
            {% endfor %}
        </select>
    </div>
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active" aria-current="page">{{ "main"|lang }}</li>
        </ol>
    </nav>

<!--    {% if auth_user %}-->
<!--    <div class="mb-4 alert alert-secondary">-->
<!--        Вы авторизованы как <b>{{ auth_user.username }}</b>. <a href="/deauth/">Выйти</a>-->
<!--    </div>-->
<!--    {% endif %}-->

    <h6>{{ "internet"|lang }}</h6>
    <ul class="list-group list-group-flush">
        <li class="list-group-item"><a href="modems.cgi">{{ "modems"|lang }}</a></li>
        <li class="list-group-item"><a href="routing_main.cgi">{{ "routing"|lang }}</a></li>
        <li class="list-group-item"><a href="sms.cgi">{{ "sms"|lang }}</a></li>
    </ul>

    <h6 class="mt-4">{{ "misc"|lang }}</h6>
    <ul class="list-group list-group-flush">
        <li class="list-group-item"><a href="inverter.cgi">{{ "inverter"|lang }}</a> (<a href="{{ inverter_grafana_url }}">Grafana</a>)</li>
{#        <li class="list-group-item"><a href="pump.cgi">{{ "pump"|lang }}</a></li>#}
{#        <li class="list-group-item"><a href="sensors.cgi">{{ "sensors"|lang }}</a> (<a href="{{ sensors_grafana_url }}">Grafana</a>)</li>#}
    </ul>

    <nav class="mt-4">
        <div class="nav nav-tabs" id="nav-tab">
            {% for tab in tabs %}
                <button class="nav-link{% if tab == tab_selected %} active{% endif %}" type="button" id="cam_{{ tab }}_btn" data-id="{{ tab }}">{{ ("cams_by_"~tab)|lang }}</button>
            {% endfor %}
        </div>
    </nav>

    <div class="camzones" id="cam_zones"{% if tab_selected != 'zones' %} style="display: none"{% endif %}>
        {% for zone in camzones %}
            <a href="cams.cgi?zone={{ zone }}" class="camzone">
                <div class="camzone_text">{{ zone|lang('ipcam_zones') }}</div>
            </a>
        {% endfor %}
    </div>

    <div class="list-group cams_list_group" id="cam_list"{% if tab_selected != 'list' %} style="display: none"{% endif %}>
        {% for id in allcams %}
        <a href="cams.cgi?id={{ id }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
            {{ id|lang('ipcam') }}
            <span class="icon-right">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M6.776 1.553a.5.5 0 0 1 .671.223l3 6a.5.5 0 0 1 0 .448l-3 6a.5.5 0 1 1-.894-.448L9.44 8 6.553 2.224a.5.5 0 0 1 .223-.671"/>
                </svg>
            </span> <!-- Bootstrap Icon -->
        </a>
        {% endfor %}
    </div>

</div>
{% endblock %}

{% block js %}
indexInit();
{% endblock %}
