{% extends "global/Page.html" %}
{% load otree %}

{% block title %}
    Fußball Akademie
{% endblock %}




{% block content %}

{{ form.five_scarce.errors }}

{{ form.five_scarce_answer_mask.errors }}

{% if player.five_scarce == player.five_scarce1_1 %}
<input type="hidden" name="five_scarce_answer_mask" id="five_scarce_answer_mask" value = {{ five_mask1 }} />
<input type="hidden" name="five_scarce_answer_mean" id="five_scarce_answer_mean" value = {{ five_mask1_value }} >
{% endif %}

{% if player.five_scarce == player.five_scarce1_2 %}
<input type="hidden" name="five_scarce_answer_mask" id="five_scarce_answer_mask" value = {{ five_mask2 }} />
<input type="hidden" name="five_scarce_answer_mean" id="five_scarce_answer_mean" value = {{ five_mask2_value }} >

{% elif player.five_scarce == player.five_scarce1_3 %}
<input type="hidden" name="five_scarce_answer_mask" id="five_scarce_answer_mask" value = {{ five_mask3 }} />
<input type="hidden" name="five_scarce_answer_mean" id="five_scarce_answer_mean" value = {{ five_mask3_value }} >

{% elif player.five_scarce == player.five_scarce1_4 %}
<input type="hidden" name="five_scarce_answer_mask" id="five_scarce_answer_mask" value = {{ five_mask4 }} />
<input type="hidden" name="five_scarce_answer_mean" id="five_scarce_answer_mean" value = {{ five_mask4_value }} >

{% elif player.five_scarce == player.five_scarce1_5 %}
<input type="hidden" name="five_scarce_answer_mask" id="five_scarce_answer_mask" value = {{ five_mask5 }} />
<input type="hidden" name="five_scarce_answer_mean" id="five_scarce_answer_mean" value = {{ five_mask5_value }} >
{% endif %}


{% endblock %}

{% block scripts %}
<style>
/* HIDE RADIO */
.hiddenradio [type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
</style>

<style>
/* IMAGE STYLES */
.hiddenradio [type=radio] + img {
  cursor: pointer;
}
</style>

<style>
/* CHECKED STYLES */
.hiddenradio [type=radio]:checked + img {
  outline: 4px solid #f00;
}
</style>

<style>
.row{
    position: relative;
    width: 100%;
    height: 100%;
}
</style>

<style>
.playercard{
    position: relative;
    top:0px;
    left:0px;
}
</style>

<style>
.playerstats{
    position: absolute;
    top:0px;
    left:0px;
}
</style>



{% endblock %}