{% 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 %}
<p> Sie gehören zur Gruppe  {{ player.treat }}.
</p>
<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 %}