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

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




{% block content %}

{{ form.errors }}

<p>
   Das war ein ordentlicher Start für Ihre Managerkarriere. Der Clubpräsident hat beschlossen, den Spieler einzustellen, <strong>den Sie am genauesten bewertet haben</strong>.
</p>

{% if rating_deviation_1 == min_deviation %}
<input type="hidden" name="rating_join_player" id="rating1_img" value = {{ player.rating1_img }} />
<input type="hidden" name="rating_join_mask" id="rating1_mask" value = {{ player.rating1_mask }} />
<input type="hidden" name="rating_join_value" id="rating1_value" value = {{ rating1_value }} />

<div class="hiddenradio">
    <label class="row justify-content-center">       
      <div style ="position: relative;">
    <img src="{% static player.rating1_img %}" class="playercard" style="width: 150px; height: 225px;">
    <img src="{% static player.rating1_mask %}" class="playerstats" style="width: 150px; height: 225px;">
      </div>
    </label>
</div>

{% elif rating_deviation_2 == min_deviation %}
<input type="hidden" name="rating_join_player" id="rating2_img" value = {{ player.rating2_img }} />
<input type="hidden" name="rating_join_mask" id="rating2_mask" value = {{ player.rating2_mask }} />
<input type="hidden" name="rating_join_value" id="rating2_value" value = {{ rating2_value }} />

<div class="hiddenradio">
    <label class="row justify-content-center">       
      <div style ="position: relative;">
    <img src="{% static player.rating2_img  %}" class="playercard" style="width: 150px; height: 225px;">
    <img src="{% static player.rating2_mask %}" class="playerstats" style="width: 150px; height: 225px;">
      </div>
    </label>
</div>

{% else %}
<input type="hidden" name="rating_join_player" id="rating3_img" value = {{ player.rating3_img }} />
<input type="hidden" name="rating_join_mask" id="rating3_mask" value = {{ player.rating3_mask }} />
<input type="hidden" name="rating_join_value" id="rating3_value" value = {{ rating3_value }} />

<div class="hiddenradio">
    <label class="row justify-content-center">       
      <div style ="position: relative;">
    <img src="{% static player.rating3_img %}" class="playercard" style="width: 150px; height: 225px;">
    <img src="{% static player.rating3_mask %}" class="playerstats" style="width: 150px; height: 225px;">
      </div>
    </label>
</div>

{% endif %}

{% next_button %}




{% 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 %}