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

{% block title %}
The guideline choice
{% endblock %}


{% block scripts %}

<script>
$('input[type="radio"]').on('click change', function(e) {
    document.getElementById('chose_1').style.display = 'none';
    document.getElementById('chose_2').style.display = 'none';
    document.getElementById('chose_0').style.display = 'none';
    document.getElementById('initial_text').style.display = 'none';
    console.log(e.target.value);
    if (e.target.value==0)
    {
        document.getElementById('chose_0').style.display = 'block';
    }
    if (e.target.value==1)
    {
        document.getElementById('chose_1').style.display = 'block';

    }
    if (e.target.value==2)
    {
        document.getElementById('chose_2').style.display = 'block';

    }
});
</script> 
{% endblock %}


{% block content %}

<p>
    You have been assigned the role of a Supervisor. Before you begin the task described in the instructions, we ask you to make an additional decision. Please make this decision carefully. 
</p>

<p>
    Keystone asks you as a supervisor to decide if you want to set a guideline for the bonus decision and, if so, what the guideline should be. The guideline that you choose can appear in the performance report that both you and the <b>employee</b> will see every period. 
</p>

<p>
    If you choose to show a guideline, there is a 50% chance that your chosen guideline will be included in the performance report, and a 50% chance that it will not be included. If you select a guideline but the random lottery does not include it in the report, the employee will NOT learn that you had the option to display a guideline.
</p>

<p>
    If you decide not to show any guideline, there is a 100% probability that your choice will be implemented. The employee will NOT learn that you had an opportunity to display a guideline. 
</p>

{{ formfield player.selected_guideline }}


<p>
    This is how your choice affects the information contained in the performance reports that both you and the <b>employee</b> will see. 
</p>

<span id="initial_text">
This will diplay your choice once you select an option. 
</span>
<span id="chose_1" style="display: none;">

    <style type="text/css">
        .tg  {border-collapse:collapse;border-spacing:0;}
        .tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
          overflow:hidden;padding:10px 5px;word-break:normal;}
        .tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
          font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
        .tg .tg-baqh{text-align:center;vertical-align:top}
        .tg .tg-0lax{text-align:left;vertical-align:top}
        </style>
        <table class="tg">
        <thead>
          <tr>
            <th class="tg-baqh">With 50% probability</th>
            <th class="tg-baqh">With 50% probability</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="tg-0lax">    <img style="width:100%;
                max-height:100%;" src="{% static 'attention/img/self_effort.JPG' %}"/> </td>
            <td class="tg-0lax">    <img style="width:100%;
                max-height:100%;" src="{% static 'attention/img/self_no.JPG' %}"/> </td>
          </tr>
        </tbody>
        </table>
 

   
</span>
    
<span id="chose_2" style="display: none;">

    <table class="tg">
        <thead>
          <tr>
            <th class="tg-baqh">With 50% probability</th>
            <th class="tg-baqh">With 50% probability</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="tg-0lax">    <img style="width:100%;
max-height:100%;" src="{% static 'attention/img/self_profit.JPG' %}"/> 
            <td class="tg-0lax">    <img style="width:100%;
max-height:100%;" src="{% static 'attention/img/self_no.JPG' %}"/> 
          </tr>
        </tbody>
        </table>

</span>

<span id="chose_0" style="display: none;">
    <table class="tg">
        <thead>
          <tr>
            <th class="tg-baqh">With 100% probability</th>
        
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="tg-0lax">    <img style="width:100%;
max-height:100%;" src="{% static 'attention/img/self_no.JPG' %}"/> 
          </tr>
        </tbody>
        </table>

</span>
</br>
    {% next_button %}

{% endblock %}