<!DOCTYPE html>
<html lang="de">
    <head>
        <%- include('partials/head') -%>
        <title>FWmonitor - APP</title>
    </head>

    <body>
        <%- include('partials/header') -%>

        <div class="navbar">
            <button class="material-icons" onclick="goBack();">chevron_left</button>

            <h1>Men체</h1>
        </div>

        <div class="content">
            <div class="flex_column">
                <!-- LINKS -->
                <div class="list">
                    <div class="item" onclick="loaderIn('map');">
                        <span class="left material-icons">map</span>
                        <span class="text">Hydrantenkarte</span>
                        <span class="right material-icons">chevron_right</span>
                    </div>
                    <div class="item" onclick="loaderIn('picture_upload');">
                        <span class="left material-icons">image</span>
                        <span class="text">Bild f체r Diashow senden</span>
                        <span class="right material-icons">chevron_right</span>
                    </div>

                    <div class="item only_contacts hidden" onclick="loaderIn('contacts');">
                        <span class="left material-icons">phone</span>
                        <span class="text">Kontakte</span>
                        <span class="right material-icons">chevron_right</span>
                    </div>

                    <% if (fwvv == true) { %>
                    <div class="item only_admin hidden" onclick="loaderIn('einsatzzeit');">
                        <span class="left material-icons">schedule</span>
                        <span class="text">Einsatzzeiten</span>
                        <span class="right material-icons">chevron_right</span>
                    </div>
                    <% } %>

                    <div class="padding_none only_admin hidden">
                        <div class="item only_praes hidden" onclick="loaderIn('praesentation');">
                            <span class="left material-icons">present_to_all</span>
                            <span class="text">Pr채sentation</span>
                            <span class="right material-icons">chevron_right</span>
                        </div>
                    </div>
                </div>

                <div class="list">
                    <div class="item" onclick="loaderIn('settings_app');">
                        <span class="left material-icons">manage_accounts</span>
                        <span class="text">Einstellungen</span>
                        <span class="right material-icons">chevron_right</span>
                    </div>

                    <div class="item only_admin hidden" onclick="loaderIn('picture_edit');">
                        <span class="left material-icons">photo_library</span>
                        <span class="text">Diashowbilder</span>
                        <span class="right material-icons">chevron_right</span>
                    </div>

                    <div class="item only_admin hidden" onclick="loaderIn('alarm_settings');">
                        <span class="left material-icons">edit_notifications</span>
                        <span class="text">Software - Alarmierung</span>
                        <span class="right material-icons">chevron_right</span>
                    </div>

                    <div class="item only_admin hidden" onclick="loaderIn('user_list');">
                        <span class="left material-icons">manage_accounts</span>
                        <span class="text">Software - Alle Benutzer</span>
                        <span class="right material-icons">chevron_right</span>
                    </div>

                    <div class="item only_admin hidden" onclick="loaderIn('car_list');">
                        <span class="left material-icons">local_shipping</span>
                        <span class="text">Software - Autos</span>
                        <span class="right material-icons">chevron_right</span>
                    </div>
                </div>

                <div class="list only_admin hidden">
                    <div class="item" onclick="loaderIn('calendar_groups');">
                        <span class="left material-icons">perm_contact_calendar</span>
                        <span class="text">Kalendergruppen</span>
                        <span class="right material-icons">chevron_right</span>
                    </div>

                    <div class="item" onclick="loaderIn('alarm_groups');">
                        <span class="left material-icons">group</span>
                        <span class="text">Alarmgruppen</span>
                        <span class="right material-icons">chevron_right</span>
                    </div>
                </div>

                <div class="list only_admin hidden">
                    <div class="item" onclick="loaderIn('device_list');">
                        <span class="left material-icons">devices</span>
                        <span class="text">Verbundene Ger채te</span>
                        <span class="right material-icons">chevron_right</span>
                    </div>
                </div>

                <div class="flex_grow"></div>

                <!-- LOGOUT -->
                <div class="list">
                    <div class="item" onclick="logout()">
                        <span class="left material-icons">logout</span>
                        <span class="text">Abmelden</span>
                    </div>
                </div>

                <div class="flex_row" style="margin-top: 0.4em; padding: 0 0.2em 0 0.2em">
                    <span>2021 FWmonitor&nbsp;</span>
                    <div class="flex_grow"></div>
                    <span>Version&nbsp;</span>
                    <span><%= version %></span>
                </div>
            </div>
        </div>

        <%- include('partials/foot') -%>

        <script>

            // Funktionsaufrufe
            loaderFunction = () => {
                if(user_admin) {
                    const secure_options   = document.querySelectorAll('.only_admin');

                    for(let i = 0; i < secure_options.length; i++) {
                        const element = secure_options[i];
                        element.classList.remove('hidden');
                    }
                }

                if(user_telefone && <%= fwvv %>) {
                    const secure_options   = document.querySelectorAll('.only_contacts');

                    for(let i = 0; i < secure_options.length; i++) {
                        const element = secure_options[i];
                        element.classList.remove('hidden');
                    }
                }

                if(user_praes) {
                    const secure_options   = document.querySelectorAll('.only_praes');

                    for(let i = 0; i < secure_options.length; i++) {
                        const element = secure_options[i];
                        element.classList.remove('hidden');
                    }
                }
            };
        </script>
    </body>
</html>
