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

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




{% block content %}

    <p>
    	Sie haben erfolgreich einen Spieler mit durchschnittlicher Stärke von {% if player.risk2 %} {{ risk2_given_value }} {% else %} {{risk2_new_value }} {% endif %} in Ihre Mannschaft geholt!
    </p>
{{ form.errors }}

{% if player.risk2 %}
<input type="hidden" name="risk2_player" id="lottery1_player" value = {{ risk2_given_player }} />
<input type="hidden" name="risk2_mask" id="lottery1_mask" value = {{ risk2_given_mask }} />
<input type="hidden" name="risk2_value" id="lottery1_value" value = {{ risk2_given_value }} />

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

{% else %}
<input type="hidden" name="risk2_player" id="lottery1_player" value = {{ risk2_new_player }} />
<input type="hidden" name="risk2_mask" id="lottery1_mask" value = {{ risk2_new_mask }} />
<input type="hidden" name="risk2_value" id="lottery1_value" value = {{ risk2_new_value }} />
<div class="row justify-content-center">
      <label>      
      <div style ="position: relative;">
      <img src="{% static risk2_new_player %}" class = "playercard" style="width: 150px; height: 225px;">
      <img src="{% static risk2_new_mask %}" class = "playerstats" style="width: 150px; height: 225px;">
      </div>
    </label>
</div>

{% endif %}

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