{{ block content }}
<b>Do you agree or disagree with the following statements?</b>
<br>
<br>

<div class="card">
    <div class=card-header><b>1) Whether or not they influenced my decisions, I feel that I <u>noticed and paid attention to the following details</u>:</b></div>
    <div class="card-body">
        <div {{ if 'initial_att' in form.errors }} class="border border-danger px-3 rounded" {{ endif }}>
            <b>How much <u>bonus each agent started with</u>.</b> 
            {{ formfield 'initial_att' label=''}}
        </div>
        <br>
        <div {{ if 'final_att' in form.errors }} class="border border-danger px-3 rounded" {{ endif }}>
            <b>How much <u>bonus each agent has after I made my decision</u>.</b>
            {{ formfield 'final_att' label=''}}
        </div>
        <br>
        <div {{ if 'effort_att' in form.errors }} class="border border-danger px-3 rounded" {{ endif }}>
            <b>How much <u>effort each agent put in</u>.</b> 
            {{ formfield 'effort_att' label=''}}
        </div>
        <br>
        <div {{ if 'luck_att' in form.errors }} class="border border-danger px-3 rounded" {{ endif }}>
            <b>How much <u>luck each agent had</u>.</b>
            {{ formfield 'luck_att' label=''}}
        </div>
    </div>
</div>
<br>

<div class="card">
    <div class=card-header><b>2) I feel that the following details <u>actually mattered for my decisions</u>:</b></div>
    <div class="card-body">
        <div {{ if 'initial_care' in form.errors }} class="border border-danger px-3 rounded" {{ endif }}>
            <b>How much <u>bonus each agent started with</u>.</b> 
            {{ formfield 'initial_care' label=''}}
        </div>
        <br>
        <div {{ if 'final_care' in form.errors }} class="border border-danger px-3 rounded" {{ endif }}>
            <b>How much <u>bonus each agent has after I made my decision</u>.</b>
            {{ formfield 'final_care' label=''}}
        </div>
        <br>
        <div {{ if 'effort_care' in form.errors }} class="border border-danger px-3 rounded" {{ endif }}>
            <b>How much <u>effort each agent put in</u>.</b> 
            {{ formfield 'effort_care' label=''}}
        </div>
        <br>
        <div {{ if 'luck_care' in form.errors }} class="border border-danger px-3 rounded" {{ endif }}>
            <b>How much <u>luck each agent had</u>.</b>
            {{ formfield 'luck_care' label=''}}
        </div>
    </div>
</div>
<br>
<br>

<button class="otree-btn-next btn btn-dark btn-primary">Next</button>

{{ endblock }}

{{ block style }}
    <link rel="stylesheet" href="{% static 'global/style.css' %}"/>

    <style>
        .otree-form-errors {
            display: none;  /* Hide the global error message */
        }
    </style>
{{ endblock }}