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

{% block title %}
    Decision Task: Your Choice
{% endblock %}

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

    {% if group.owner_penalty == True %}:
    <br>You are the <b style="color: forestgreen">RENTER</b>. The owner offered you  <b style="color: purple">FIXED RENT contract</b> and  <b style="color: purple">imposed a penalty</b> on you.</br>

    {% else %}
     <br>You are the <b style="color: forestgreen">Renter</b>. The owner offered you <b style="color: purple">FIXED RENT contract</b> and <b style="color: purple"> did not impose a penalty</b> on you. </br>

    {% endif %}
        <br>
    <b style="color: darkblue"> Payoff from Fixed Rent Option (All values are in points)</b>
    </br>
    <table class="table table-sm">

     <thead>
     <tr>
     <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>

    </tr>
     </thead>

    <tr>
    <td rowspan="2" style="border-bottom:2px solid black;"> <img src ="{% static "economic_decisionmaking/M1_s.png" %}"/><b style="color: forestgreen">What You Earn</b></td>
    <td><b style="color: forestgreen">You Choose Action D</b></td>
    <td>100</td>
    <td>100</td>
        </tr>

    <tr>
        <td style="border-bottom:2px solid black;"><b style="color: forestgreen">You Choose Action G</b></td>
            <td style="border-bottom:2px solid black;">150</td>
            <td style="border-bottom:2px solid black;">100</td>
    </tr>
    <tr>
     <td rowspan="2" style="border-bottom:2px solid black;"><img src="{% static "economic_decisionmaking/F1_s.png" %}"/><b style="color: purple">What Owner Earns</b></td>
     <td> <b style="color: forestgreen">You Choose Action D</b></td>
            <td>225</td>
            <td>225</td>
     </tr>
     <tr>
        <td style="border-bottom:2px solid black;"><b style="color: forestgreen">You Choose Action G</b></td>
            <td style="border-bottom:2px solid black;">100</td>
            <td style="border-bottom:2px solid black;">100</td>
     </tr>
     </table>
    <br>
     <b style="color: darkblue">Payoff from Fixed Rent with Discount Option (All values are in points)</b>
    </br>
           <table class="table table-sm">
    <thead>
     <tr>
     <th scope="col" style="border-top:1px solid black;"><b style="color: purple">Option 3: Fixed Rent with Discount</b></th>
     <th scope="row" style="border-top:1px solid black;"><b style="color: purple">Discount Values</b></th>
     <th scope="col" style="border-top:1px solid black;"><b style="color: purple">10</b></th>
     <th scope="col" style="border-top:1px solid black;"><b style="color: purple">20</b></th>
     <th scope="col" style="border-top:1px solid black;"><b style="color: purple">30</b></th>
     <th scope="col" style="border-top:1px solid black;"><b style="color: purple">40</b></th>
     <th scope="col" style="border-top:1px solid black;"><b style="color: purple">50</b></th>
     <th scope="col" style="border-top:1px solid black;"><b style="color: purple">60</b></th>
     <th scope="col" style="border-top:1px solid black;"><b style="color: purple">70</b></th>
     <th scope="col" style="border-top:1px solid black;"><b style="color: purple">80</b></th>
     <th scope="col" style="border-top:1px solid black;"><b style="color: purple">90</b></th>
     <th scope="col" style="border-top:1px solid black;"><b style="color: purple">100</b></th>

     </tr>
     </thead>
     <tr>
     <td rowspan="2" style="border-bottom:2px solid black;"><img src ="{% static "economic_decisionmaking/M1_s.png" %}"/><b style="color: forestgreen">What You Earn</b></td>
     <td><b style="color: forestgreen"> You Choose Action D</b></td>
        <td >110</td>
        <td >120</td>
        <td >130</td>
        <td >140</td>
        <td >150</td>
        <td >160</td>
        <td >170</td>
        <td >180</td>
        <td >190</td>
        <td >200</td>
     </tr>

     <tr>
        <td style="border-bottom:2px solid black;"> <b style="color: forestgreen">You Choose Action G</b></td>
        <td style="border-bottom:2px solid black;">150</td>
        <td style="border-bottom:2px solid black;">150</td>
        <td style="border-bottom:2px solid black;">150</td>
        <td style="border-bottom:2px solid black;">150</td>
        <td style="border-bottom:2px solid black;">150</td>
        <td style="border-bottom:2px solid black;">150</td>
        <td style="border-bottom:2px solid black;">150</td>
        <td style="border-bottom:2px solid black;">150</td>
        <td style="border-bottom:2px solid black;">150</td>
        <td style="border-bottom:2px solid black;">150</td>
    </tr>
    <tr>
     <td rowspan="2" style="border-bottom:2px solid black;"><img src="{% static "economic_decisionmaking/F1_s.png" %}"/><b style="color: purple">What Owner Earns</b></td>
     <td> <b style="color: forestgreen">You Choose Action D</b></td>

        <td >215</td>
        <td >205</td>
        <td >195</td>
        <td >185</td>
        <td >175</td>
        <td >165</td>
        <td >155</td>
        <td >145</td>
        <td >135</td>
        <td >125</td>
     </tr>
     <tr>
         <td style="border-bottom:2px solid black;"><b style="color: forestgreen"> You Choose Action G</b></td>
        <td style="border-bottom:2px solid black;">100</td>
        <td style="border-bottom:2px solid black;">100</td>
        <td style="border-bottom:2px solid black;">100</td>
        <td style="border-bottom:2px solid black;">100</td>
        <td style="border-bottom:2px solid black;">100</td>
        <td style="border-bottom:2px solid black;">100</td>
        <td style="border-bottom:2px solid black;">100</td>
        <td style="border-bottom:2px solid black;">100</td>
        <td style="border-bottom:2px solid black;">100</td>
        <td style="border-bottom:2px solid black;">100</td>
     </tr>

     </table>
    {% formfield group.renter_action label="What action would you like to choose?" %}
    <h4>Round history</h4>
    <table class="table">
        <tr>
            <th>Round</th>
            <th>The Owner's Contract Choice</th>
            <th>The Owner's Discount Value Choice</th>
            <th> Your Decision</th>
            <th> Your Payoff this Round</th>

        </tr>
        {% for p in player_in_previous_rounds %}
            <tr>
                <td>{{ p.round_number }}</td>
                <td> {% if p.group.owner_contract == True %}
                        {%  if p.group.owner_penalty == True %}
                           FIXED RENT WITH PENALTY
                        {% else %}
                           FIXED RENT
                        {% endif %}
                    {% else %}
                        FIXED RENT WITH DISCOUNT
                    {% endif %}
                </td>
                <td> {{p.group.owner_discount}}</td>
                <td> {% if p.group.renter_action == True %}
                       ACTION D
                     {% else %}
                       ACTION G
                    {% endif %}
                </td>
                <td> {{ p.payoff }}</td>


            </tr>
             {% endfor %}
            <tr>
            <th>Your Cumulative Payoff</th>
            <th></th>
            <th></th>
            <th></th>
            <th>{{ participant.payoff }}</th>
            </tr>

    </table>

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