{{ extends "eden_experiment2/layout/layout.html" }} {{ block title }}{{ endblock
}} {{ block content }}
<div class="d-flex align-items-center flex-column">
  <div class="card card-intro shadow p-4 pt-5">
    <div class="card-body">
      <h4 class="text-center mb-4">
        Now we are providing you with the outcomes BEFORE you make a choice
      </h4>
      <div class="text-center py-2">
        {{for att in attention}}
        <p>
          If you choose <b>{{att.label}}</b>, you will {{if att.score >= 0}}
          earn {{att.abs_score | to0}} {{else}} lose {{att.abs_score | to0}}
          {{endif}} {{if att.score >= 1 and att.score <= 1}} point. {{else}}
          points. {{endif}}
        </p>
        {{endfor}}
      </div>
      <hr class="mb-4" />

      <div class="d-flex justify-content-center align-items-center">
        <div class="app-text-large me-3">Please choose</div>
        {{for att in attention}}
        <button
          name="attention_choice"
          value="{{att.label}}"
          class="btn btn-primary mx-2 py-2 px-5"
        >
          {{att.label}}
        </button>
        {{endfor}}
      </div>
    </div>
  </div>
</div>
{{ endblock }}