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

{% block title %}
    Decision
{% endblock %}

{% block content %}

    Round {{ subsession.round_number }}
    <br>
    {% formfields %}
    {% next_button %}

    <br>
    <p>
        <button id="btn_reminder" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collpaseExample"
            aria-expanded="false" aria-controls="collapseExample">
        Tips (show/hide)
        </button>
    </p>
        <div class="collapse" id="collapseExample">
            <div class="card card-body">
        Your car values ECU25,000.
        Once an accident occurs, it can cause slight loss (ECU500), half loss (ECU12,500), or total loss (ECU18,750)
        with equal probability, i.e. each of the losses could happen at 1/3 (33.33%).
        <p style="color:#8b000c">
        property value / remaining assets = Value of your car in the end of this round - Premium - Loss/Deductible (which is lower)<br>
        <p style="color:#030303">
        Note that for slight loss and half loss, you can get full reimbursement except for the deductible. While for total loss, you can only
        have 75% of your car value, i.e. 18,750, except for the deductible.<br>
        Your payoff rate is ECU1,000 = $1

            </div>
        </div>
    {% if subsession.round_number != 1 %}
        <div class = "card-header rb-3 text-center">
            <b>History Table</b>
        </div>

        <p>
            <div class="row justify-content-center">
                <table class="table" style="...">
                    <tr>
                        <th class="text-center">Round</th>
                        <th class="text-center">Vehicle value (ECU)</th>
                        <th class="text-center">Accident?</th>
                        <th class="text-center">Loss (ECU)</th>
                        <th class="text-center">Premium (ECU)</th>
                        <th class="text-center">Deductible (ECU)</th>
                        <th class="text-center">Property value after this round (ECU)</th>
                        <th class="text-center">Earnings ($)</th>

                    </tr>
                    <tbody>
                    {% for p in player.in_previous_rounds %}
                    <tr>
                        <td class="text-center my_style">{{p.subsession.round_number}}</td>
                        <td class="text-center my_style">{{Constants.endowment}}</td>
                        <td class="text-center my_style">{{p.accident_happen}}</td>
                        <td class="text-center my_style">{{p.loss_level}}</td>
                        <td class="text-center my_style">{{p.premium}}</td>
                        <td class="text-center my_style">{{p.deductible}}</td>
                        <td class="text-center my_style">{{p.payoffs}}</td>
                        <td class="text-center my_style">{{p.earnings}}</td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </p >
    {% endif %}
{%  endblock %}

{% block script %}
    <script>
        $('#btn_reminder').click(function() {
            $('#collapseExample').toggle();
           // $(this).html( $(this).html() == 'Show instructions' ? 'Hide instructions' : 'Show instructions' );
        });
    </script>
{% endblock %}