{{ 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 1{{ endblock }}
{{ block content }}
<p>Your listing has 4 bedrooms and 4.2 ratings. You want to price your listing the 7th 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 for this week.</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/set1.png" alt="neighbors' prices"></P>

{% if player.instruction_version == 'b' %}
Here is the model's price predicition for your place. Remember the model is uncertain about your booking cost.
<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.price1 }}</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>
    Here is the model's price predicition for your place. Remember the model is uncertain about your booking cost.
    


    <table class="table">
        <thead>
            <tr>
                <th>Day</th>
                <th>Algorithm Suggested Price</th>
                <th>Probability of Booking</th>
                
            </tr>
        </thead>
        <tbody>
            {% for item in data %}
                <tr>
                    <td>{{ item.day }}</td>
                    <td>{{ item.price1 }}</td>
                    
                    <td>{{ item.probability1 }}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
{% endif %}


{% if player.instruction_version == 'd' %}

    <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>
        <p>The model is uncertain about your booking cost. However the model is presenting to you a range of 
            prices and their respective probability of booking and you can choose among them.</p>


    <table class="table">
        <thead>
            <tr>
                <th>Day</th>
                <th>Algorithm Suggested Price Range</th>
                <th>Probability of Booking Range</th>
                
            </tr>
        </thead>
        <tbody>
            {% for item in data %}
                <tr>
                    <td>{{ item.day }}</td>
                    <td>{{ item.price_range1 }}</td>
                    
                    <td>{{ item.prob_range1 }}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
{% endif %}


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

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

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

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

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

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

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



{{ next_button }}

{{ endblock }}