{% block styles %}
<link href="{% static 'sliders.css' %}" rel="stylesheet" />
{% endblock %}

{{ block title }}
Your Choice
{{ endblock }}

{{ block content }}

<p>You are player A. You have {{ C.ENDOWMENT_AGENT }}.</p>

{{ if group.minimum_amount == "Yes" }}
<p>Player B chose to set a minimum amount of {{ player.control }}. Each slider counts as 5 points, therefore at least four
    sliders have to be moved to the middle. Please move the sliders to state your choice. You have one try per slider to put the dot in the middle.</p>
{{ endif }}

{{ if group.minimum_amount == "No" }}
<p>Player B chose not to set a minimum amount of {{ player.control }}. Each slider counts 5 points. Please move the sliders
    to state your choice. You have one try per slider to put the dot in the middle.</p>
{{ endif }}

<div class="d-flex flex-column align-items-center">
    <canvas id="canvas" class="m-2"></canvas>
</div>
<br>

{{ if group.minimum_amount == "No"}}
<button class="otree-btn-next btn btn-primary" id="next_button">Next</button>
{{ endif }}

{{ if group.minimum_amount == "Yes"}}
<button class="otree-btn-next btn btn-primary" id="next_button" disabled>Next</button>
{{ endif }}

{{ endblock }}

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