{{ extends 'global/Page.html' }}
{{ block title }}Lottery recap{{ endblock }}

{{ block content }}

<!-- should avoid repeating this CSS -->
<style>
.lottery{
border: 2px solid red;
border-radius:10px;
padding:0px;
width:8.3em;
height:3.4em;
text-align:center;
vertical-align:baseline;
}
</style>

<p>Correct:</p>
<table class="table">
  <thead>
    <th>Lottery A</th><th>Lottery B</th>
  </thead>
  <tbody>
    <td>
      <div class="lottery"><p>🔴 🔴 🔴 ⚪ ⚪<br />⚪ ⚪ ⚪ ⚪ ⚪</p></div>
      <p>🔴 = {{ C.PAYOFF_RED_A }}, ⚪ = {{ C.PAYOFF_WHITE_A }} points</p>
    </td>
    <td>
      <div class="lottery"><p>🔴 🔴 🔴 ⚪ ⚪<br />⚪ ⚪ ⚪ ⚪ ⚪</p></div>
    <p>🔴 = {{ C.PAYOFF_RED_B }}, ⚪ = {{ C.PAYOFF_WHITE_B }} points</p>
    </td>
  </tbody>
</table>
<p>
If the above decision was selected by the computer, you had chosen lottery A, and the computer extracted a white ball, then yes: Your payoff would be {{ C.PAYOFF_WHITE_A|cu }}.
</p>
<p>
We will now proceed to the actual lottery game, where you must make ten decisions.
</p>

{{ formfields }}

{{ next_button }}

{{ endblock }}