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

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




{% block content %}
    <p>
      Ihr Team ist nun komplett! 
    </p>
    <p>
      Ihr Team hat eine durchschnittliche Stärke von {{ team_endowment }}.  

      {% if player.probability == "probabilistic" %}
      Das heißt, dass Sie eine {{ team_endowment }} % Chance haben, gegen das gegnerische Team zu gewinnen. Klicken Sie auf den "Weiter"-Button, um das Resultat des Spiels zu sehen! 
      {% endif %}
      
      {% if player.probability == "certain" %}
      
      Das heißt, dass Sie {{ team_endowment_cent }} € verdient haben.
      {% endif %}
    </p>


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