{{ block styles }} 
<style>
    body {
        text-align: left;
    }

    .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: left;
    }

    .form-group {
        margin: 10px;
    }



    .week-separator {
        width: 80%;
        border-top: 1px solid #000;
        margin: 10px 0;
    }

    
    table {
        border-collapse: collapse;
        width: 100%;
        margin-top: 20px;
    }

    th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

    th {
        background-color: #f2f2f2;
    }
    .form-group {
        margin: 2px;
        width: 127px; /* Adjust the width of the form-group */
    }

    label {
        font-size: 16px;
    }
</style>
{{ endblock }}

{{ block title }}Prediction Case 3{{ endblock }}
{{ block content }}
<p>Your listing has 4 bedrooms, 4.2 ratings, and has received 250 reviews. You want to price your 
    listing the 12th week of the year. Your set price should be greater than 120$ for your place. Which is the cost of cleaning and utilities
for each day someone stays at your place.</p>
<p>You have access to the pricing of 4 of your neighbours for this week.</p>
<p>The following graph shows some of your neighbors prices.</p>

<P><img src="https://priceselectionmodel-294dcf7a2bae.herokuapp.com/static/p1_m3.png" alt="neighbors' prices"></P>

{% if player.instruction_version == 'b' %}
<table class="table">
    <thead>
        <tr>
            <th>Day</th>
            <th>Algorithm Suggested Price</th>
            
        </tr>
    </thead>
    <tbody>
        {% for item in data %}
            <tr>
                <td>{{ item.day }}</td>
                <td>{{ item.price3 }}</td>

            </tr>
        {% endfor %}
    </tbody>
</table>

{% endif %}


{% if player.instruction_version == 'c' %}
    <p>In addition to your neighbors prices you also have access to a price prediction from a model 
        trained by the platform and how certain the model is for the prediction. </p>


    <table class="table">
        <thead>
            <tr>
                <th>Day</th>
                <th>Algorithm Suggested Price</th>
                <th>Chance of Booking (%)</th>
                
            </tr>
        </thead>
        <tbody>
            {% for item in data %}
                <tr>
                    <td>{{ item.day }}</td>
                    <td>{{ item.price3 }}</td>
                    
                    <td>{{ item.probability3 }}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
{% endif %}

<p>Please enter your predictions below:</p>
<div class="container">
    <div class="form-group">
        <label for="data_Mon_3">Mon</label>
        <input type="number" id="data_Mon_3" name="data_Mon_3" required>
    </div>

    <div class="form-group">
        <label for="data_Tue_3">Tue</label>
        <input type="number" id="data_Tue_3" name="data_Tue_3" required>
    </div>

    <div class="form-group">
        <label for="data_Wed_3">Wed</label>
        <input type="number" id="data_Wed_3" name="data_Wed_3" required>
    </div>

    <div class="form-group">
        <label for="data_Thu_3">Thu</label>
        <input type="number" id="data_Thu_3" name="data_Thu_3" required>
    </div>

    <div class="form-group">
        <label for="data_Fri_3">Fri</label>
        <input type="number" id="data_Fri_3" name="data_Fri_3" required>
    </div>

    <div class="form-group">
        <label for="data_Sat_1">Sat</label>
        <input type="number" id="data_Sat_3" name="data_Sat_3" required>
    </div>

    <div class="form-group">
        <label for="data_Sun_1">Sun</label>
        <input type="number" id="data_Sun_3" name="data_Sun_3" required>
    </div>
</div>
<p></p>
{{ next_button }}

{{ endblock }}