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

{{ block content }}

<style>
    .page-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .header {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .subheader {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
    }

    .content-container {
        display: flex;
        justify-content: center;
        align-items: right;
        gap: 40px;
    }

    .parameter-table {
        border-collapse: collapse;
        width: auto;
    }

    .parameter-table th, .parameter-table td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
    }

    .image-container h3 {
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .extra-content {
        margin-top: 30px;
    }

    .metrics-table {
        width: 100%;
        border-collapse: collapse;
    }

    .metrics-table th, .metrics-table td {
        border: 1px solid black;
        padding: 8px;
        text-align: center;
    }

    .metrics-table th {
        font-weight: bold;
        background-color: #f2f2f2;
    }

    .metrics-table td:first-child {
        font-weight: bold;
        text-align: left;
    }
</style>

<div class="page-container">

    <h2>Decision Page, Round {{ display_round }}/36</h2>

    <div class="content-container">
        <table class="parameter-table">
            <tr><td>Sales Price</td><td>$15.00 / unit / round</td></tr>
            <tr><td>Purchase Cost</td><td>$6.00 / unit / round</td></tr>
            <tr><td>Holding Cost</td><td>$1.00 / unit / round</td></tr>
            <tr><td>Forecasted Demand Distribution</td><td>N~(500, {{ current_demand_std }})</td></tr>
        </table>

        <div class="image-container">
            <h3>Forecasted Demand Probability Distribution</h3>
            <img src="{% static demand_image_path %}" alt="Demand Distribution" style="width:400px; height:auto;">
        </div>
    </div>

    {% if game_history %}
        <h3>Summary of key metrics from prior periods</h3>
        <table class="metrics-table">
            <tr>
                <th>Metrics</th>
                {% for data in game_history %}
                    <th>Period {{ data.period }}</th>
                {% endfor %}
            </tr>
            <tr>
                <td>Starting Inventory</td>
                {% for data in game_history %}
                    <td>{{ data.starting_inventory}}</td>
                {% endfor %}
            </tr>
            <tr>
                <td>Order Quantity</td>
                {% for data in game_history %}
                    <td>{{ data.order_quantity }}</td>
                {% endfor %}
            </tr>
            <tr>
                <td>Actual Demand Quantity</td>
                {% for data in game_history %}
                    <td>{{ data.demand_quantity }}</td>
                {% endfor %}
            </tr>
            <tr>
                <td>Profit</td>
                {% for data in game_history %}
                    <td>{% if data.profit != '' %}${{ data.profit }}{% endif %}</td>
                {% endfor %}
            </tr>
        </table>
    {% else %}
        <p>No history to show yet.</p>
    {% endif %}

</div>

<h3>You have {{ starting_inventory }} units leftover from the last round. How much would you like to order for this round?</h3>

{{ formfields }}
{{ next_button }}

{{ endblock }}