<!DOCTYPE html>
<html>

<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='favicon.ico') }}">
</head>

<body>
    <h2>Question: {{ current_question }}</h2>   
    {% if (videotype == "single")%} <!-- first figure out what video type we have -->
    <div class="center">
        <h3>Video 1</h3>
        <iframe width="560" height="315" 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 (videotype == "pairwise")%}
    <div class="columncontainer">
        <div class="columnleft center">
            <h3>Video 1</h3>
            <iframe width="560" height="315" class="center" src="{{ video_url_left }}" title="YouTube video player"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen></iframe>
        </div>
        <div class="columnright">
            <h3>Video 2</h3>
            <iframe width="560" height="315" src="{{ video_url_right }}" title="YouTube video player" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen></iframe>
        </div>
    </div>

    {% else %}
    <p>Error: No Videotype could be matched or was given!</p>
    {% endif %}
    <form action="http://localhost:5000/send" method="post">
    {% for block in config["question 1"]["blocks"] %}
    {% if (config["question 1"]["blocks"][block]["type"] == "likert") %}
    <div class="likercontainer">
        <div class="likert">
            <label><input name="likertscale" type="radio" value="1" /><span>I dont like it at all</span></label>
            <label><input name="likertscale" type="radio" value="2" /><span>I dont like it</span></label>
            <label><input name="likertscale" type="radio" value="3" /><span>I am indifferent</span></label>
            <label><input name="likertscale" type="radio" value="4" /><span>I like it</span></label>
            <label><input name="likertscale" type="radio" value="5" /><span>I like it a lot</span></label>
        </div>
    </div>
    {% elif (config["question 1"]["blocks"][block]["type"] == "textinput") %}
    <label for="feedback">Additional Feedback: </label>
        <textarea id="feedback" name="feedback" rows="3" cols="30" maxlength="200"></textarea>
    {% else %}
    <p>Error: A block could not be loaded!</p>
    {% endif %}
    {% endfor %}
    <p><input id="submitbutton" type = "submit" value = "submit";/></p>
    </form>
    </body>

</html>