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

{% block title %}
    {# Instructions - best to leave empty #}
{% endblock %}

{{ block content }}

    <!-- Tabs on top of page -->
    <ul class="nav nav-tabs fixed-top navbar-light bg-light justify-content-center" id="myTab" role="tablist">
        <li class="nav-item tab_header">
            <a class="nav-link active tab_element" id="part1-tab" data-toggle="tab" href="#part1" role="tab"
               aria-controls="part1"
               onclick="topFunction()">Allgemeine Informationen</a>
        </li>

        <li class="nav-item tab_header">
            <a class="nav-link tab_element" id="part2-tab" data-toggle="tab" href="#part2" role="tab"
               aria-controls="part2"
               onclick="topFunction()">Rollen</a>
        </li>
    </ul>

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

        <!-- Tab 1 content -->
        <div class="customInstructions tab-pane show active" id="part1" role="tabpanel" aria-labelledby="part1-tab">

 {{ include_sibling "tab_instructions1.html" }}

            <button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">Weiter</button>
        </div>


        <!-- Tab content 2 -->
        <div class="tab-pane" id="part2" role="tabpane2" aria-labelledby="part2-tab">

 {{ include_sibling "tab_instructions2.html" }}

            <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Zurück</button>
            <button onclick="submit()" class="nexttab btn-primary btn next">Weiter</button>
        </div>

    </div>

{% endblock %}


{% block scripts %}
    <script src="{% static 'global/instructions.js' %}"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            if (location.hash) {
                $("a[href='" + location.hash + "']").tab("show");
            }
            $(document.body).on("click", "a[data-toggle='tab']", function(event) {
                location.hash = this.getAttribute("href");
            });
        });
        $(window).on("popstate", function() {
            var anchor = location.hash || $("a[data-toggle='tab']").first().attr("href");
            $("a[href='" + anchor + "']").tab("show");
        });
    </script>
{{ endblock }}

{% block styles %}
<link rel="stylesheet" type="text/css" href="{% static 'global/instructions.css' %}">

<style>
orange {font-weight: bold; color:orange;}
blau {font-weight: bold; color: blue;}
</style>

<style>
/* Tooltip container */
.tooltip1 {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip1 .tooltiptext1 {
  visibility: hidden;
  width: 300px;
  background-color: grey;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip1 .tooltiptext1::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 20%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: grey transparent transparent transparent;
}

.tooltip1:hover .tooltiptext1 {
  visibility: visible;
}

.tooltip1 .tooltiptext2 {
  visibility: hidden;
  width: 260px;
  background-color: grey;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip1 .tooltiptext2::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 24%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: grey transparent transparent transparent;
}

.tooltip1:hover .tooltiptext2 {
  visibility: visible;
}
</style>
{% endblock %}