{% 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 class="wrapper">
        <div class="container-fluid">
            <div class="wrapper instructions row">
                <p class="col">
                    In your opinion, during the anonymous reviews, which text was most often selected as the best?
                </p>
            </div>
            <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_estimate" 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_estimate" id="R" value="R" autocomplete="off">Right text
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col text-center">{{ form.creativity_rating_estimate.errors }}</div>
            </div>
        </div>

        <button class="otree-btn-next btn btn-primary">Confirm</button>

    </div>
{% endblock %}