{{ 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;
        gap: 20px; /* Adjusted spacing between table and image */
    }

    /* Parameter Table Styles */
    .parameter-table {
        border-collapse: collapse; /* Prevents double borders */
        width: 300px; /* Sets a fixed width */
    }
    .parameter-table td {
        border: 1px solid black; /* Borders around cells */
        padding: 5px; /* Reduced padding for less space */
        text-align: center; /* Center-aligns text */
        font-size: 16px; /* Consistent font size */
    }
    .parameter-table td:first-child {
        font-weight: bold; /* Bold for labels */
        text-align: left; /* Aligns labels to the left */
    }

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

    /* Metrics Table Styles */
    .metrics-table {
        width: 100%;
        border-collapse: collapse;
    }
    .metrics-table th, .metrics-table td {
        border: 1px solid black;
        padding: 5px;
        text-align: center;
    }
    .metrics-table th {
        font-weight: bold;
        background-color: #f2f2f2;
    }
    .metrics-table td:first-child {
        font-weight: bold;
        text-align: left;
    }
</style>

<!-- Main Page Container -->
<div class="page-container">
    <!-- Header Section for Title and Game Round -->
    <h2>Decision Page, Practice Round</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>${{practice_retail_cost}}/unit/round</td></tr>
            <tr><td>Purchase Cost</td><td> ${{practice_wholesale_cost}}/unit/round</td></tr>
            <tr><td>Holding Cost</td><td>${{practice_holding_cost}}/unit/round</td></tr>
            <tr><td>Demand Distribution</td><td>N~(100, {{ 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="Forecast Demand Distribution" style="width:400px; height:auto;"> <!-- Adjusted image size -->
        </div>
    </div>

    <!-- Metrics Table (Game History) -->
    {% if game_history %}
    <h3>Summary of key metrics of prior periods</h3>
    <table class="metrics-table">
        <tr>
            <th></th>
            {% for data in game_history %}
                <th>Round {{ data.period }}</th>
            {% endfor %}
        </tr>
        <tr>
            <td>Leftover 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>Demand Quantity (realized)</td>
            {% for data in game_history %}
                <td>{{ data.demand_quantity }}</td>
            {% endfor %}
        </tr>
        <tr>
            <td>Profit</td>
            {% for data in game_history %}
                <td>${{ data.profit }}</td>
            {% endfor %}
        </tr>e
    </table>
    {% else %}
        <p></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>

<p>If you'd like to review the instructions in text form, you can find them <a href="https://drive.google.com/file/d/1an4m4aCrY71bhE4HsHZQVQWIljEmt7OH/view?usp=sharing" target="_blank">here</a>.</p>
<p>

{{ formfields }}
{{ next_button }}




{{ endblock }}