<!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='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">

        <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/1017028141?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="0020-simple"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

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


            <div class="likertcontainer">
                <div class="likert" style="--likert-rows: 7">

                    <label>
                        <input class="inputs" name="test1" type="radio" id="test1" value="1" required /><span> Option 1
                        </span>
                    </label>
                    <label>
                        <input class="inputs" name="test1" type="radio" id="test1" value="1" required /><span> Option 2
                        </span>
                    </label>
                    <label>
                        <input class="inputs" name="test1" type="radio" id="test1" value="1" required /><span> Option 3
                        </span>
                    </label>
                    <label>
                        <input class="inputs" name="test1" type="radio" id="test1" value="1" required /><span> Option 4
                        </span>
                    </label>
                    <label>
                        <input class="inputs" name="test1" type="radio" id="test1" value="1" required /><span> Option 5
                        </span>
                    </label>
                    <label>
                        <input class="inputs" name="test1" type="radio" id="test1" value="1" required /><span> Option 6
                        </span>
                    </label>
                    <label>
                        <input class="inputs" name="test1" type="radio" id="test1" value="1" required /><span> Option 7
                        </span>
                    </label>
                </div>
            </div>



            <div class="normal-likert-container" style="--likert-rows: 7">

                <label class="likertlabel">
                    <input class="likertinput" name="test1" type="radio" id="test1" value="1" required /><span> Option 1
                    </span>
                </label>
                <label class="likertlabel">
                    <input class="likertinput" name="test1" type="radio" id="test1" value="1" required /><span> Option 2
                    </span>
                </label>
                <label class="likertlabel">
                    <input class="likertinput" name="test1" type="radio" id="test1" value="1" required /><span> Option 3
                    </span>
                </label>
                <label class="likertlabel">
                    <input class="likertinput" name="test1" type="radio" id="test1" value="1" required /><span> Option 4
                    </span>
                </label>
                <label class="likertlabel">
                    <input class="likertinput" name="test1" type="radio" id="test1" value="1" required /><span> Option 5
                    </span>
                </label>
                <label class="likertlabel">
                    <input class="likertinput" name="test1" type="radio" id="test1" value="1" required /><span> Option 6
                    </span>
                </label>
                <label class="likertlabel">
                    <input class="likertinput" name="test1" type="radio" id="test1" value="1" required /><span> Option 7
                    </span>
                </label>
            </div>







            <div class="textarea-container">
                <label class="textarea-label">
                    <textarea class="inputs" id="text" name="text" rows="6" cols="60" maxlength="200"></textarea>
                </label>
            </div>




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


            <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>

            <script src="{{ url_for('static', filename='videoscript.js')}}">
            </script>




            <div class="button-container">
                <input class="inputs" id="submitbutton" type="submit" value="submit" />
                <!-- TODO maybe I want to use this instead: <button id="submitbutton" type="submit">Submit</button> -->
            </div>
        </form>
    </div>
</body>

</html>