<!DOCTYPE html>
<html lang="en">
<head>

    <!-- Google Tag Manager -->
    <script>(function (w, d, s, l, i) {
        w[l] = w[l] || [];
        w[l].push({
            'gtm.start':
                new Date().getTime(), event: 'gtm.js'
        });
        var f = d.getElementsByTagName(s)[0],
            j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
        j.async = true;
        j.src =
            'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
        f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', 'GTM-KT5XZVF');</script>
    <!-- End Google Tag Manager -->


    <link rel="icon" href="{{ url_for('static', filename='/images/favlogo.ico') }}" type="image/x-icon">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="{% block description %}{% endblock %}">
    <meta name="author" content="Илья Зеленчук, Зинаида Романова">

    <title>{% block title %}{% endblock %}</title>

    {% block og %}{% endblock %}

    <!-- Vendor Styles -->
    <link rel="stylesheet" media="screen" href="/assets/vendor/boxicons/css/boxicons.min.css"/>
    <link rel="stylesheet" media="screen" href="/assets/vendor/nouislider/dist/nouislider.min.css"/>


    <!-- Main Theme Styles + Bootstrap -->
    <link rel="stylesheet" media="screen" href="/assets/css/theme.min.css">
    <link rel="stylesheet" media="screen" href="/assets/css/style.css">

</head>

<body>
<!-- Google Tag Manager (noscript) -->
<noscript>
    <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KT5XZVF"
            height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->

{% if mimishark_nav is not defined %}
    <nav class="header navbar navbar-expand-lg position-absolute navbar-sticky">
        <div class="container">
            <a href="/" class="navbar-brand" style="min-width: 170px">
                <img src="{{ url_for('static', filename='/images/logo.png') }}" width="170" alt="Miminet">
            </a>

            {# Test name and section name #}
            <div class="align-items-baseline"
                 style="display: flex; flex-direction: row;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                <div class="col-auto mx-1">
                    <b class="mb-0" id="test_name"></b>
                </div>
                <div class="col-auto mx-1">
                    <b class="mb-0" id="slash_symbol"></b>
                </div>
                <div class="col-auto mx-1">
                    <p class="mb-0" style="font-weight: normal" id="section_name"></p>
                </div>
            </div>

            {% if current_user.is_authenticated %}
                <div class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('get_all_tests_endpoint') }}">Тренажер</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('examples') }}">Примеры сетей</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('home') }}">Мои сети</a>
                    </li>
                </div>
            {% else %}
                {% if request.path != url_for('login_index') %}
                    <div class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('login_index') }}">Тренажер</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('examples') }}">Примеры сетей</a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ url_for('login_index') }}" class="btn btn-outline-primary">
                                <i class="bx fs-5 lh-1 me-1"></i>Вход
                            </a>
                        </li>
                    </div>
                {% endif %}
            {% endif %}

        </div>
    </nav>

    <div class="modal" id="noJobsModal" tabindex="-1" role="dialog" aria-labelledby="noJobsModalLabel"
         aria-hidden="true" data-focus-on="input:first">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="noJobsModalLabel">Что делать?</h5>
                    <button id="noJobsModalCancelIcon" type="button" class="btn-close" data-dismiss="modal"
                            aria-label="Закрыть"></button>
                </div>

                <div class="modal-body">
                    <p>Зачем симулировать сеть, если она ничего не делает?!</p>
                    <p>Прочитайте задание и настройте сеть: добавьте устройства, сконфигурируйте IP адрес и маску у
                        хостов, в настройках хоста добавьте необходимую команду.</p>
                </div>
                <div class="modal-footer">
                    <button id="noJobsModalSubmit" type="button" class="btn btn-primary">Ок</button>
                </div>
            </div>
        </div>
    </div>

    <div id="alertContainer"></div>
{% endif %}

{% block content %}
{% endblock %}

</body>

<script src="{{ url_for('static', filename='/js/jquery-3.6.0.min.js') }}"></script>
<script src="{{ url_for('static', filename='/js/jquery-ui.min.js') }}"></script>
<script src="{{ url_for('static', filename='/js/cytoscape.min.js') }}"></script>
<script src="{{ url_for('static', filename='/js/ace.js') }}"></script>
<script src="{{ url_for('static', filename='/js/lodash.js') }}"></script>
<script src="{{ url_for('static', filename='/js/cytoscape-edgehandles.min.js') }}"></script>

<!-- Vendor Scripts -->
<script src="/assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/assets/vendor/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
<script src="/assets/vendor/parallax-js/dist/parallax.min.js"></script>
<script src="/assets/vendor/rellax/rellax.min.js"></script>
<script src="/assets/vendor/nouislider/dist/nouislider.min.js"></script>


<!-- Main Theme Script -->
<script src="/assets/js/theme.min.js"></script>
<script src="{{ url_for('static', filename='/icons.js') }}"></script>
<script src="{{ url_for('static', filename='/netfront_f.js') }}"></script>
<script src="{{ url_for('static', filename='/miminet_animation.js') }}"></script>

<script>
    $(document).ready(function () {
        $("#noJobsModalCancelIcon").click(function () {
            $('#noJobsModal').modal('hide');
        });

        $("#noJobsModalSubmit").click(function () {
            $('#noJobsModal').modal('hide');
        });

        let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
        let popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
            return new bootstrap.Popover(popoverTriggerEl)
        })

    });

    $(function () {
        $('[data-toggle="tooltip"]').tooltip({trigger: 'hover'});
    });

</script>

{% block network %}
{% endblock %}

<script src="{{ url_for('static', filename='netfront.js') }}"></script>
<script src="{{ url_for('static', filename='config.js') }}"></script>
<script src="{{ url_for('static', filename='config_vlan.js') }}"></script>
<script src="{{ url_for('static', filename='config_vxlan.js') }}"></script>

</html>