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

{% block title %}
Wohltätigkeitseinrichtung
{% 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%;
}

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


.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 {
    margin-top:250px;
    text-align: center;
}
</style>
{% endblock %}

{% block content %}
<p>Auf dieser Seite haben Sie Möglichkeit eine Spende zu veranlassen. Sofern diese Seite für Sie für die Auszahlung ausgewählt wird,
wird die Experimentleitung 10 Euro an die von Ihnen gewählte Wohltätigkeitseinrichtung spenden.</p>
<b>Bitte wählen Sie daher eine der beiden folgenden Einrichtungen aus:<br /><br /></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="charityoffer1" value="{{charity1}}" id="charity1"/>
<input type="hidden" name="charityoffer2" value="{{charity2}}" id="charity2"/>
{{ form.charityoffer1.errors }}
{{ form.charityoffer2.errors }}


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

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

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

{% endblock %}