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

{% block styles %}
<style>
    .table tr th,
    .table tr td {
        border: none;
        padding: 4px;
    }

    .table {
        table-layout: fixed;
        border-collapse: collapse;
        margin-bottom: 60px;
    }

    label {
        cursor: pointer;
    }

    input[type="radio"] {
        display: none;
    }

    input[type="radio"]:checked + label > img {
        border: 2px solid red;
    }

    img {
        margin: 0 10px;
        transition: border 0.3s;
    }

    .question-text {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 20px;
        margin-top: 20px;
    }

    fieldset {
        border: none;
        padding: 0;
        text-align: center;
    }
</style>
{% endblock %}

{% block content %}
<div class="question-text text-center">
    {% if treatment == "FreeTool" %}
    How do you feel about the offer of a free tool that you were presented with?
    {% elif treatment == "ComplimentaryTool" %}
    How do you feel about the offer of a complimentary tool that you were presented with?
    {% elif treatment == "Tool" %}
    How do you feel about the offer of a tool that you were presented with?
    {% elif treatment == "AlternativeVersion" %}
    How do you feel about the offer of an alternative version of the task that you were presented with?
    {% endif %}
</div>

<form method="post">
    <input type="hidden" name="csrftoken" value="dummy">
    <fieldset>
        <input type="radio" name="affect" id="verysad" value="verysad">
        <label for="verysad">
            <img src="{% static 'verysad.png' %}" width="58" height="60" alt="Very Sad">
        </label>

        <input type="radio" name="affect" id="sad" value="sad">
        <label for="sad">
            <img src="{% static 'sad.png' %}" width="58" height="60" alt="Sad">
        </label>

        <input type="radio" name="affect" id="neutral" value="neutral">
        <label for="neutral">
            <img src="{% static 'neutral.png' %}" width="58" height="60" alt="Neutral">
        </label>

        <input type="radio" name="affect" id="ok" value="ok">
        <label for="ok">
            <img src="{% static 'ok.png' %}" width="58" height="60" alt="Okay">
        </label>

        <input type="radio" name="affect" id="happy" value="happy">
        <label for="happy">
            <img src="{% static 'happy.png' %}" width="58" height="60" alt="Happy">
        </label>
    </fieldset>

    <div class="text-center mt-4">
        <button class="otree-btn-next btn btn-primary">Next</button>
    </div>
</form>
{% endblock %}