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



{% block styles %}
<style>

.wrapper {
  max-width: 1024px;
  margin: 0 auto;
  font: 1.2em Helvetica, arial, sans-serif;
}
.wrapper > * {
  border: 2px groovy #f08c00;
  background-color: #f2f2f2;
  border-radius: 2px;
  padding: 15px;
  float: right;

}
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: right;
  padding: 80px;
}

.column3 {
  float: center;
  width: 33.33%;
  padding: 100px;
  height: 220px;
}


.column4 {
  float: right;
  padding-right: 44px;
  padding-left: 39px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}

.column2 {
  float: right;
  padding-right: 140px;
  padding-left: 113px;
}



</style>
{% endblock %}

{% block title %}

Welcome to the United States of America
<img src= "{% static 'dcc/flagUS_jpeg.jpg'%}" alt="USflag"  height="50px">

{% endblock %}

{% block content %}

<p>

    On {{ tomorrow}}, you landed at {{ player.destination_1 }}. While walking at the airport, you decide to spend part of the budget you received.
    
    </p>
<br>
<p>Please choose the item you prefer to purchase:
</p>


<div class-="wrapper">
<div class="row">
  <div class="column">
    <img src= "{% static 'dcc/book.jpg'%}" alt="Picture book" height="160px">


  </div>
  <div class="column">
    <img src= "{% static 'dcc/tshirt2.jpg'%}" alt="Picture tshirt" height="160px">

  </div>
  <div class="column">
     <img src= "{% static 'dcc/meal.jpg'%}" alt="Picture Meal" height="180px">

  </div>
</div>

<div class="row">
    {% for choice in form.purchase_1 %}

    <div class="column2" >{{ choice }}</div>
     {% endfor %}
</div>
<div class="row">
  <div class="column4">

<p> price: US Dollar (USD) 36.99 </p>
  </div>
  <div class="column4">
<p> price: US Dollar (USD) 36.99 </p>
  </div>
  <div class="column4">
<p> price: US Dollar (USD) 36.99 </p>
  </div>

</div>
</div>
<br>
<br>

{% next_button %}

{% endblock %}