{% 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 %}

<input type="hidden" name="attention" id="attention">

<div style="margin-top: 25px; margin-bottom: 25px; text-align: center;">
    <p>
        In this screen, please simply click here:
        <button type="button" id="attention_btn" onclick="setAttentionAndSubmit()">
            Click here
        </button>
    </p>
</div>

<script>
    function setAttentionAndSubmit() {
        document.getElementById('attention').value = 1;
        document.querySelector('form').submit();
    }
</script>

 <hr>

<script>
    function setAttentionAndContinue() {
        document.getElementById('attention').value = 1;
        document.querySelector('button.otree-btn-next').click();
    }
</script>





    <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_attention.html' }}
        </div>

    </div>



{% endblock %}