{{ block title }}
    Euro Bonds Game
{{ endblock }}

{{ block content }}

    <br>

    <h2>Period {{ period }} / {{ periods }} -- Round {{ round }} / {{ rounds }}</h2>
    
    <br>
    
    <div class="row">
        <div class="feedback_column">
            <p>
                {{ if defaulted_this_round == 1 }}
                    {{ if default_limit_reached == 1 }}
                        <b>The government's debt  now exceeds the  total income of the 5 investors. The government is insolvent and must default on existing debt.</b><br>
                    {{ else }}
                        <b>The government did not manage to sell enough bonds to cover last period's debt. The state has defaulted.</b><br>
                    {{ endif }}
                    <b>Your investment of {{ player_sum_bids }} bonds with a value of {{ player_invested }}EC has been lost.</b><br>
                    <b>Your total gain in this round is : </b>{{ player_sum_earned }} EC.<br>
                    <br>
                    <b>Your income in the next period is reduced by 30%: </b>{{ player_next_income }} EC.<br>
                    <b>A haircut of 30% is applied to debt levels.</b><br>
                    <b>The debt to be financed in the next period is: </b>{{ government_next_debt }} EC.<br>
                {{ else }}
                    <b>The government has successfully sold enough bonds to cover its debt.</b><br>
                    <b>You have purchased {{ player_sum_purchased }} bonds at the prices in the table below.</b><br>
                    <b>Your total gain in this round is : </b>{{ player_sum_earned }} EC.<br>
                    <b>The debt to be financed in the next period is: </b>{{ government_next_debt }} EC.<br>
                    <b></b><br>
                {{ endif }}
            </p>
        </div>
        {{ if player_dropped == 0 }}
            <div class="button_column">
                <button class="otree-btn-next btn btn-primary">Continue</button>
            </div>
        {{ endif }}
    </div>
    
    <br>
    
    {{ if player_dropped == 1 }}
        <div id="message" class="alert alert-danger" role="alert">
            You were not able to input an answer on one of the previous periods. The computer will answer for you.
        </div>
        <br>
    {{ endif }}

    {{ if defaulted_this_round == 0 }}

        <div class="row">
            <div class="column">
                <br><h4>Your bids and purchases:</h4>
                <table id="choices" class="styled-table">
                    <thead>
                        <tr>
                            <th>Price</th>
                            <th>Quantity bid</th>
                            <th>Quantity purchased</th>
                            <th>Gain</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{ C.PURCHASE_PRICE_BOND.0 }}</td>
                            <td>{{ player_bids.0 }}</td>
                            <td>{{ player_purchased.0 }}</td>
                            <td>{{ player_gain.0 }}</td>
                        </tr>
                        <tr>
                            <td>{{ C.PURCHASE_PRICE_BOND.1 }}</td>
                            <td>{{ player_bids.1 }}</td>
                            <td>{{ player_purchased.1 }}</td>
                            <td>{{ player_gain.1 }}</td>
                        </tr>
                        <tr>
                            <td>{{ C.PURCHASE_PRICE_BOND.2 }}</td>
                            <td>{{ player_bids.2 }}</td>
                            <td>{{ player_purchased.2 }}</td>
                            <td>{{ player_gain.2 }}</td>
                        </tr>
                        <tr>
                            <td>{{ C.PURCHASE_PRICE_BOND.3 }}</td>
                            <td>{{ player_bids.3 }}</td>
                            <td>{{ player_purchased.3 }}</td>
                            <td>{{ player_gain.3 }}</td>
                        </tr>
                        <tr>
                            <td>{{ C.PURCHASE_PRICE_BOND.4 }}</td>
                            <td>{{ player_bids.4 }}</td>
                            <td>{{ player_purchased.4 }}</td>
                            <td>{{ player_gain.4 }}</td>
                        </tr>
                        <tr>
                            <td>{{ C.PURCHASE_PRICE_BOND.5 }}</td>
                            <td>{{ player_bids.5 }}</td>
                            <td>{{ player_purchased.5 }}</td>
                            <td>{{ player_gain.5 }}</td>
                        </tr>
                        <tr>
                            <td>{{ C.PURCHASE_PRICE_BOND.6 }}</td>
                            <td>{{ player_bids.6 }}</td>
                            <td>{{ player_purchased.6 }}</td>
                            <td>{{ player_gain.6 }}</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>Total</td>
                            <td>{{ player_sum_bids }}</td>
                            <td>{{ player_sum_purchased }}</td>
                            <td>{{ player_sum_earned }}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div class="column">
                <h4>Government sold the following quantities of bonds:</h4>
                <table id="choices" class="styled-table">
                    <thead>
                        <tr>
                            <th>Price</th>
                            <th>Quantity</th>
                            <th>Total value</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{ C.PURCHASE_PRICE_BOND.0 }}</td>
                            <td>{{ government_purchased.0 }}</td>
                            <td>{{ government_value.0 }}</td>
                        </tr>
                        <tr>
                            <td>{{ C.PURCHASE_PRICE_BOND.1 }}</td>
                            <td>{{ government_purchased.1 }}</td>
                            <td>{{ government_value.1 }}</td>
                        </tr>
                        <tr>
                            <td>{{ C.PURCHASE_PRICE_BOND.2 }}</td>
                            <td>{{ government_purchased.2 }}</td>
                            <td>{{ government_value.2 }}</td>
                        </tr>
                        <tr>
                            <td>{{ C.PURCHASE_PRICE_BOND.3 }}</td>
                            <td>{{ government_purchased.3 }}</td>
                            <td>{{ government_value.3 }}</td>
                        </tr>
                        <tr>
                            <td>{{ C.PURCHASE_PRICE_BOND.4 }}</td>
                            <td>{{ government_purchased.4 }}</td>
                            <td>{{ government_value.4 }}</td>
                        </tr>
                        <tr>
                            <td>{{ C.PURCHASE_PRICE_BOND.5 }}</td>
                            <td>{{ government_purchased.5 }}</td>
                            <td>{{ government_value.5 }}</td>
                        </tr>
                        <tr>
                            <td>{{ C.PURCHASE_PRICE_BOND.6 }}</td>
                            <td>{{ government_purchased.6 }}</td>
                            <td>{{ government_value.6 }}</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>Total</td>
                            <td>{{ government_total_purchased }}</td>
                            <td>{{ government_total_value }}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        
    {{ endif }}

{{ endblock }}

{{ block styles }}
    <style>
        .otree-title, .col-form-label {
            display: none; 
        }
    </style>
    <style>
        .styled-table {
            border-collapse: collapse;
            margin: 25px 0;
            font-size: 0.9em;
            font-family: sans-serif;
            min-width: 400px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
        }

        .styled-table thead tr {
            background-color: #009879;
            color: #ffffff;
            text-align: left;
        }

        .styled-table th,
        .styled-table td, tr {
            padding: 12px 13px;
            min-width: 80px;
        }

        .styled-table tbody tr {
            border-bottom: 1px solid #dddddd;
        }

        .styled-table tbody tr:nth-of-type(even) {
            background-color: #f3f3f3;
        }

        .styled-table tbody tr:last-of-type {
            border-bottom: 2px solid #009879;
        }

        .styled-button {
            color: #fff;
            background-color: #0d6efd;
            border-color: #0d6efd;
            display: inline-block;
            font-weight: 400;
            line-height: 1.5;
            text-align: center;
            text-decoration: none;
            vertical-align: middle;
            border: 1px solid transparent;
            padding: .375rem .75rem;
            font-size: 1rem;
            border-radius: .25rem;
        }

        .row {
            display: flex;
        }

        .column {
            flex: 50%;
        }
        .feedback_column {
            flex: 80%;
        }
        .button_column {
            flex: 20%;
        }
    </style>
{{ endblock }}