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

{{ block content }}


<style>
    /* Main Page Container */
    .page-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

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

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

    /* Content Container for Table and Image */
    .content-container {
        display: flex;
        justify-content: center;
        align-items: right;
        gap: 40px; /* Space between table and image */
    }

    /* Parameter Table Styles */
    .parameter-table {
        border-collapse: collapse; /* Ensures borders don’t double */
        width: auto; /* Adjusts the table width to fit content */
    }
    .parameter-table th, .parameter-table td {
        border: 1px solid black; /* Adds borders around cells */
        padding: 8px;
        text-align: left; /* Aligns text to the left */
    }

    /* Image Container */
    .image-container h3 {
        text-align: center;
        font-size: 18px; /* Reduced font size for the title */
        font-weight: bold;
        margin-bottom: 10px;
    }

    /* Additional Content Below Table and Image */
    .extra-content {
        margin-top: 30px;
    }

    /* 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>

<!-- Main Page Container -->
<div class="page-container">
    <!-- Header Section for Title and Game Round -->
    <h2>Decision Page, Round {{ display_round }}/12</h2>

    <!-- Content Container for Table and Image Side by Side -->
    <div class="content-container">
        <!-- Parameter Table -->
        <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>

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

    <!-- Metrics Table (Game History) -->
{% if game_history %}
<h3>Summary of key metrics of 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>Leftover Inventory</td>
        {% for data in game_history %}
            <td>{{ data.starting_inventory|default:"" }}</td>
        {% endfor %}
    </tr>
    <tr>
        <td>Order Quantity</td>
        {% for data in game_history %}
            <td>{{ data.order_quantity|default:"" }}</td>
        {% endfor %}
    </tr>
    <tr>
        <td>Actual Demand Quantity</td>
        {% for data in game_history %}
            <td>{{ data.demand_quantity|default:"" }}</td>
        {% endfor %}
    </tr>
    <tr>
        <td>Profit</td>
        {% for data in game_history %}
            <td>${{ data.profit|default:"" }}</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 }}