{{ extends 'global/Page.html' }}
{{ block title }}Round Summary{{ endblock }}

{{ block content }}

<style>
/* Metrics Table Styles */
    .metrics-table {
        width: 100%; /* Makes the table take up the full width */
        border-collapse: collapse; /* Ensures borders don’t double */
    }
    .metrics-table th, .metrics-table td {
        border: 1px solid black; /* Adds borders around cells */
        padding: 8px;
        text-align: center;
    }
    .metrics-table th {
        font-weight: bold;
        background-color: #f2f2f2; /* Light gray background for headers */
    }
    .metrics-table td:first-child {
        font-weight: bold;
        text-align: left; /* Align the labels to the left */
    }
</style>

<p>You have completed the practice session. Here is a summary of your performance:</p>

<table class="metrics-table">
    <tr>
        <th>Metrics</th>
        {% for period in display_game_history %}
            <th>Period {{ period.period }}</th>
        {% endfor %}
    </tr>
    <tr>
        <td>Leftover Inventory</td>
        {% for period in display_game_history %}
            <td>{{ period.starting_inventory }}</td>
        {% endfor %}
    </tr>
    <tr>
        <td>Order Quantity</td>
        {% for period in display_game_history %}
            <td>{{ period.order_quantity }}</td>
        {% endfor %}
    </tr>
    <tr>
        <td>Demand Quantity (realized)</td>
        {% for period in display_game_history %}
            <td>{{ period.demand_quantity }}</td>
        {% endfor %}
    </tr>
    <tr>
        <td>Profit</td>
        {% for period in display_game_history %}
            <td>${{ period.profit }}</td>
        {% endfor %}
    </tr>

</table>



<h3>The actual game will start on the next page. You will go through 36 total rounds  </h3>

<h3>The cost and demand parameters of this game are different from the practice session, please make sure you pay attention to these parameters. </h3>

<h3>Remember, you are being paid based off of your performance of a random round that will be revealed at the end. </h3>

<h3>If you'd like to review the instructions again, you can find them <a href="https://drive.google.com/file/d/1-yvxDshfGLaErb1bQ4bdryTFzm7zhHc6/view?usp=sharing" target="_blank">here</a>.
</h3>

{{ next_button }}

{{ endblock }}