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

{{ block content }}
<style>
.page-header{
text-align:center;
}
.otree-body{
text-align: center;
}
</style>
<br>

We now want you to reflect on all your previous choices, and which lake you think got you most fish.<br><br>
<p>Which are you likely to get the most fish from?</p>

<style>
    .mgslider-wrapper {
        border-spacing: 10px;
    }
    .mgslider-limit {
        width: 10%;
        min-width: 75px;
        height: 40px;
        margin: 100px;
        text-align: center;
        background: #eee;
        border: 1px solid #888;
    }
    .mgslider-limit, .mgslider-value {
        font-variant-numeric: tabular-nums;
    }
    .mgslider-before {
        height: 16px;
        width: 100%;
        background: #1e5bff;
    }
    .mgslider-feedback {
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
</style>

{{ formfield_errors 'lake_slider' }}

<p style="font-size: large;"><span style="color:White;">_</span>Bagel<span style="color:White;">______________________________________________________________________________________</span>Pacman</p>


<div id="sliders_here"></div>

<script src="{{ static 'mgslider.js' }}"></script>

<script>

    $(document).ready(function (event) {
        slider2 = new mgslider("lake_slider", 0, 100, 1);
        slider2.print(document.getElementById("sliders_here"));
    });
</script>




<br><br>We want to get your advice for other players regarding the most profitable lake of the two.<br> <br>

<p>Which lake would <b>you recommend</b> to other players?</p>
<div style="
align-items: center;
justify-content: center;
display: flex;">
{{ formfield 'advice_give' }}
</div>
<br>
<br>
<div style="
align-items: center;
justify-content: center;
display: flex;">
    {{ formfield 'advice_rationale' }}
</div>
{{ next_button }}

{{ endblock }}