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

{% block title %}
Jobs
{% 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 {
    text-align: center;
}
</style>
{% endblock %}

{% block content %}
<p>Stellen Sie sich vor, Sie hätten nun die Chance einen der beiden folgenden neuen Jobs anzunehmen.</p>
<b>Für welchen der beiden Jobs würden Sie sich entscheiden?<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="joboffer1" value="{{job1}}" id="job1"/>
<input type="hidden" name="joboffer2" value="{{job2}}" id="job2"/>
{{ form.joboffer1.errors }}
{{ form.joboffer2.errors }}


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

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

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

{% endblock %}