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

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




{% block content %}

    <p>
      Für die nächsten beiden Positionen hat Ihr Assistent zwei Spieler aus der Jugendmannschaft vorgeschlagen. Sie haben jedoch die Möglichkeit, stattdessen einen Spieler vom Transfermarkt in Ihr Team zu holen.
    </p>
    <p> 
      Leider sind sich Ihre Scouts nicht sicher über die tatsächliche Qualität der Spieler auf dem Transfermarkt. Stattdessen präsentieren Sie Ihnen eine Wahrscheinlichkeit für die Stärke des jeweiligen Spielers. 
    </p>

    <p>
 Wenn Sie sich entscheiden, den Spieler vom Transfermarkt einzustellen, wird seine Stärke aufgedeckt. Der von Ihnen gewählte Spieler wird Ihrem Team hinzugefügt und beeinflusst Ihre Teamstärke.             

        Ihre aktuelle durchschnittliche Teamstärke ist {{ team_endowment }}. <br /> 

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

{{ form.errors }}

<div class="hiddenradio">
  <div class="row justify-content-center" >
    <label>      
      <div style ="position: relative;">
      <img src="{% static pair_answer %}" class = "playercard" style="width:100px; height:150px;">
      <img src="{% static pair_answer_mask %}" class = "playerstats" style="width:100px; height:150px;">
      </div>
    </label>
    <label>      
      <div style ="position: relative;">
      <img src="{% static lottery1_player %}" class = "playercard" style="width:100px; height:150px;">
      <img src="{% static lottery1_mask %}" class = "playerstats" style="width:100px; height:150px;">
      </div>
    </label>
    <label>      
      <div style ="position: relative;">
      <img src="{% static pair2_answer %}" class = "playercard" style="width:100px; height:150px;">
      <img src="{% static pair2_answer_mask %}" class = "playerstats" style="width:100px; height:150px;">
      </div>
    </label>
  </div>
</div>
<div class="hiddenradio">
  <div class="row justify-content-center" >
    <label>      
      <div style ="position: relative;">
      <img src="{% static "anon_red.png" %}" class = "playercard" style="width:100px; height:150px;">
      </div>
    </label>
    <label>      
      <div style ="position: relative;">
      <img src="{% static five_scarce %}" class = "playercard" style="width:100px; height:150px;">
      <img src="{% static five_scarce_mask %}" class = "playerstats" style="width:100px; height:150px;">
      </div>
    </label>
    <label>      
      <div style ="position: relative;">
      <img src="{% static five_scarce2 %}" class = "playercard" style="width:100px; height:150px;">
      <img src="{% static five_scarce2_mask %}" class = "playerstats" style="width:100px; height:150px;">
      </div>
    </label>
    <label>      
      <div style ="position: relative;">
      <img src="{% static "anon_red.png" %}" class = "playercard" style="width:100px; height:150px;">
      </div>
    </label>
  </div>
</div>

<div class="hiddenradio">
  <div class="row justify-content-center" >
    <label>      
      <div style ="position: relative;">
      <img src="{% static endowment1 %}" class = "playercard" style="width:100px; height:150px;">
      <img src="{% static endowment1mask %}" class = "playerstats" style="width:100px; height:150px;">
      </div>
    </label>
    <label>      
      <div style ="position: relative;">
    <img src="{% static rating_join_player %}" class="playercard" style="width:100px; height:150px;">
    <img src="{% static rating_join_mask %}" class="playerstats" style="width:100px; height:150px;">
      </div>
    </label>
    <label>      
      <div style ="position: relative;">
      <img src="{% static endowment2 %}" class = "playercard" style="width:100px; height:150px;">
      <img src="{% static endowment2mask %}" class = "playerstats" style="width:100px; height:150px;">
      </div>
    </label>
  </div>
</div>
<div class="hiddenradio">
  <div class="row justify-content-center" >
    <label>      
      <div style ="position: relative;">
      <img src="{% static endowment3 %}" class = "playercard" style="width:100px; height:150px;">
      <img src="{% static endowment3mask %}" class = "playerstats" style="width:100px; height:150px;">
      </div>
    </label>
  </div>
</div>

<p>
  {% next_button %}
</p>
{% 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 %}