<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>

<section class="container" style="display: flex;flex-direction: row; margin-top: 48px; padding-top: 48px">
    <div class="row align-items-baseline"
         style=" flex: 1; display: flex;flex-direction: column;justify-content: space-evenly;">

        {# Timer, questions counter #}
        <div class="row align-items-baseline"
             style="margin: 8px 0 0 0; font-size: 24px; opacity: 85%; display: flex;">
            <div class="col-auto">
                <p id="counter"></p>
            </div>
            <div class="col-auto text-center">
                <span id="timer">00:00:00</span>
            </div>
        </div>
    </div>

    {# finishQuiz button #}
    <div class="col-auto ms-auto"
         style="flex: 1;display: flex;justify-content: flex-end;align-items: flex-end;margin: 8px 0 8px 0; font-size: 24px; opacity: 85%">
        <button name="finishQuiz" aria-label="Завершить тест" class="btn btn-outline-danger btn-icon me-5"
                data-toggle="tooltip" data-bs-placement="right" title="Завершить тест">
            <i class="bx bx-x fs-4 mx-1"></i>
        </button>
    </div>
</section>

{# Task text #}
<div style="flex: 2;display: flex;justify-content: center;align-items: flex-end;">
    <div class="practice-question-text">
        <div class="text-black m-0" id="question_text"
             style="font-size: 20px">{{ question.question_text }}</div>
    </div>
</div>

<main>
    <section class="pb-5 mb-5">
        <div class="container pb-3 h-100">
            <div class="row flex-nowrap" id="practice_network">
                <div id="side_menu" class="col-auto col-lg-2 col-md-3 col-xl-2 px-sm-2 px-0 bg-white"
                     style="height: 80vh;">
                    <h5 class="pb-2 ps-2 ">Устройства</h5>
                    <div class="row">
                        <div class="col-sm-6 mb-3 text-center">
                            <img class="drag" id="l2_switch"
                                 src="{{ url_for('static', filename='/images/l2_switch.png') }}" alt="Switch"/>
                            <div class="icon-text">
                                        <span data-bs-toggle="popover" data-bs-trigger="hover"
                                              data-bs-content="Свитч (коммутатор) работает на втором уровне модели OSI.">Свитч (L2)</span>
                            </div>
                            <div id="l2_switch_counter"></div>
                        </div>
                        <div class="col-sm-6 mb-3 text-center">
                            <img class="drag" id="host"
                                 src="{{ url_for('static', filename='/images/host.png') }}" alt="Host"/>
                            <div class="icon-text pt-2">
                                        <span data-bs-toggle="popover" data-bs-trigger="hover"
                                              data-bs-content="Хост - конечное сетевое устройство.">Хост</span>
                            </div>
                            <div id="host_counter"></div>
                        </div>
                        <div class="col-sm-6 mb-3 text-center ">
                            <img class="drag" id="l1_hub"
                                 src="{{ url_for('static', filename='/images/hub.png') }}" alt="Hub"/>
                            <div class="icon-text">
                                        <span data-bs-toggle="popover" data-bs-trigger="hover"
                                              data-bs-content="Хаб (концентратор) &mdash; простейшее сетевое устойство.">Хаб (L1)</span>
                            </div>
                            <div id="l1_hub_counter"></div>
                        </div>
                        <div class="col-sm-6 mb-3 text-center">
                            <img class="drag" id="l3_router"
                                 src="{{ url_for('static', filename='/images/l3_router.png') }}" alt="Router"/>
                            <div class="icon-text">
                                        <span data-bs-toggle="popover" data-bs-trigger="hover"
                                              data-bs-content="Маршрутизатор (роутер, раутер) &mdash; работает на 3-м уровне модели OSI, позволяет объединять различные сети.">Роутер (L3)</span>
                            </div>
                            <div id="l3_router_counter"></div>
                        </div>
                        <div class="col-sm-6 mb-3 text-center">
                            <img class="drag" id="server"
                                 src="{{ url_for('static', filename='/images/server.png') }}" alt="Server"/>
                            <div class="icon-text">
                                        <span data-bs-toggle="popover" data-bs-trigger="hover"
                                              data-bs-content="Сервер &mdash; обслуживает клиентские запросы.">Сервер</span>
                            </div>
                            <div id="server_counter"></div>
                        </div>

                        <hr class="mb-4">

                        <div class="col-12 text-center" id="NetworkPlayerDiv">
                            <div class="d-flex justify-content-center" id="NetworkPlayer">
                                <button type="button" class="btn btn-primary w-100" id="NetworkRunButton"
                                        disabled>
                                    Проверка эмуляции
                                </button>
                            </div>
                            <div class="pb-4" id="PacketSlider">
                                <div class="range-slider pt-3" data-start-min="0" data-min="0" data-max="100"
                                     data-step="1">
                                    <div class="range-slider-ui mt-0 mb-2" id="PacketSliderInput"
                                         style="display: none"></div>
                                    <input class="form-control range-slider-value-min" type="hidden">
                                </div>
                                <small id="NetworkPlayerLabel" class="text-muted text-center">Ожидание 10-30
                                    сек.</small>
                            </div>
                        </div>


                        {# Control buttons #}
                        <div class="card-body d-flex justify-content-center" style="padding: 0 12px 0 12px">
                            <button name="answerQuestion" class="btn btn-primary">Ответить</button>
                            <button name="nextQuestion" class="btn w-100 px-0"
                                    style="word-wrap: break-word;white-space: initial;" hidden></button>
                            <button name="seeResults" class="btn w-100 px-0"
                                    style="word-wrap: break-word;white-space: initial;" hidden></button>
                        </div>

                        {# Explanation #}
                        <div class="card-body d-flex">
                            <div class="container" id="explanation"
                                 style="margin: 24px 8px 24px 0; display: flex"
                                 hidden></div>
                        </div>
                    </div>
                </div>

                <div class="col py-1 px-1 bg-light">
                    <div id="network_scheme" class="border bg-white border-primary h-100 w-100"></div>
                </div>

                <div id="config_content" class="col-auto col-lg-2 col-md-3 col-xl-2 px-sm-2 px-0 pt-2 bg-white">
                    <p class="fs-5">Тут будут настройки устройств.</p>
                    <p class="fs-5">Выделите любое на схеме.</p>
                </div>
            </div>
        </div>
    </section>
</main>

<div id="config_host"></div>
<div id="config_hub"></div>
<div id="config_switch"></div>
<div id="config_edge"></div>
<div id="config_router"></div>
<div id="config_server"></div>

<script>
    const practiceQuestion = JSON.parse('{{ question.practice_question | replace("'", '"') | safe }}')
    console.log(practiceQuestion)
    console.log(JSON.parse(practiceQuestion["start_configuration"]))
</script>
<script src="/quiz/practice_question_scripts.js"></script>
<script src="/quiz/drop_node.js"></script>
