{% 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%;
    height: 100vh;
}

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



</style>

{% endblock %}




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

{% block content %}
<div align="center">
<p> For each fixed amount, please decide whether you want to choose one option from the pair of options shown on the left side of the screen or whether you prefer
    the fixed amount. </p>
    <hr>
</div>

    <div class="split-screen">
        <div class="left">

<div align="center">

    <div style="margin-top: 70px;">
<b>Choose A or B from this pair of options:</b>
<div style="border:3px solid #130e0e; padding:2px; width:95%; margin-top:20px;">

    <table style="margin-top: -5px;border: none">
    <!-- Header Row -->
    <col style="width: 30%;">
    <col style="width: 40%;">
    <col style="width: 40%;">
    <tr>
        <td class="td2"></td>
        <td class="td2">
            <label style="display:inline-block; margin-right: 20px;">
    <input type="radio" name="choice" value="{{ a_value }}" disabled>
    Option A
  </label> </td>
        <td class="td2">
          <label style="display:inline-block;">
    <input type="radio" name="choice" value="{{ b_value }}" disabled>
    Option B
  </label>
    </tr>
    </table>


<table style="margin-top: 15px;">
    <!-- Header Row -->
        <col style="width: 27%;">
    <col style="width: 37%;">
    <col style="width: 37%;">
    <tr>
        <td class="td1"></td>
        <td class="td1"><b> <span style="color: green;">Option A</span> </b></td>
        <td class="td1"><b> <span style="color: purple;">Option B</span> </b></td>
    </tr>

    <!-- Transposed Fields -->
    {% for ff, ft, p, o1, o2, w in rows %}
   <tr>
       <td class="td1">         <img src="{% static w %}" width="58px"> </td>
       <td class="td1"> <b> <span style="color: green;"> {{ o1 }} </span> </b> </td>
       <td class="td1"> <b> <span style="color: purple;"> {{ o2 }} </span> </b> </td>
       </tr>
    {% endfor %}
</table>



    <div style="text-align: center; margin-top: 50px;">
        </div>
</div>
     </div>
            </div>
             </div>
        <div class="right">
            {{ include_sibling 'CE_sibling.html' }}
        </div>

    </div>



{% endblock %}