{{ block content }}

<link rel="stylesheet" href="/static/global/empty.css">

{{ if curcond not in ['mast', 'control'] }}
    
<p>
    Please think back to the video/audio you just watched/listened. 
    To what degree did you experience each of the following emotions while watching it? 
    Use the scale below, where <strong>1</strong> means <strong><em>Not at all</em></strong> and <strong>4</strong> means <strong><em>Very much</em></strong>.
</p>

<table class="table" style="width: 100%; border-collapse: collapse; margin-top: 1em;">
    <thead>
        <tr>
            <th></th>
            <th style="text-align: center;">Not at all<br>1</th>
            <th style="text-align: center;">A little bit<br>2</th>
            <th style="text-align: center;">Moderately<br>3</th>
            <th style="text-align: center;">Very much<br>4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><strong>Sad</strong></td>
            {{ for choice in form.sad }}
                <td style="text-align: center;">{{ choice }}</td>
            {{ endfor }}
        </tr>
        {{ formfield_errors 'sad' }}

        <tr>
            <td><strong>Surprise</strong></td>
            {{ for choice in form.surprise }}
                <td style="text-align: center;">{{ choice }}</td>
            {{ endfor }}
        </tr>
        {{ formfield_errors 'surprise' }}

        <tr>
            <td><strong>Calm</strong></td>
            {{ for choice in form.calm }}
                <td style="text-align: center;">{{ choice }}</td>
            {{ endfor }}
        </tr>
        {{ formfield_errors 'calm' }}
    </tbody>
</table>


{{ else }}

<p> Think back to the task you just completed. 
    Please rate the following from <strong><em>1 (Not at all) to 4 (Very much)</em></strong>based on what you experienced <strong>during the task</strong>:
        
</p>

<table class="table" style="width: 100%; border-collapse: collapse; margin-top: 1em;">
    <thead>
        <tr>
            <th></th>
            <th style="text-align: center;">Not at all<br>1</th>
            <th style="text-align: center;">A little bit<br>2</th>
            <th style="text-align: center;">Moderately<br>3</th>
            <th style="text-align: center;">Very much<br>4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><strong>stress level</strong></td>
            {{ for choice in form.stresslevel }}
                <td style="text-align: center;">{{ choice }}</td>
            {{ endfor }}
        </tr>
        {{ formfield_errors 'stresslevel' }}       
    </tbody>
</table>

{{ endif }}
{{ next_button }}
{{ endblock }}