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

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




{% block content %}

    <p>
    	In dieser Runde werden Sie zwei Mittelfeldspieler (rot markiert) für Ihre Mannschaft auswählen! 
    </p>

    <p>
    	Ihr Scout wird Ihnen jeweils fünf Spieler für jede der beiden Positionen vorschlagen. Sie müssen dann von diesen fünf Spielern einen Spieler auswählen. Der Spieler wird Ihrem Team hinzufügt und wird Ihre Mannschaftsstärke beeinflussen.        

      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>

{{ 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 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 "anon_red.png" %}" class = "playercard" 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 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 %}