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

{% block title %}
    Practice Session-Decision Task: Your choice
{% endblock %}

{% block content %}
    {% if player.id_in_group == 1 %}
<div>
  <div class="row">
    <div class="col-sm">
    </div>
          <div class="card" style="width: 18rem;">
        <li><b>Round Number: {{ subsession.round_number}}</b></li>
        <li><b> Your ID: {{ player.id_in_group}}</b></li>

</div>
  </div>
</div>


<p>
    You chose to offer the <b>fixed rental contract</b>.
</p>

    <br><b style="color: darkblue">Payoffs from Option 1 and Option 2 (All values are in points)</b></br>
        <br>
 <table class="table table-sm " >

<thead>
     <th scope="col"  style="border-top:1px solid black;"></th>
     <th scope="col" style="border-top:1px solid black;"></th>
     <th scope="col" style="border-top:1px solid black;"><b style="color: purple">Option 1: Fixed Rent without Penalty</b></th>
     <th scope="col" style="border-top:1px solid black;"><b style="color: purple">Option 2: Fixed Rent with Penalty</b></th>

</thead>

     <tr>

    <td rowspan="2" style="border-bottom:2px solid black;"> <b style="color: purple"> What You Earn</b></td>
    <td><b style="color: forestgreen">Renter Chooses Action D</b></td>
    <td>21</td>
    <td>21</td>
     </tr>
     <tr>
        <td style="border-bottom:2px solid black;"><b style="color: forestgreen">Renter Chooses Action G</b></td>
            <td style="border-bottom:2px solid black;">10</td>
            <td style="border-bottom:2px solid black;" >10</td>
     </tr>

     <td rowspan="2" style="border-bottom:2px solid black;"><b style="color: forestgreen">What Renter Earns</b></td>
     <td> <b style="color: forestgreen">Renter Chooses Action D</b></td>
            <td>10</td>
            <td>10</td>
        </tr>
    <tr>
        <td style="border-bottom:2px solid black;"><b style="color: forestgreen">Renter Chooses Action G</b></td>
            <td style="border-bottom:2px solid black;">15</td>
            <td style="border-bottom:2px solid black;">10</td>
        </tr>
 </table>
{% formfield group.owner_penalty label="Would you like to impose a 5-point penalty that will be implemented if the renter chooses action G?" %}

{% else %}
    <p> please wait while the owner makes a contract choice </p>
<p>
{% endif %}

{% next_button %}
</p>
{% endblock %}
{% block app_styles %}
<style type="text/css">
    th {

        font-size: 9pt;
        text-align: center;
        font-weight: bold;
        }

    td {
        font-size: 9pt;
        text-align: center;
        }

    td.confirmation {
    }

    th.no-border {
        border: 0 solid black;
    }
            }
    table {
        table-layout: auto;
        }
        table.table tbody,
    table.table thead,
    table.table thead {
     border-left: 1px solid black;
     border-right: 1px solid black;
        border-top: 1 px solid black;
        border-bottom: 1 px solid black;
    }
    </style>
    </style>
{% endblock %}