{% 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 der nächsten Seite bitten wir Sie, sich für einen von zwei Snacks zu entscheiden.
    Bitte werfen Sie jetzt die Münze an Ihrem Platz ein Mal: 
</p>
<b>Wenn die Münze Kopf zeigt, klicken sie bitte den linken Snack an und sonst den rechten.</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 %}