<!DOCTYPE html>
<html>
{% macro single_video(video_url, embed="yt", title="",width="560", height="315", class="center", code="<p>No code given
</p>") -%}
{% if (embed == "yt") %}

{% if (title != "") %}
<h3>{{title}}</h3>
{% endif %}
<div class="iframe-container">
    <iframe class="center" src="{{ video_url }}" title="YouTube video player" frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen></iframe>
</div>

{% elif (embed == "no") %}

<video controls>
    <source src="{{ url_for('static', filename='videos/' + video_url) }}" type="video/mp4">
</video>

{% else %}
{{code}}
{% endif %}
{%- endmacro %}

{% macro double_video(video_url1, video_url2, embed="yt", title="",width="560", height="315", class="center", code="<p>
    No code given
</p>") -%}
{% if (embed == "yt") %}

{% if (title != "") %}
<h3>{{title}}</h3>
{% endif %}
<div class="double_video_container">

    <div class="dv_half">
        <div class="iframe-container">
            <iframe class="center" src="{{ video_url1 }}" title="YouTube video player" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen></iframe>
        </div>
    </div>



    <div class="dv_half">
        <div class="iframe-container">
            <iframe class="center" src="{{ video_url2 }}" title="YouTube video player" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen></iframe>
        </div>
    </div>

</div>
{% elif (embed == "no") %}
<div class="double_video_container">
    <div class="dv_half">
        <div class="iframe-container">
            <video controls>
                <source src="{{ url_for('static', filename='videos/' + video_url1) }}" type="video/mp4">
            </video>
        </div>
    </div>
    <div class="dv_half">
        <div class="iframe-container">
            <video controls>
                <source src="{{ url_for('static', filename='videos/' + video_url2) }}" type="video/mp4">
            </video>
        </div>
    </div>
</div>
<div class="spacer" aria-hidden="true" style="height:30px"></div>
{% else %}
{{code}}
{% endif %}
{%- endmacro %}

{% macro required(question) -%}
{% if (question["required"] == "true") %}
required
{% endif %}
{%- endmacro %}

{% macro inputconfig(question) -%}
{% if ("min" in question) %}
min={{question["min"]}}
{% endif %}
{% if ("max" in question) %}
max={{question["max"]}}
{% endif %}
{% if ("step" in question) %}
step={{question["step"]}}
{% endif %}
{%- endmacro %}

{% macro input(name, value='', type='text', size=20) -%}
<input type="{{ type }}" name="{{ name }}" value="{{
        value|e }}" size="{{ size }}" class="inputs">
{%- endmacro %}

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css')}}" />
    <!--  styles.css  {{ url_for('static', filename='styles.css')}}-->
    <title>Testform</title>
    <link rel=" shortcut icon" href="{{ url_for('static', filename='icons/favicon.ico') }}">
    <script>const ICON_PATHS = {
            cameraofficon: "{{ url_for('static', filename='icons/camera-off-icon.png') }}",
            cameraicon: "{{ url_for('static', filename='icons/camera-icon.png') }}",
            stopicon: "{{ url_for('static', filename='icons/stop-icon.png') }}",
            recordicon: "{{ url_for('static', filename='icons/record-icon.png') }}"
        };</script>
</head>

<body>
    <div class="container">

        {% if (infovideo) %}
        <dialog>

            <button class="dialogBtn" autofocus><img class="infoButtonIcon" id="buttonClose"
                    src="{{ url_for('static', filename='icons/x-icon.png')}}" alt="Delete Icon"></button>
            <video controls>
                <source src="{{ url_for('static', filename=infovideo['videourl']) }}" type="video/mp4">
            </video>
            <div class="dialogTextContainer">
                {% if ("infotext" in infovideo) %}
                <p>{{ infovideo["infotext"] }}</p>
                {% endif %}
                {% if ("htmlblock" in infovideo) %}
                {% include infovideo["htmlblock"] %}
                {% endif %}
            </div>
        </dialog>
        <button class="dialogBtn"><img class="infoButtonIcon" id="buttonInfoIcon"
                src="{{ url_for('static', filename='icons/sl-icon.png')}}" alt="Info Icon"></button>
        <script src="{{ url_for('static', filename='infoDialogScript.js')}}"></script>
        {% endif %}


        {% if (stimulus_type == "single_video") %}
        {{ single_video(**stimulus_configuration) }}
        {% elif (stimulus_type == "double_video") %}
        {{ double_video(**stimulus_configuration) }}
        {% elif (stimulus_type == "empty") %}

        {% else %}
        <p>Error: Block {{ stimulus["type"] }} could not be loaded!</p>
        {% endif %}

        <form class="formlayout" id="question_form" action="{{ url_for('sendpage') }}" method="post">

            {% for question in questions %}
            {% if (questions[question]["type"] == "textblock") %}

            <div class="spacer" aria-hidden="true" style="height:30px"></div>

            <div class="questioncontainer">
            <h3 style="margin: auto;">{{ questions[question]['text']}}</h3>
            </div>
            <div class="spacer" aria-hidden="true" style="height:60px"></div>


            {% elif (questions[question]["type"] == "likert") %}
            <div class="likertcontainer">
                <div class="questioncontainer">
                <h3>{{ questions[question]['text']}}</h3>
                </div>
                <div class="likert" style="--likert-rows: {{ questions[question]['points']|length() }}">
                    {% for point in questions[question]["points"] %}
                    <label>
                        <input class="inputs" name="{{ questions[question]['name']}}" type="radio"
                            id="{{ questions[question]['name'] }}"
                            value="{{ questions[question]['points'][point]['value'] }}"
                            {{required(questions[question])}} /><span>{{ questions[question]['points'][point]['text']
                            }}</span>
                    </label>
                    {% endfor %}
                </div>
            </div>
            <div class="spacer" aria-hidden="true" style="height:60px"></div>

            {% elif (questions[question]["type"] == "likert-basic") %}

            <div class="questioncontainer">
            <h3>{{ questions[question]['text']}}</h3>
            </div>

            <div class="normal-likert-container">
                {% for point in questions[question]["points"] %}
                <label class="likertlabel">
                    <input class="likertinput" name="{{ questions[question]['name']}}" type="radio"
                        id="{{ questions[question]['name'] }}"
                        value="{{ questions[question]['points'][point]['value'] }}"
                        {{required(questions[question])}} /><span>{{ questions[question]['points'][point]['text']
                        }}
                    </span>
                </label>
                {% endfor %}
            </div>
            <div class="spacer" aria-hidden="true" style="height:60px"></div>

            {% elif (questions[question]["type"] == "textinput") %}
            <div class="textarea-container">
                <label class="textarea-label">
                    {{ questions[question]['text']}}
                    <textarea class="inputs" id="{{ questions[question]['name'] }}"
                        name="{{ questions[question]['name'] }}" rows="6" cols="60"
                        maxlength="{{ questions[question]['size'] }}" {{required(questions[question])}}></textarea>
                </label>
            </div>
            <div class="spacer" aria-hidden="true" style="height:30px"></div>

            {% elif (questions[question]["type"] == "dateinput") %}
            <div class="compressWidth">
                <label>
                    {{ questions[question]['text']}}<input class="inputs" type="date"
                        name="{{ questions[question]['name']}}" id="{{ questions[question]['name'] }}"
                        {{required(questions[question])}}>
                </label>
            </div>
            <div class="spacer" aria-hidden="true" style="height:30px"></div>

            {% elif (questions[question]["type"] == "numberinput") %}
            <div class="compressWidth">
                <label>
                    {{ questions[question]['text']}}<input class="inputs" type="number"
                        name="{{ questions[question]['name']}}" id="{{ questions[question]['name'] }}"
                        {{inputconfig(questions[question])}} {{required(questions[question])}}>
                </label>
            </div>
            <div class="spacer" aria-hidden="true" style="height:30px"></div>

            {% elif (questions[question]["type"] == "emailinput") %}
            <div class="compressWidth">
                <label>
                    {{ questions[question]['text']}}<input class="inputs" type="email"
                        name="{{ questions[question]['name']}}" id="{{ questions[question]['name'] }}"
                        {{required(questions[question])}}>
                </label>
            </div>
            <div class="spacer" aria-hidden="true" style="height:30px"></div>

            {% elif (questions[question]["type"] == "dropdowninput") %}
            <div class="compressWidth">
                <label>
                    {{ questions[question]['text']}}<select class="inputs" name="{{ questions[question]['name']}}"
                        {{required(questions[question])}}>
                        <option value="" disabled selected>{{ questions[question]['defaulttext']}}</option>
                        {% for point in questions[question]["points"] %}
                        <option name="{{ point }}" id="{{ point }}"
                            value="{{ questions[question]['points'][point]['value'] }}"
                            {{required(questions[question])}}><span>{{ questions[question]['points'][point]['text']
                                }}</span></option>

                        {% endfor %}
                    </select>
                </label>
            </div>
            <div class="spacer" aria-hidden="true" style="height:30px"></div>

            {% elif (questions[question]["type"] == "multiplechoice") %}
            <div class="compressWidth">
                <p>
                    <div>
                    {{ questions[question]['text']}}

                    {% for point in questions[question]["points"] %}
                    <label for="{{ point }}">
                        <input type="checkbox" id="{{ point }}" name="{{ questions[question]['name'] }}"
                            value="{{ questions[question]['points'][point]['value'] }}">
                        {{ questions[question]['points'][point]['text']}}</label>

                    {% endfor %}
                </div>
            </p>
            </div>
            <div class="spacer" aria-hidden="true" style="height:30px"></div>

            {% elif (questions[question]["type"] == "videoinput") %}
            <div class="spacer" aria-hidden="true" style="height:30px"></div>
            <h3 style="text-align: center;">{{ questions[question]['text']}}</h3>

            <div class="centertext">
                <button type="button" class="videocontrols" id="buttonCamera" onclick="cameraButton()">
                    <img id="buttonCameraIcon" src="{{ url_for('static', filename='icons/camera-icon.png')}}"
                        alt="Camera Icon">
                </button>


                <div class="spacer" aria-hidden="true" style="height:30px"></div>


                <button type="button" class="videocontrols" id="buttonRecord" style="display:none"
                    onclick="recordButton()">
                    <img id="buttonRecordIcon" src="{{ url_for('static', filename='icons/record-icon.png')}}"
                        alt="Camera Icon">
                </button>

                <button type="button" class="videocontrols" id="buttonDelete" style="display:none" disabled
                    onclick="deleteButton()">
                    <img id="buttonDeleteIcon" src="{{ url_for('static', filename='icons/trash-icon.png')}}"
                        alt="Delete Icon" class="buttondisable">
                </button>
            </div>

            <div class="spacer" aria-hidden="true" style="height:15px"></div>
            <div id="videoContainer" style="display:none" class="video-container">
                <video autoplay muted playsinline id="videoDisplay"></video>
            </div>

            <p id="countdown" style="font-size: 40px; text-align: center;"></p>

            <script src="{{ url_for('static', filename='videoscript.js')}}">
            </script>
            {% else %}
            <p>Error: Block {{config["question 1"]["blocks"][block]["type"]}} could not be loaded!</p>
            {% endif %}
            {% endfor %}
            <div class="spacer" aria-hidden="true" style="height:30px"></div>
            <div class="button-container">

            {% if ("lastquestion" in stimlui) %}
            <button id="submitbutton" type="submit">Studie Beenden</button>
            <!-- TODO maybe I want to use this instead: <button id="submitbutton" type="submit">Submit</button> /// <input class="inputs" id="submitbutton" type="submit" value="submit" />-->
            {% else %}
            <button id="submitbutton" type="submit">Weiter</button>
            <!-- TODO maybe I want to use this instead: <button id="submitbutton" type="submit">Submit</button> /// <input class="inputs" id="submitbutton" type="submit" value="submit" />-->
            {% endif %}

            </div>
        </form>
        <div class="spacer" aria-hidden="true" style="height:80px"></div>
    </div>
</body>
<footer>
    <div class="container" style="font-size: 19px;">
    <a href="{{ url_for('startpage') }}" target="_blank">Startseite</a>
    <a href="{{ url_for('impressum') }}" target="_blank">Impressum</a>
    <a href="{{ url_for('datenschutz') }}" target="_blank">Datenschutz</a>
    </div>
</footer> 

</html>