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

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




{% block content %}

    <p>
    	In dieser Runde verpflichten Sie einen Mittelstürmer für Ihr Team (rot markiert)!
    </p>

    <p>
    Zu diesem Zweck präsentieren Ihnen Ihre Scouts fünf Spieler  <strong>nacheinander</strong>, das heißt, dass Sie immer nur einen Spieler sehen. Wenn Ihnen ein Spieler vorgestellt wird, müssen Sie sofort entscheiden, ob Sie ihn einstellen oder nicht. Sobald Sie eine Entscheidung getroffen haben, können Sie diese nicht mehr rückgängig machen. Wenn Sie die ersten vier Spieler abgelehnt haben, wird der fünfte und damit letzte Spieler automatisch in Ihr Team aufgenommen!
  	</p>

  	<p>
        Ihre aktuelle durchschnittliche Teamstärke beträgt {{ 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 "anon_red.png" %}" class = "playercard" 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 risk1_player %}" class = "playercard" style="width:100px; height:150px;">
      <img src="{% static risk1_mask %}" class = "playerstats" 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 risk2_player %}" class = "playercard" style="width:100px; height:150px;">
      <img src="{% static risk2_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 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 %}