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

{% block title %}
Snacks
{% endblock %}

{% block styles %}
<link href="{% static "css/General.css" %}" rel="stylesheet" />

<style type="text/css">
body {
    background-color: black;
    color: white;
}

#content{
  width:100%;
  heigth:500px;
  margin 0 10% 0 10%;
}

.compare{
  float:left;
  width:45%;
  margin-left:2.5%;
  margin-right:2.5%;
}

.pictures{
  max-width:100%;
  heigth:auto;
}

label > input{ /* HIDE RADIO */
  visibility: hidden; /* Makes input not-clickable */
  position: absolute; /* Remove input from document flow */
}
label > input + img{ /* IMAGE STYLES */
  cursor:pointer;
  border:8px solid transparent;
}
label > input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */
  border:8px solid #0f0;
}

div.count {
    margin-top: 350px;
}
.nextbutton {
    text-align: center;
}
</style>
{% endblock %}

{% block content %}
{% if player.treat == "coin" %}
  <p> Die Münze hat für Sie diesen Snack gewählt:
  </p>
  {% if offer_1_pre == 1 %}
    <img class="pictures" src="{% static image_path1 %}">
  {% else %}
    <img class="pictures" src="{% static image_path2 %}">
  {% endif %}
  <p> Jetzt zählt es:
  </p>
{% else %}
  {% if player.treat == "coin" %}
    <p> Sie haben auf der letzten Seite diesen Snack gewählt:
    </p>
    {% if offer_1_pre == 1 %}
      <img class="pictures" src="{% static image_path1 %}">
    {% else %}
      <img class="pictures" src="{% static image_path2 %}">
    {% endif %}
    <p> Jetzt zählt es:
    </p>
  {% endif %}
{% endif %}
<p> Auf dieser Seite bitten wir Sie, sich für einen von zwei Snacks zu entscheiden.
    Sollte diese Seite dann für Sie zur Auszahlung ausgewählt werden, erhalten Sie den von Ihnen gewählten Snack.
</p>
<b>Bitte wählen Sie einen der beiden folgenden Snacks aus:</b>
  <!--
Documentation on how to write a django template here:
https://docs.djangoproject.com/en/1.8/ref/templates/language/

Bootstrap comes pre-loaded, so you can use any Bootstrap elements:
http://getbootstrap.com/components/

-->


<input type="hidden" name="offer_1" value="{{snack1}}" id="offer_1"/>
<input type="hidden" name="offer_2" value="{{snack2}}" id="offer_2"/>


<form>
<div id="content">

<div class="compare">
<label for="s1">
  {{image1 | safe}}
  <img class="pictures" src="{% static image_path1 %}">
</label>
</div>

<div class="compare">
<label for="s2">
  {{image2 | safe}}
  <img class="pictures" src="{% static image_path2 %}">
</label>
</div>

</div>
</form>

<br />
<br/>
  <div class="nextbutton">
    {% next_button %}
</div>

{% endblock %}