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

{{ block content }}

    <br>

    <h2>You have finished the main part of the experiment.</h2>
    
    <br>
    
    <div class="row">
        <h4>The following are the earnings you obtained during the experiment:</h4>
        <div class="column">
            <table id="choices" class="styled-table">
                <thead>
                    <tr>
                        <th>Round</th>
                        <th>Period</th>
                        <th>Earnings</th>
                    </tr>
                </thead>
                <tbody>
                    {{ for period, payoff in round1 }}
                        <tr>
                            <td>1</td>
                            <td>{{ period }}</td>
                            <td>{{ payoff }}</td>
                        </tr>
                    {{ endfor }}
                </tbody>
            </table>
        </div>
        <div class="column">
            <table id="choices" class="styled-table">
                <thead>
                    <tr>
                        <th>Round</th>
                        <th>Period</th>
                        <th>Earnings</th>
                    </tr>
                </thead>
                <tbody>
                    {{ for period, payoff in round2 }}
                        <tr>
                            <td>2</td>
                            <td>{{ period }}</td>
                            <td>{{ payoff }}</td>
                        </tr>
                    {{ endfor }}
                </tbody>
            </table>
        </div>
        <div class="column">
            <table id="choices" class="styled-table">
                <thead>
                    <tr>
                        <th>Round</th>
                        <th>Period</th>
                        <th>Earnings</th>
                    </tr>
                </thead>
                <tbody>
                    {{ for period, payoff in round3 }}
                        <tr>
                            <td>3</td>
                            <td>{{ period }}</td>
                            <td>{{ payoff }}</td>
                        </tr>
                    {{ endfor }}
                </tbody>
            </table>
        </div>
    </div>
    
    <br>
    
    <h4>The selected round for payoffs for you was: Period {{ paid_period }} from Round {{ paid_round }}</h4>
    <h4>In that round you earned: {{ points_to_pay }} EC</h4>
    <h4>At a conversion rate of <b>1000 EC is 10.00 EUR</b> you have finally earned: {{ money_to_pay|to2 }} EUR</h4>
    <h4>After adding the show-up-fee of {{ C.SHOW_UP_FEE|to2 }} EUR you will be paid: {{ money_with_fee }} EUR</h4>
    
    <br>
    
    <button class="otree-btn-next btn btn-primary">Continue</button>

{{ endblock }}

{{ block styles }}
    <style>
        .otree-title {
            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: 33%;
        }
    </style>
{{ endblock }}