{% 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 sample-menu pair. <br>
    If Part 2 is chosen for payment, then there is a <b>1 in 2</b> (50%) chance  that you will have to complete the sample-menu pair you choose on this page. <br>
    Please think carefully about your choice, as it could <b>affect</b> the sample and meal you will eat in the future!<br>
</p>
</div>

<br>

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


<div class = "opt1">
    <h4>Option 1</h4>
<p>
    Eat a sample of <strong>{{Good_Task}}</strong> at the second session. <br>
    After eating a sample of <strong>{{Good_Task}}</strong>, you must choose <strong>one</strong> of the following meals to eat at the third session:
</p>
    <ul>
        <li>{{remaining_tasks.0}} </li>
        <li>{{remaining_tasks.1}} </li>
    </ul>
</div>

<br>
<div class = "opt2">
    <h4>Option 2</h4>
<p>
    Eat a sample of <strong>{{Bad_Task}}</strong> at the second session. <br>
    After eating a sample of <strong>{{Bad_Task}}</strong>, you must choose <strong>one</strong> of the following meals to eat at the third session:
</p>
    <ul>
        <li>{{remaining_tasks.0}} </li>
        <li>{{remaining_tasks.1}} </li>
    </ul>
</div>

<br>
<p>
</p>
    {% formfield player.Blunder_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 %}