{% extends "global/Page.html" %}
{% load otree static %}
{% block title %}
    Choose a food-menu pair
{% endblock %}
{% block content %}

<style>

div.remind {
  border: 3px dashed blue;
  text-align: center;
}
div.opt1 {
  border: 2px solid black;
  text-align: center;
}

div.opt2 {
  border: 2px solid black;
  text-align: center;
}

ul { display: inline-block; text-align: left; }



</style>




<div class = "remind">
    <h3>Reminder</h3>

<p> In this stage of the experiment, you need to select a food-menu pair. <br>
    If Part 2 is chosen for payment, there is a <b>1 in 2</b> (50%) chance  that you will have to complete the food-menu pair you choose on this page. <br>
    Please think carefully about your choice, as it could <b>affect</b> the food you eat at the second session!<br>
</p>
</div>

<br>

<p>
    You must pick one of the following options:
</p>


<div class = "opt1">
    <h4>Option 1</h4>
    {{ include 'Choice/Post_Opt1.html'}}
</div>

<br>
<div class = "opt2">
    <h4>Option 2</h4>
    {{ include 'Choice/Post_Opt2.html'}}
</div>

<br>
<p>
</p>
    {% formfield player.Control_Task_Choice label="Please select one of the above options"
%}



    {% next_button %}

<details>
    <summary>Click here if you'd like to see the meal descriptions.</summary>
    {{ include 'Choice/Food_Descriptions.html'}}

</details>


{% endblock %}