{% extends "global/Page.html" %}
{% load otree %}

{% block content %}

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

<div class="card bg-light m-3">
    <div class="card-body">

        {% if curcond == 'baseline1' or curcond == 'baseline2' %}

            <h3><strong>{{ vidtype }} Video</strong></h3>

            <p>
                Now you will watch a video that may evoke feelings of <strong>{{ videmotion }}</strong>. 
                The video will be <strong>10 minutes</strong> long. 
                {{ curinst }}
            </p>

            <hr>
            <h5>Your options:</h5>

            {% for vid in video_options %}
            <div class="card mb-3">
                <div class="card-body">
                    <h6 class="card-title">{{ vid.title }}</h6>
                    <p class="card-text text-muted">{{ vid.description }}</p>
                </div>
            </div>
            {% endfor %}

            <p>
                Please <strong>avoid moving your hands and body when watching the videos</strong>.
            </p>

            <p>
                On the next page, you will choose your video. Once you have chosen, 
                the video will play without interruption. After it ends, you will be 
                asked to rate how you felt while watching it.
            </p>

        {% elif curcond == 'mast' %}
            <h3><strong>About this task:</strong></h3>
            <hr>
            <ul>
                <li>
                    <p>
                        In the following task you will be asked to immerse your hand – 
                        including the wrist joint – in ice-cold water. You are <u>not</u> 
                        allowed to make a fist or place your hand on the bottom of the box.
                    </p>
                </li>
                <li>
                    <p>
                        You will be asked to do this several times, and in between 
                        these "trials", you will have to perform <strong>some mental arithmetic</strong>. 
                    </p>
                </li>
                <li>
                    <p>
                        The total duration of this task is about 10 minutes.
                    </p>
                </li>
            </ul>

            
            <div class="d-flex flex-column gap-3 p-4 mb-3" 
                style="background-color: #e9ecef; border: 1px solid #ced4da; border-radius: 10px;">
                <p class="mb-0">
                    When you are asked to immerse your hand in the water, do it like this:
                </p>
                <hr class="mt-0">
                <div class="d-flex gap-4 justify-content-center align-items-center">
                    <img src="/static/tasks/Picture1.jpg" 
                        style="width: 28%; border-radius: 6px; box-shadow: 0 3px 8px rgba(0,0,0,0.2);">
                    <img src="/static/tasks/Picture2.jpg" 
                        style="width: 28%; border-radius: 6px; box-shadow: 0 3px 8px rgba(0,0,0,0.2);">
                </div>
            </div>

            <h3><strong>Instructions:</strong></h3>
            <hr>
            <ul>
                <li>
                    <p>
                        During trials in which you have to immerse your hand in the water, 
                        you will see the instruction "ARM <strong><u>IN</u></strong> WATER" on the screen.
                    </p>
                </li>
                <li>
                    <p>
                        You have to hold your hand in the water until you are instructed to remove it. 
                        In that case, you will read "<strong><u>RETRACT</u></strong> ARM" on the screen.
                    </p>
                </li>
            </ul>
            <p>
                If you've finished the instructions above and do not
                have questions, press the Next button.
            </p>

        {% elif curcond == 'control' %}

            <h3><strong>About this task:</strong></h3>
            <hr>
            <ul>
                <li>
                    <p>
                        In the following task you will be asked to immerse your hand – 
                        including the wrist joint – in lukewarm water. You are <u>not</u> 
                        allowed to make a fist or place your hand on the bottom of the box.
                    </p>
                </li>
                <li>
                    <p>
                        You will be asked to do this several times, and in between 
                        these "trials", you will have to perform <strong>a simple counting task</strong>. 
                    </p>
                </li>
                <li>
                    <p>
                        The total duration of this task is about 10 minutes.
                    </p>
                </li>
            </ul>

            
            <div class="d-flex flex-column gap-3 p-4 mb-3" 
                style="background-color: #e9ecef; border: 1px solid #ced4da; border-radius: 10px;">
                <p class="mb-0">
                    When you are asked to immerse your hand in the water, do it like this:
                </p>
                <hr class="mt-0">
                <div class="d-flex gap-4 justify-content-center align-items-center">
                    <img src="/static/tasks/Picture1.jpg" 
                        style="width: 28%; border-radius: 6px; box-shadow: 0 3px 8px rgba(0,0,0,0.2);">
                    <img src="/static/tasks/Picture2.jpg" 
                        style="width: 28%; border-radius: 6px; box-shadow: 0 3px 8px rgba(0,0,0,0.2);">
                </div>
            </div>

            <h3><strong>Instructions:</strong></h3>
            <hr>
            <ul>
                <li>
                    <p>
                        During trials in which you have to immerse your hand in the water, 
                        you will see the instruction "ARM <strong><u>IN</u></strong> WATER" on the screen.
                    </p>
                </li>
                <li>
                    <p>
                        You have to hold your hand in the water until you are instructed to remove it. 
                        In that case, you will read "<strong><u>RETRACT</u></strong> ARM" on the screen.
                    </p>
                </li>
            </ul>
            <p>
                If you've finished the instructions above and do not
                have questions, press the Next button.
            </p>

        {% elif curcond == 'rest' %}

            <h3><strong>Rest Period</strong></h3>
            <hr>
            <p>Now you will do a 5 minute breathing task.</p>
            <p>Press Next to see instructions</p>

        {% endif %}

    </div>
</div>

{% next_button %}

{% endblock %}