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

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




{% block content %}

{{ form.errors }}

{% if player.lottery1_4 == 1 %}
<input type="hidden" name="lottery1_player" id="lottery1_player" value = {{ lottery1_4_img }} />
<input type="hidden" name="lottery1_mask" id="lottery1_mask" value = {{ lottery1_4_mask }} />
<input type="hidden" name="lottery1_value" id="lottery1_value" value = {{ lottery1_4_value }} />

<p>
  Sie haben den folgenden Spieler erfolgreich zu Ihrem Team hinzugefügt! 
</p>

<div class="hiddenradio">
    <label class="row justify-content-center">      
      <div style ="position: relative;">
    <img src="{% static lottery1_4_img %}" class="playercard" style="width: 150px; height: 225px;">
    <img src="{% static lottery1_4_mask %}" class="playerstats" style="width: 150px; height: 225px;">
      </div>
    </label>
</div>

{% next_button %}
{% endif %}

{% if player.lottery1_1 == 0 and player.lottery1_2 == 0 and player.lottery1_3 == 0 and player.lottery1_4 == 0 %}
    <p>
        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>


<p>
  <b>Ihre Scouts informieren Sie, dass Sie alle Möglichkeiten ausgeschöpft haben und dass Sie den folgenden Spieler in Ihr Team aufnehmen müssen! </b>
</p>

<div class="hiddenradio">
    <label class="row justify-content-center">      
      <div style ="position: relative;">
    <img src="{% static lottery1_5_img %}" class="playercard" style="width: 150px; height: 225px;">
    <img src="{% static lottery1_5_mask %}" class="playerstats" style="width: 150px; height: 225px;">
      </div>
    </label>
</div>
<p>
<div>
  <input type="hidden" name="lottery1_5" id="lottery1_5" value="True" /> 
  <input type="hidden" name="lottery1_player" id="lottery1_player" value = {{ lottery1_5_img }} />
  <input type="hidden" name="lottery1_mask" id="lottery1_mask" value = {{ lottery1_5_mask }} />
  <input type="hidden" name="lottery1_value" id="lottery1_value" value = {{ lottery1_5_value }} />
</div>
</p>

{% next_button %}

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

{% endif %}




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