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

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




{% block content %}
       
    <p>
       Ihre aktuelle durchschnittliche Teamstärke ist {{ team_endowment }}.

        {% if probability == "probabilistic" %}
        Das heißt, dass Ihre aktuelle Chance gegen das gegnerische Team zu gewinnen, bei {{ team_endowment }}% liegt.
        {% endif %} 
        {% if player.probability == "certain" %}
        Das heißt, dass Sie momentan {{ team_endowment_cent }}€ zusätzlich erhalten.
        {% endif %}
    </p>

    <p>
        Ihr Scout schlägt Ihnen fünf Mittelfeldspieler für Ihr Team vor. Bitte wählen Sie einen Spieler!
    </p>

{{ form.errors }}



<div class="hiddenradio">
  <div class = "row justify-content-center" >
    <label>      
      <div style ="position: relative;">
      <input type="radio" class="five_scarce2" name="five_scarce2" value={{ img_five_scarce2_1 }}>
      <img src="{% static img_five_scarce2_1 %}" class = "playercard" style="width: 150px; height: 225px;"/>
      <img src="{% static five_mask2_1 %}" class = "playerstats" style="width: 150px; height: 225px;"/>
      </div>
    </label>
    <label>      
      <div style ="position: relative;">
      <input type="radio" class="five_scarce2" name="five_scarce2" value= {{ img_five_scarce2_2 }}>
      <img src="{% static img_five_scarce2_2 %}" class = "playercard" style="width:150px; height:225px;" />
      <img src="{% static five_mask2_2 %}" class = "playerstats" style="width: 150px; height: 225px;"/>
      </div>
    </label>
    <label>      
      <div style ="position: relative;">
      <input type="radio" class="five_scarce2" name="five_scarce2" value= {{ img_five_scarce2_3 }}>
      <img src="{% static img_five_scarce2_3 %}" class = "playercard" style="width:150px; height:225px;">
      <img src="{% static five_mask2_3 %}" class = "playerstats" style="width: 150px; height: 225px;"/>
      </div>
    </label>
    <label>      
      <div style ="position: relative;">
      <input type="radio" class="five_scarce2" name="five_scarce2" value= {{ img_five_scarce2_4 }}>
      <img src="{% static img_five_scarce2_4 %}" class = "playercard" style="width:150px; height:225px;">
      <img src="{% static five_mask2_4 %}" class = "playerstats" style="width: 150px; height: 225px;"/>
      </div>
    </label>
    <label>
      <div style ="position: relative;">
      <input type="radio" class="five_scarce2" name="five_scarce2" value= {{ img_five_scarce2_5 }}>
      <img src="{% static img_five_scarce2_5 %}" class = "playercard" style="width:150px; height:225px;">      
      <img src="{% static five_mask2_5 %}" class = "playerstats" style="width: 150px; height: 225px;"/>
      </div>
    </label>
  </div>
</div>


<p>
  {% next_button %}
</p>

<details>
<summary><strong>Erklärung für Abkürzungen</strong></summary>
<div>Körperliche Stärke (STR)</div>
<div>Schusskraft (SHO)</div>
<div>mentale Stärke (MEN) </div>
<div>Passen (PAS)</div>
</details>


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