{{ load static }}
{{ block content }}
<!--External CSS & js-->
<link rel="stylesheet" href="{{ static 'style_sheets/general.css' }}" type="text/css">
<link rel="stylesheet" href="{{ static 'style_sheets/tables.css' }}" type="text/css">
<script src="{{ static 'java_scripts/general.js' }}"></script>

<!-- Title -->
{{ block title }}
<div class="Title">
    <h3 style="float: left"><u>End of Slider Training:</u> </h3>
</div>
{{ endblock }}

<!-- End of Round Results -->
<div class="feed-div">
    <div class="feed">
        <h4>End of training Results:</h4>
        <div>
            <table>
                <tr>
                    <th>Round Counted:</th>
                    <td>{{ player.round_towards_payment }}</td>
                </tr>
                <tr>
                    <th>Random Draw Selected:</th>
                    <td>{{ selected_draw }}</td>
                </tr>
                <tr>
                    <th>Random Draw Value:</th>
                    <td>{{ random_draw }}</td>
                </tr>
                <tr>
                    <th>Invest Value:</th>
                    <td>{{ invest_value }}</td>
                </tr>
                <tr>
                    <th>Your Minimum Endowment:</th>
                    <td>{{ outside_option }}</td>
                </tr>
                <tr class="last">
                    <th>Your Payoff:</th>
                    <td>{{ payoff }}</td>
                </tr>
            </table>
        </div>
    </div>
</div>

<!--Next Button: Only allows players to continue if all players in session are ready/clicked continue-->
<div class="button">
    <div>
        <p>Please click "Continue"</p>
        <p style="font-size: 16px;" >*** Page will not continue until everyone has clicked continue ***</p>
    </div>
    <button type="button" id="validation" onclick="validating()">Continue</button>
</div>

{{ endblock }}