<!DOCTYPE html>
<html lang="de">

<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>Task number 1</h2>
    <div class="columncontainer">

        <div class="columnleft center">
            <h3>Video 1</h3>
            <iframe width="560" height="315" class="center"
                src="https://www.youtube-nocookie.com/embed/VtnwHmabyzo?si=H3rrG-GHtlSymR70"
                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="https://www.youtube-nocookie.com/embed/PdvSPBdX2T0?si=8R2ZAMnPuoe50X-7"
                title="YouTube video player" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen></iframe>
        </div>
    </div>
    <form action = "http://localhost:5000/" method = "post">
        <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>
        <label for="feedback">Additional Feedback: </label>
            <textarea id="feedback" name="feedback" rows="3" cols="30" maxlength="200"></textarea>
        
        <p><input id="submitbutton" type = "submit" value = "submit";/></p>
    </form>
</body>

</html>