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


{% block styles %}
    <link rel="stylesheet" type="text/css" href="{% static "global/css/style.css" %}">
    <style>
        .otree-body {
            max-width: 100%;
        }
        .label-as-button input[type='radio'] {
            display: none
        }
        .break-words {
            overflow-wrap: break-word;
        }
    </style>
{% endblock %}

{% block scripts %}
    <script>
        $(function () {
            $('.label-as-button label').on('click', function () {
                $(this).addClass('focus');
                $('.label-as-button label').not(this).removeClass('focus')
            });
            $(document).on('click', function (e) {
                if ($(e.target).closest('.label-as-button label').length === 0) {
                    $('.label-as-button label').removeClass('focus');
                }
            });
        })
    </script>
{% endblock %}

{% block title %}
{% endblock %}

{% block content %}
    <div>
        <div class="instructions">
            {% if player.creativity_rating_see_names and names %}
                <p>
                    The first text has been modified by {{ left_name }}.
                </p>
                <p>
                    The second text has been modified by {{ right_name }}.
                </p>
            {% endif %}
            <p>
                Once you have finished reading the texts, please
                select the one you prefer.
            </p>
        </div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-6 break-words"><div style="border: 1px solid dimgray; padding: 14px; border-radius: 5px">{{ text_left|safe }}</div></div>
                <div class="col-6 break-words"><div style="border: 1px solid dimgray; padding: 14px; border-radius: 5px">{{ text_right|safe }}</div></div>
            </div>

            <div class="row mt-3 form-group required label-as-button" data-toggle="buttons">
                <div class="col text-center">
                    <label class="btn btn-outline-primary btn-large" style="font-size: x-large">
                        <input type="radio" name="creativity_rating" id="L" value="L" autocomplete="off">Left Text
                    </label>
                </div>
                <div class="col text-center">
                    <label class="btn btn-outline-primary btn-large" style="font-size: x-large">
                        <input type="radio" name="creativity_rating" id="R" value="R" autocomplete="off">Right text
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col text-center">{{ form.creativity_rating.errors }}</div>
            </div>
        </div>

        <button class="otree-btn-next btn btn-primary">Confirm</button>
    </div>
{% endblock %}