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

{% block title %}
    Final Results
{% endblock %}

{% block app_styles %}
<style type="text/css">
.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slidecontainer2 {
  width: 100%;
}

.slider2 {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider2:hover {
  opacity: 1;
}

.slider2::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider2::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.center {
border: 5px solid #FFFF00;
text-align: center;
}

.display {
    border: 10px solid red;
}

.important {
        font-size: 14pt;
        font-weight: bold;
    }

th {
    border: 1px solid black;
    font-size: 12pt;
    width: 650px;
    text-align: right;
    font-weight:normal;
    }

td {
    font-size: 12pt;
    border: 1px solid black;
    text-align: center;
    }

table {
    table-layout: fixed;
    width: 800px;
    }

.history td {
    font-size: 12pt;
    }

.history th {
    font-size: 12pt;
    width: 100px;
    text-align: center;
    }

</style>
{% endblock %}

{% block content %}

    <p>This concludes the experiment.</p>

    {% if is_accountant %}
        {% if num_paying_rounds_allocation > 1 %}
            <p>The following rounds were chosen to be paid for the declarations of solvency and liquidity:
            {{ paying_rounds_allocation }}</p>
            <p>Your total earnings for declarations for those rounds was:
            {{ earnings_allocation }}</p>
        {% else %}
            <p>The following round was chosen to be paid for the declarations of solvency and liquidity:
            {{ paying_rounds_allocation }}</p>
            <p>Your earnings for declarations for that round were:
            {{ earnings_allocation }}</p>
        {% endif %}
    {% else %}
        {% if num_paying_rounds_allocation > 1 %}
            <p>The following rounds were chosen to be paid for the allocation decision:
            {{ paying_rounds_allocation }}</p>
            <p>Your total earnings for allocation decisions for those rounds was:
            {{ earnings_allocation }}</p>
        {% else %}
            <p>The following round was chosen to be paid for the allocation decision:
            {{ paying_rounds_allocation }}</p>
            <p>Your earnings for the allocation decision for that round was:
            {{ earnings_allocation }}</p>
        {% endif %}
    {% endif %}

    {% if num_paying_rounds_prediction > 1 %}
        <p>The following rounds were chosen to be paid for prediction accuracy:
        {{ paying_rounds_prediction }}</p>
        <p>Your total earnings for predictions for those rounds was:
        {{ earnings_prediction }}</p>
    {% else %}
        <p>The following round was chosen to be paid for prediction accuracy:
        {{ paying_rounds_prediction }}</p>
        <p>Your earnings for the prediction for that round was:
        {{ earnings_prediction }}</p>
    {% endif %}

    <p>This brings your earnings from both allocation and prediction to {{ total_earnings }}.</p>

    <p>In addition, you will receive the {{ show_up_fee }} participation payment.</p>

    <p>This brings your total payment to <span class="important">{{ total_payoff }}.</span></p>



<h5>History of all rounds </h5>
    <table class="history">
        {% if is_accountant %}<tr>
        <th>Round</th><th>Declared Liquid?</th><th>Declared Solvent?</th><th>Liquid Correct?</th><th>Solvent Correct?</th><th><b>Payoff for liquid/solvent correct</b></th><th><b>Prediction payoff</b></th>
        </tr>
            {% for p in player_in_all_rounds %}
            <tr>
                <td>{{ p.round_number }}</td>
                <td>{{ p.liquid }}</td>
                <td>{{ p.solvent }}</td>
                <td>{{ p.liquid_correct }}</td>
                <td>{{ p.solvent_correct }}</td>
                <td class="important">{{ p.allocation_payoff }}</td>
                <td class="important">{{ p.prediction_payoff }}</td>
            </tr>
            {% endfor %}
        {% else %}
       <tr>
           <th>Round</th><th>Assets</th><th>Cash</th><th># Impatient costumers</th><th>Liquid?</th><th>Solvent?</th><th>Predicted price</th><th>Actual price</th><th><b>Allocation payoff</b></th><th><b>Prediction payoff</b></th>
        </tr>
        {% for p in player_in_all_rounds %}
            <tr>
            <tr>
                <td>{{ p.round_number }}</td>
                <td>{{ p.asset }}</td>
                <td>{{ p.cash_dollars }}.{{ p.cash_cents }}</td>
                <td>{{p.impatient}}</td>
                <td>{{ p.liquid }}</td>
                <td>{{ p.solvent }}</td>
                <td>
                    {% if p.no_trade == 1 %}
                    No trade
                    {% else %}
                    {{ p.price_guess }}
                    {% endif %}
                </td>
                <td>
                    {% if  p.group.subsession.price == 0 %}
                    No trade
                    {% else %}
                    {{ p.group.subsession.price_display|to2 }}
                    {% endif %}
                </td>
                <td class="important">{{ p.allocation_payoff }}</td>
                <td class="important">{{ p.prediction_payoff }}</td>
            </tr>
        {% endfor %}
        {% endif %}
    </table>
{% endblock %}