{% extends "global/Page.html" %}
{% load staticfiles otree_tags %}

{# ****************************************************************************************************************** #}
{# *** STYLES *** #}
{# ****************************************************************************************************************** #}
{% block styles %}
    <link href="{% static 'global/custom.css' %}" rel="stylesheet">
{% endblock %}

{# ****************************************************************************************************************** #}
{# *** TITLE *** #}
{# ****************************************************************************************************************** #}
{% block title %}
    Willkommen
{% endblock %}


{# ****************************************************************************************************************** #}
{# *** CONTENT *** #}
{# ****************************************************************************************************************** #}
{% block content %}

    <div class="wrapper">

        <div class="instructions">
            <p>
                <b>Liebe Schülerin, lieber Schüler!</b>
            </p>
            <p>
                Vielen Dank für deine Teilnahme. Der folgende Fragebogen besteht aus einer Reihe von
                Entscheidungsspielen und Fragen zu unterschiedlichen Themen. Bitte lies die jeweiligen Erklärungen und
                Fragestellungen aufmerksam durch und fülle den ganzen Fragebogen ehrlich und ohne Hilfe von anderen aus.
                Verwende bitte auch nicht das Internet, um Antworten zu finden.
                Der Fragebogen ist selbstverständlich anonym.
            </p>
            <p>
                Bevor du mit dem Fragebogen startest, teile uns bitte noch mit, in welche Klasse du gehst und welche Schule
                du besuchst.
            </p>
            <p>
                <div class="input-group mb-3" style="width: 10em; margin-top: 10px">
                    <div class="input-group">
                        <span class="input-group-text" id="inputGroup-sizing-default ">Klasse</span>
                        <input type="text" class="form-control" name="class_identifier" placeholder="2BK" required>
                    </div>
                </div>
            </p>
            <p>
                <div class="input-group mb-3" style="width: 15em; margin-top: 10px">
                    <div class="input-group">
                        <span class="input-group-text" id="inputGroup-sizing-default ">Schule</span>
                        <input type="text" class="form-control" name="school_identifier" placeholder="HAK Innsbruck" required>
                    </div>
                </div>
            </p>
        </div>

        <div style="text-align: center">
        <button class="otree-btn-next btn btn-primary">Weiter</button>
        </div>

        <img src="{% static 'global/UIBK.png' %}" alt="UIBK" class="center" style="width:50%;height:30%;
 display: block; margin-left: auto;margin-right: auto;">

    </div>

{% endblock %}