{% extends "global/Page.html" %}
{% load otree static %}
{% load otree  i18n %}

{# Credits to https://www.otreehub.com/projects/back-button/ for the tabs #}

{% block title %}

{% endblock %}

{% block scripts %}

    <script>
        if (document.getElementsByClassName("otree-form-errors")[0]) {
            $("#part1-tab").removeClass("active");
            $("#part1").removeClass("show active");
            $("#part2-tab").addClass("active");
            $("#part2").addClass("show active");
        } else {
            $("#part1-tab").addClass("active");
            $("#part1").addClass("show active");
            $("#part2-tab").removeClass("active");
            $("#part2").removeClass("show active");
        }
        setTimeout(
            function () {
                alert("{{ timer_message }}");
            },
            parseInt("{{ soft_timer }}")
        );
    </script>

    <script src="{% static 'back_button_v1/js/prev_next_button.js' %}"></script>

{% endblock %}

{% block styles %}
    <link href="{% static 'back_button_v1/css/custom.css' %}" rel="stylesheet">
    <link href="{% static 'consent.css' %}" rel="stylesheet">
{% endblock %}

{% block content %}

    <ul class="nav nav-tabs fixed-top navbar-light bg-light justify-content-center" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="part1-tab" data-bs-toggle="tab" href="#part1" role="tab" aria-controls="part1"
               onclick="topFunction()">{% trans 'Introduction' %}</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" id="part2-tab" data-bs-toggle="tab" href="#part2" role="tab" aria-controls="part2"
               onclick="topFunction()">{% trans 'Procedure' %}</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" id="part3-tab" data-bs-toggle="tab" href="#part3" role="tab" aria-controls="part3"
               onclick="topFunction()">{% trans 'Example' %}</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" id="part4-tab" data-bs-toggle="tab" href="#part4" role="tab" aria-controls="part4"
               onclick="topFunction()">{% trans 'Practice Questions' %}</a>
        </li>
    </ul>

    <!-- Tab content -->
    <div class="tab-content" id="myTabContent">

        <div class="tab-pane show active" id="part1" role="tabpanel" aria-labelledby="part1-tab">

            <div class="tabbed_page_title">
                <h3>{% trans 'Introduction' %}</h3>
            </div>
            <br>
            {% include Constants.Intro_template %}

            <button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">{% trans 'Next' %}</button>
        </div>


        <div class="tab-pane" id="part2" role="tabpanel" aria-labelledby="part2-tab">

            <div class="tabbed_page_title">
                <h3>{% trans 'Procedure' %}</h3>
            </div>
            <br>

            {% include Constants.Procedure_template %}

            <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">{% trans 'Back' %}</button>
            <button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">{% trans 'Next' %}</button>
        </div>


        <div class="tab-pane" id="part3" role="tabpanel" aria-labelledby="part3-tab">


            <div class="tabbed_page_title">
                <h3>{% trans 'Example' %}</h3>
            </div>
            <br>

            {% include Constants.Example_template %}

            <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">{% trans 'Back' %}</button>
            <button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">{% trans 'Next' %}</button>
        </div>

        <div class="tab-pane" id="part4" role="tabpanel" aria-labelledby="part4-tab">

            <div class="tabbed_page_title">
                <h3>{% trans 'Practice Questions' %}</h3>
            </div>
            <br>

            {% include Constants.Control_template %}

            <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">{% trans 'Back' %}</button>
            <button class="nexttab btn-primary btn next">{% trans 'Next' %}</button>
        </div>
    </div>

    </body>
{% endblock %}