{{ block styles }}
    <link href="{{ static 'mpl_table/css/slider_input.css' }}" rel="stylesheet">
    <style>
        #refine-fields-container {
            display: none;
        }

        input[inputmode="decimal"] {
            max-width: 80px;
        }
        label[for^="id_refine-"] {
            font-weight: bold;
        }
    </style>
{{ endblock }}

{{ block scripts }}
    <script src="{{ static 'mpl_table/js/mpl_refine.js' }}"></script>
{{ endblock }}

{{ block title }}

    {{title}}
    
{{ endblock }}

{{ block content }}

    <p>
        Your answers indicate that:
    </p>
    <ul>
        {{ if player.left > 0 }}
            <li>
                If the price was <b>at {{ left }} or {{ left_direction }}</b>, {{ mpl_feedback.0 }},
            </li>
        {{ endif }}
        {{ if player.right > 0 }}
            <li>
                If the price was <b>at {{ right }} or {{ right_direction }}</b>, {{ mpl_feedback.1 }},
            </li>
        {{ endif }}
        {{ if has_indifference }}
            <li>
                If the price was
                <b>{{ if player.left > 0 }}{{ right_direction }} {{ left }}{{ endif }}
                {{ if player.left > 0 and player.right > 0 }} and {{ endif }}
                {{ if player.right > 0 }}{{ left_direction }} {{ right }}{{ endif }}</b>
                you wouldn't be sure.
            </li>
        {{ endif }}
    </ul>

    {{ formfield 'refine' }}

    <div id="refine-fields-container">
        {{ if player.left > 0 }}
            {{ include left_refined.url with params=left_refined.params }}
        {{ endif }}
        {{ if player.right > 0 }}
            {{ include right_refined.url with params=right_refined.params }}
        {{ endif }}
    </div>

    <p>
        <button class="btn btn-primary otree-btn-next">Confirm</button>
    </p>

{{ endblock }}