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

{% block styles %}
    <link rel="stylesheet" type="text/css" href="{% static "global/css/dice.css" %}">
    <style>
        input {
            margin: 0 auto;
        }
        @media (max-width: 575.98px) {
            .controls {
                margin-left: 0!important;
            }
        }
    </style>
{% endblock %}

{% block scripts %}
    <script type="text/javascript" src="{% static "global/js/dice.js" %}"></script>
{% endblock %}

{% block title %}
{% endblock %}

{% block content %}
    <div class="wrapper">
        <div class="wrapper instructions">
            <p>
                In this activity, a dice will appear on your screen, which you can roll. 
                You will then see which side of the dice has been rolled (a number between 1 and 6). 
                We then invite you to report the number you have obtained. 
                This number determines the credits you get: 1 credit for number “1”, 2 credits for number “2”, and so on, up to 6.
            </p>
        </div>

        <div align="center"><button class="btn btn-outline-primary mx-auto" type="button" id="roll-button">Roll the dice</button></div>

        {% if not is_IE %}
            <br>
            <div class="dice">
                <ol class="die-list even-roll" data-roll="1" id="die-1">
                    <li class="die-item" data-side="1">
                        <span class="dot"></span>
                    </li>
                    <li class="die-item" data-side="2">
                        <span class="dot"></span>
                        <span class="dot"></span>
                    </li>
                    <li class="die-item" data-side="3">
                        <span class="dot"></span>
                        <span class="dot"></span>
                        <span class="dot"></span>
                    </li>
                    <li class="die-item" data-side="4">
                        <span class="dot"></span>
                        <span class="dot"></span>
                        <span class="dot"></span>
                        <span class="dot"></span>
                    </li>
                    <li class="die-item" data-side="5">
                        <span class="dot"></span>
                        <span class="dot"></span>
                        <span class="dot"></span>
                        <span class="dot"></span>
                        <span class="dot"></span>
                    </li>
                    <li class="die-item" data-side="6">
                        <span class="dot"></span>
                        <span class="dot"></span>
                        <span class="dot"></span>
                        <span class="dot"></span>
                        <span class="dot"></span>
                        <span class="dot"></span>
                    </li>
                </ol>
            </div>
            <br><br>
        {% elif is_IE %}
            <div id='dice-ie-container'>
                <span id='dice-ie'></span>
            </div>
        {% endif %}

        <div class="form-inline">{% formfield player.lying_decision %}</div>

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