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

{% block styles %}
<style>
table, th{
  border: 1px solid grey;
    text-align: center;
}
table{
    width: 90%;
    alignment: center;
}

.td1{
      border: 1px solid grey;
    text-align: center;
}

.td2{
      border: none;
    text-align: center;
}

td{
width: 15em;
height: 4em;

}


.split-screen {
    display: flex;
    width: 100%;
}

.left, .right {
    width: 50%;
    padding: 0px;
    box-sizing: border-box;
    overflow-y: auto;
}

.menu-box {
    border: 3px solid #130e0e;
    padding: 2px;
    width: 95%;
    margin-top: 20px;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.menu-box:hover {
    border-color: #130e0e;
    transform: translateY(-1px);
    box-shadow: 0 0 8px rgba(0,0,0,0.12);
}

.left-box:hover {
    background-color: #fff7cc;
}

.right-box:hover {
    background-color: #ffe6cc;
}

.left-box.selected {
    background-color: #fff7cc;
    border-color: #e6c200;
}

.right-box.selected {
    background-color: #ffe6cc;
    border-color: #ff9933;
}

</style>

{% endblock %}




{% block title %}
    <div align="center">
        {% if feedback == 0 %}
        Round {{ blockround}}/{{ total_block }}: Stage 1
        {% else %}
        Practice Round {{ blockround}}/{{ total_block }}: Stage 1
        {% endif %}
    </div>
{% endblock %}

{% block content %}
<div align="center">
<p> Please decide whether you want to choose an option from LEFT or RIGHT.  </p>
    <hr>
</div>




    <div class="split-screen">
        <div class="left"  align="center">
            <b> LEFT</b>
<input type="radio" name="menu" value="{{ left_value }}" id="menu_left" style="display:none;">
<div id="menu_left_box" class="menu-box left-box"
     onclick="
        document.getElementById('menu_left').checked = true;
        document.getElementById('menu_left_box').classList.add('selected');
        document.getElementById('menu_right_box').classList.remove('selected');
     ">
    <br>
    {{ include_sibling 'Menu_1.html' }}
</div>


        </div>

        <div class="right" align="center">
            <b> RIGHT</b>
<input type="radio" name="menu" value="{{ right_value }}" id="menu_right" style="display:none;">
<div id="menu_right_box" class="menu-box right-box"
     onclick="
        document.getElementById('menu_right').checked = true;
        document.getElementById('menu_right_box').classList.add('selected');
        document.getElementById('menu_left_box').classList.remove('selected');
     ">
        <br>
    {{ include_sibling 'Menu_2.html' }}
</div>

        </div>

    </div>

<br>
<br>

<div  align="center">
{{ next_button}}
</div>





{% endblock %}