{% block title %}
Scenario {{ player.round_number }}: What if John gets a $1 bonus?
{% endblock %}

{% block content %}

{{ if session.config.development }}
    <button class="btn btn-danger otree-btn-next" style="float: right;">Skip</button>
{{ endif }}

<p>On this page, <strong>the options involve {{ config.recipient }}'s bonus</strong>.</p>

{{ if participant.switch_order }}

    <!-- Case 1 = WILL tell = Trad -->
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Case 1: we WILL tell {{ config.recipient }} {% if app_name == "song" %}whether the poem was written by a human or generated by AI{% elif app_name == "eggs" %}whether the eggs are free-range or caged{% elif app_name == "books" %}whether the book is the one with the original or fake note{% else %}{{ config.learns_question }}{% endif %}</h5>
            <div class="card-text">
                {{ if Trad_wtp != 3 }}
                <div class="learn-radio-container" style="text-align: center;">
                    <br>
                    {{ formfield_errors 'Trad_learn2' }}

                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="Trad_learn2" id="Trad1_2" value="1"
                               onclick="enable('after_answeringTrad2', 'originalTrad2', 'fakeTrad2', 'indifferentTrad2', 'Trad_footer2', 'Trad_learn2_error')">
                        <label class="form-check-label" for="Trad1_2">Yes, {{ config.alex_pronoun_subject }} will learn</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="Trad_learn2" id="Trad2_2" value="2"
                               onclick="disable('after_answeringTrad2', 'originalTrad2', 'fakeTrad2', 'indifferentTrad2', 'Trad_footer2', 'Trad_learn2_mistakes', 'Trad_learn2_error')">
                        <label class="form-check-label" for="Trad2_2">No, {{ config.alex_pronoun_subject }} will not learn</label>
                    </div>
                    <div class="learn-error">
                        <span id="Trad_learn2_error" class="text-danger fw-bold" style="display: none;">Please correct your answer.</span>
                    </div>
                </div>
                <br>
                <div id="after_answeringTrad2">
                    After correctly answering the question above, you will be able to decide below.
                </div>
                <br>
                <div class="card-footer text-muted" id="Trad_footer2">
                    {{ formfield_errors 'Trad_wtp2' }}
                    <div style="text-align: center;">
                        <p><strong>{{ config.wtp_question }}</strong></p>

                        {% if choices_orders == 1 %}
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="originalTrad2" value="1" disabled>
                            <label class="form-check-label" for="originalTrad2">{{ config.original_label }}
                                {{ if Trad_wtp == 2 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="fakeTrad2" value="2" disabled>
                            <label class="form-check-label" for="fakeTrad2">{{ config.fake_label }}
                                {{ if Trad_wtp == 1 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="indifferentTrad2" value="3" disabled>
                            <label class="form-check-label" for="indifferentTrad2">I am indifferent</label>
                        </div>
                        {% elif choices_orders == 2 %}
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="fakeTrad2" value="2" disabled>
                            <label class="form-check-label" for="fakeTrad2">{{ config.fake_label }}
                                {{ if Trad_wtp == 1 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="originalTrad2" value="1" disabled>
                            <label class="form-check-label" for="originalTrad2">{{ config.original_label }}
                                {{ if Trad_wtp == 2 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="indifferentTrad2" value="3" disabled>
                            <label class="form-check-label" for="indifferentTrad2">I am indifferent</label>
                        </div>
                        {% elif choices_orders == 3 %}
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="originalTrad2" value="1" disabled>
                            <label class="form-check-label" for="originalTrad2">{{ config.original_label }}
                                {{ if Trad_wtp == 2 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="indifferentTrad2" value="3" disabled>
                            <label class="form-check-label" for="indifferentTrad2">I am indifferent</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="fakeTrad2" value="2" disabled>
                            <label class="form-check-label" for="fakeTrad2">{{ config.fake_label }}
                                {{ if Trad_wtp == 1 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        {% elif choices_orders == 4 %}
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="fakeTrad2" value="2" disabled>
                            <label class="form-check-label" for="fakeTrad2">{{ config.fake_label }}
                                {{ if Trad_wtp == 1 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="indifferentTrad2" value="3" disabled>
                            <label class="form-check-label" for="indifferentTrad2">I am indifferent</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="originalTrad2" value="1" disabled>
                            <label class="form-check-label" for="originalTrad2">{{ config.original_label }}
                                {{ if Trad_wtp == 2 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        {% elif choices_orders == 5 %}
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="indifferentTrad2" value="3" disabled>
                            <label class="form-check-label" for="indifferentTrad2">I am indifferent</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="fakeTrad2" value="2" disabled>
                            <label class="form-check-label" for="fakeTrad2">{{ config.fake_label }}
                                {{ if Trad_wtp == 1 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="originalTrad2" value="1" disabled>
                            <label class="form-check-label" for="originalTrad2">{{ config.original_label }}
                                {{ if Trad_wtp == 2 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        {% elif choices_orders == 6 %}
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="indifferentTrad2" value="3" disabled>
                            <label class="form-check-label" for="indifferentTrad2">I am indifferent</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="originalTrad2" value="1" disabled>
                            <label class="form-check-label" for="originalTrad2">{{ config.original_label }}
                                {{ if Trad_wtp == 2 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="fakeTrad2" value="2" disabled>
                            <label class="form-check-label" for="fakeTrad2">{{ config.fake_label }}
                                {{ if Trad_wtp == 1 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {{ else }}
                <p>For Case 1, we already know how to answer all the questions for you.
                You don't need to do anything else for this case.
                You will get a chance to review your responses to the questions in Case 1 later in the study.</p>
                {{ endif }}
            </div>
        </div>
    </div>

    <br>

    <!-- Case 2 = WILL NOT tell = ES -->
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Case 2: we WILL NOT tell {{ config.recipient }} {% if app_name == "song" %}whether the poem was written by a human or generated by AI{% elif app_name == "eggs" %}whether the eggs are free-range or caged{% elif app_name == "books" %}whether the book is the one with the original or fake note{% else %}{{ config.learns_question }}{% endif %}</h5>
            {% if treatment != "ambiguous" %}
            <h6 class="card-subtitle mb-2 text-muted">
                <strong>ℹ️ {{ recipient_cap }} {{ recipient_knows }} that if we don't tell {{ config.alex_pronoun }} {{ config.learns_question }}, there is at least a {{ ms_pct }}% chance that
                {% if config.item_singular == "donation" %}
                    the donation goes to {{ ms_item }}.
                {% elif app_name == "catfishing" %}
                    {{ config.alex_pronoun_subject }} chats with the {{ ms_item }}.
                {% elif app_name == "surveillance" %}
                    we {% if treatment == "high" %}do not monitor{% else %}monitor{% endif %} {{ config.alex_pronoun }}.
                {% else %}
                    {{ config.alex_pronoun_subject }} {{ pronoun_has }} the {{ ms_item }}.
                {% endif %}</strong>
            </h6>
            {% endif %}
            <div class="card-text">
                {{ if ES_wtp != 3 }}
                <div class="learn-radio-container" style="text-align: center;">
                    <br>
                    {{ formfield_errors 'ES_learn2' }}

                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="ES_learn2" id="ES1_2" value="1"
                               onclick="disable('after_answeringES2', 'originalES2', 'fakeES2', 'indifferentES2', 'ES_footer2', 'ES_learn2_mistakes', 'ES_learn2_error')">
                        <label class="form-check-label" for="ES1_2">Yes, {{ config.alex_pronoun_subject }} will learn</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="ES_learn2" id="ES2_2" value="2"
                               onclick="enable('after_answeringES2', 'originalES2', 'fakeES2', 'indifferentES2', 'ES_footer2', 'ES_learn2_error')">
                        <label class="form-check-label" for="ES2_2">No, {{ config.alex_pronoun_subject }} will not learn</label>
                    </div>
                    <div class="learn-error">
                        <span id="ES_learn2_error" class="text-danger fw-bold" style="display: none;">Please correct your answer.</span>
                    </div>
                </div>
                <br>
                <div id="after_answeringES2">
                    After correctly answering the question above, you will be able to decide below.
                </div>
                <br>
                <div class="card-footer text-muted" id="ES_footer2">
                    {{ formfield_errors 'ES_wtp2' }}
                    <div style="text-align: center;">
                        <p><strong>{{ config.wtp_question }}</strong></p>

                        {% if choices_orders == 1 %}
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="originalES2" value="1" disabled>
                            <label class="form-check-label" for="originalES2">{{ config.original_label }}
                                {{ if ES_wtp == 2 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="fakeES2" value="2" disabled>
                            <label class="form-check-label" for="fakeES2">{{ config.fake_label }}
                                {{ if ES_wtp == 1 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="indifferentES2" value="3" disabled>
                            <label class="form-check-label" for="indifferentES2">I am indifferent</label>
                        </div>
                        {% elif choices_orders == 2 %}
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="fakeES2" value="2" disabled>
                            <label class="form-check-label" for="fakeES2">{{ config.fake_label }}
                                {{ if ES_wtp == 1 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="originalES2" value="1" disabled>
                            <label class="form-check-label" for="originalES2">{{ config.original_label }}
                                {{ if ES_wtp == 2 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="indifferentES2" value="3" disabled>
                            <label class="form-check-label" for="indifferentES2">I am indifferent</label>
                        </div>
                        {% elif choices_orders == 3 %}
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="originalES2" value="1" disabled>
                            <label class="form-check-label" for="originalES2">{{ config.original_label }}
                                {{ if ES_wtp == 2 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="indifferentES2" value="3" disabled>
                            <label class="form-check-label" for="indifferentES2">I am indifferent</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="fakeES2" value="2" disabled>
                            <label class="form-check-label" for="fakeES2">{{ config.fake_label }}
                                {{ if ES_wtp == 1 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        {% elif choices_orders == 4 %}
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="fakeES2" value="2" disabled>
                            <label class="form-check-label" for="fakeES2">{{ config.fake_label }}
                                {{ if ES_wtp == 1 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="indifferentES2" value="3" disabled>
                            <label class="form-check-label" for="indifferentES2">I am indifferent</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="originalES2" value="1" disabled>
                            <label class="form-check-label" for="originalES2">{{ config.original_label }}
                                {{ if ES_wtp == 2 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        {% elif choices_orders == 5 %}
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="indifferentES2" value="3" disabled>
                            <label class="form-check-label" for="indifferentES2">I am indifferent</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="fakeES2" value="2" disabled>
                            <label class="form-check-label" for="fakeES2">{{ config.fake_label }}
                                {{ if ES_wtp == 1 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="originalES2" value="1" disabled>
                            <label class="form-check-label" for="originalES2">{{ config.original_label }}
                                {{ if ES_wtp == 2 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        {% elif choices_orders == 6 %}
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="indifferentES2" value="3" disabled>
                            <label class="form-check-label" for="indifferentES2">I am indifferent</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="originalES2" value="1" disabled>
                            <label class="form-check-label" for="originalES2">{{ config.original_label }}
                                {{ if ES_wtp == 2 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="fakeES2" value="2" disabled>
                            <label class="form-check-label" for="fakeES2">{{ config.fake_label }}
                                {{ if ES_wtp == 1 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {{ else }}
                <p>For Case 2, we already know how to answer all the questions for you.
                You don't need to do anything else for this case.
                You will get a chance to review your responses to the questions in Case 2 later in the study.</p>
                {{ endif }}
            </div>
        </div>
    </div>

{{ else }}

    <!-- Case 1 = WILL NOT tell = ES -->
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Case 1: we WILL NOT tell {{ config.recipient }} {% if app_name == "song" %}whether the poem was written by a human or generated by AI{% elif app_name == "eggs" %}whether the eggs are free-range or caged{% elif app_name == "books" %}whether the book is the one with the original or fake note{% else %}{{ config.learns_question }}{% endif %}</h5>
            {% if treatment != "ambiguous" %}
            <h6 class="card-subtitle mb-2 text-muted">
                <strong>ℹ️ {{ recipient_cap }} {{ recipient_knows }} that if we don't tell {{ config.alex_pronoun }} {{ config.learns_question }}, there is at least a {{ ms_pct }}% chance that
                {% if config.item_singular == "donation" %}
                    the donation goes to {{ ms_item }}.
                {% elif app_name == "catfishing" %}
                    {{ config.alex_pronoun_subject }} chats with the {{ ms_item }}.
                {% elif app_name == "surveillance" %}
                    we {% if treatment == "high" %}do not monitor{% else %}monitor{% endif %} {{ config.alex_pronoun }}.
                {% else %}
                    {{ config.alex_pronoun_subject }} {{ pronoun_has }} the {{ ms_item }}.
                {% endif %}</strong>
            </h6>
            {% endif %}
            <div class="card-text">
                {{ if ES_wtp != 3 }}
                <div class="learn-radio-container" style="text-align: center;">
                    <br>
                    {{ formfield_errors 'ES_learn2' }}

                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="ES_learn2" id="ES1_2" value="1"
                               onclick="disable('after_answeringES2', 'originalES2', 'fakeES2', 'indifferentES2', 'ES_footer2', 'ES_learn2_mistakes', 'ES_learn2_error')">
                        <label class="form-check-label" for="ES1_2">Yes, {{ config.alex_pronoun_subject }} will learn</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="ES_learn2" id="ES2_2" value="2"
                               onclick="enable('after_answeringES2', 'originalES2', 'fakeES2', 'indifferentES2', 'ES_footer2', 'ES_learn2_error')">
                        <label class="form-check-label" for="ES2_2">No, {{ config.alex_pronoun_subject }} will not learn</label>
                    </div>
                    <div class="learn-error">
                        <span id="ES_learn2_error" class="text-danger fw-bold" style="display: none;">Please correct your answer.</span>
                    </div>
                </div>
                <br>
                <div id="after_answeringES2">
                    After correctly answering the question above, you will be able to decide below.
                </div>
                <br>
                <div class="card-footer text-muted" id="ES_footer2">
                    {{ formfield_errors 'ES_wtp2' }}
                    <div style="text-align: center;">
                        <p><strong>{{ config.wtp_question }}</strong></p>

                        {% if choices_orders == 1 %}
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="originalES2" value="1" disabled>
                            <label class="form-check-label" for="originalES2">{{ config.original_label }}
                                {{ if ES_wtp == 2 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="fakeES2" value="2" disabled>
                            <label class="form-check-label" for="fakeES2">{{ config.fake_label }}
                                {{ if ES_wtp == 1 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="indifferentES2" value="3" disabled>
                            <label class="form-check-label" for="indifferentES2">I am indifferent</label>
                        </div>
                        {% elif choices_orders == 2 %}
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="fakeES2" value="2" disabled>
                            <label class="form-check-label" for="fakeES2">{{ config.fake_label }}
                                {{ if ES_wtp == 1 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="originalES2" value="1" disabled>
                            <label class="form-check-label" for="originalES2">{{ config.original_label }}
                                {{ if ES_wtp == 2 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="indifferentES2" value="3" disabled>
                            <label class="form-check-label" for="indifferentES2">I am indifferent</label>
                        </div>
                        {% elif choices_orders == 3 %}
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="originalES2" value="1" disabled>
                            <label class="form-check-label" for="originalES2">{{ config.original_label }}
                                {{ if ES_wtp == 2 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="indifferentES2" value="3" disabled>
                            <label class="form-check-label" for="indifferentES2">I am indifferent</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="fakeES2" value="2" disabled>
                            <label class="form-check-label" for="fakeES2">{{ config.fake_label }}
                                {{ if ES_wtp == 1 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        {% elif choices_orders == 4 %}
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="fakeES2" value="2" disabled>
                            <label class="form-check-label" for="fakeES2">{{ config.fake_label }}
                                {{ if ES_wtp == 1 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="indifferentES2" value="3" disabled>
                            <label class="form-check-label" for="indifferentES2">I am indifferent</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="originalES2" value="1" disabled>
                            <label class="form-check-label" for="originalES2">{{ config.original_label }}
                                {{ if ES_wtp == 2 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        {% elif choices_orders == 5 %}
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="indifferentES2" value="3" disabled>
                            <label class="form-check-label" for="indifferentES2">I am indifferent</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="fakeES2" value="2" disabled>
                            <label class="form-check-label" for="fakeES2">{{ config.fake_label }}
                                {{ if ES_wtp == 1 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="originalES2" value="1" disabled>
                            <label class="form-check-label" for="originalES2">{{ config.original_label }}
                                {{ if ES_wtp == 2 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        {% elif choices_orders == 6 %}
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="indifferentES2" value="3" disabled>
                            <label class="form-check-label" for="indifferentES2">I am indifferent</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="originalES2" value="1" disabled>
                            <label class="form-check-label" for="originalES2">{{ config.original_label }}
                                {{ if ES_wtp == 2 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="ES_wtp2" id="fakeES2" value="2" disabled>
                            <label class="form-check-label" for="fakeES2">{{ config.fake_label }}
                                {{ if ES_wtp == 1 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {{ else }}
                <p>For Case 1, we already know how to answer all the questions for you.
                You don't need to do anything else for this case.
                You will get a chance to review your responses to the questions in Case 1 later in the study.</p>
                {{ endif }}
            </div>
        </div>
    </div>

    <br>

    <!-- Case 2 = WILL tell = Trad -->
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Case 2: we WILL tell {{ config.recipient }} {% if app_name == "song" %}whether the poem was written by a human or generated by AI{% elif app_name == "eggs" %}whether the eggs are free-range or caged{% elif app_name == "books" %}whether the book is the one with the original or fake note{% else %}{{ config.learns_question }}{% endif %}</h5>
            <div class="card-text">
                {{ if Trad_wtp != 3 }}
                <div class="learn-radio-container" style="text-align: center;">
                    <br>
                    {{ formfield_errors 'Trad_learn2' }}

                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="Trad_learn2" id="Trad1_2" value="1"
                               onclick="enable('after_answeringTrad2', 'originalTrad2', 'fakeTrad2', 'indifferentTrad2', 'Trad_footer2', 'Trad_learn2_error')">
                        <label class="form-check-label" for="Trad1_2">Yes, {{ config.alex_pronoun_subject }} will learn</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="Trad_learn2" id="Trad2_2" value="2"
                               onclick="disable('after_answeringTrad2', 'originalTrad2', 'fakeTrad2', 'indifferentTrad2', 'Trad_footer2', 'Trad_learn2_mistakes', 'Trad_learn2_error')">
                        <label class="form-check-label" for="Trad2_2">No, {{ config.alex_pronoun_subject }} will not learn</label>
                    </div>
                    <div class="learn-error">
                        <span id="Trad_learn2_error" class="text-danger fw-bold" style="display: none;">Please correct your answer.</span>
                    </div>
                </div>
                <br>
                <div id="after_answeringTrad2">
                    After correctly answering the question above, you will be able to decide below.
                </div>
                <br>
                <div class="card-footer text-muted" id="Trad_footer2">
                    {{ formfield_errors 'Trad_wtp2' }}
                    <div style="text-align: center;">
                        <p><strong>{{ config.wtp_question }}</strong></p>

                        {% if choices_orders == 1 %}
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="originalTrad2" value="1" disabled>
                            <label class="form-check-label" for="originalTrad2">{{ config.original_label }}
                                {{ if Trad_wtp == 2 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="fakeTrad2" value="2" disabled>
                            <label class="form-check-label" for="fakeTrad2">{{ config.fake_label }}
                                {{ if Trad_wtp == 1 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="indifferentTrad2" value="3" disabled>
                            <label class="form-check-label" for="indifferentTrad2">I am indifferent</label>
                        </div>
                        {% elif choices_orders == 2 %}
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="fakeTrad2" value="2" disabled>
                            <label class="form-check-label" for="fakeTrad2">{{ config.fake_label }}
                                {{ if Trad_wtp == 1 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="originalTrad2" value="1" disabled>
                            <label class="form-check-label" for="originalTrad2">{{ config.original_label }}
                                {{ if Trad_wtp == 2 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="indifferentTrad2" value="3" disabled>
                            <label class="form-check-label" for="indifferentTrad2">I am indifferent</label>
                        </div>
                        {% elif choices_orders == 3 %}
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="originalTrad2" value="1" disabled>
                            <label class="form-check-label" for="originalTrad2">{{ config.original_label }}
                                {{ if Trad_wtp == 2 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="indifferentTrad2" value="3" disabled>
                            <label class="form-check-label" for="indifferentTrad2">I am indifferent</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="fakeTrad2" value="2" disabled>
                            <label class="form-check-label" for="fakeTrad2">{{ config.fake_label }}
                                {{ if Trad_wtp == 1 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        {% elif choices_orders == 4 %}
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="fakeTrad2" value="2" disabled>
                            <label class="form-check-label" for="fakeTrad2">{{ config.fake_label }}
                                {{ if Trad_wtp == 1 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="indifferentTrad2" value="3" disabled>
                            <label class="form-check-label" for="indifferentTrad2">I am indifferent</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="originalTrad2" value="1" disabled>
                            <label class="form-check-label" for="originalTrad2">{{ config.original_label }}
                                {{ if Trad_wtp == 2 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        {% elif choices_orders == 5 %}
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="indifferentTrad2" value="3" disabled>
                            <label class="form-check-label" for="indifferentTrad2">I am indifferent</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="fakeTrad2" value="2" disabled>
                            <label class="form-check-label" for="fakeTrad2">{{ config.fake_label }}
                                {{ if Trad_wtp == 1 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="originalTrad2" value="1" disabled>
                            <label class="form-check-label" for="originalTrad2">{{ config.original_label }}
                                {{ if Trad_wtp == 2 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        {% elif choices_orders == 6 %}
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="indifferentTrad2" value="3" disabled>
                            <label class="form-check-label" for="indifferentTrad2">I am indifferent</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="originalTrad2" value="1" disabled>
                            <label class="form-check-label" for="originalTrad2">{{ config.original_label }}
                                {{ if Trad_wtp == 2 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Trad_wtp2" id="fakeTrad2" value="2" disabled>
                            <label class="form-check-label" for="fakeTrad2">{{ config.fake_label }}
                                {{ if Trad_wtp == 1 }}{% if app_name == "misuse" or app_name == "catfishing" or app_name == "surveillance" %}+ John gets $1{% else %}+ $1{% endif %}{{ endif }}</label>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {{ else }}
                <p>For Case 2, we already know how to answer all the questions for you.
                You don't need to do anything else for this case.
                You will get a chance to review your responses to the questions in Case 2 later in the study.</p>
                {{ endif }}
            </div>
        </div>
    </div>

{{ endif }}

<br>
<div class="text-end"><button class="btn btn-primary btn-large otree-btn-next">Next</button></div>

<!-- Hidden mistake counters -->
<input type="hidden" name="Trad_learn2_mistakes" id="Trad_learn2_mistakes" value="0" />
<input type="hidden" name="ES_learn2_mistakes" id="ES_learn2_mistakes" value="0" />

{{ formfield_errors 'Trad_learn2_mistakes' }}
{{ formfield_errors 'ES_learn2_mistakes' }}

{% endblock %}

{% block styles %}
<style>
    .card-body {
        padding-bottom: 1px;
    }
    .learn-radio-container {
        position: relative;
    }
    .learn-error {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        margin-top: 2px;
    }
</style>
{% endblock %}

{% block scripts %}
<script>
function enable(text, radio1, radio2, radio3, footer, errorId) {
    document.getElementById(text).textContent = 'Now, please decide:';
    var el1 = document.getElementById(radio1);
    var el2 = document.getElementById(radio2);
    var el3 = document.getElementById(radio3);
    if (el1) el1.disabled = false;
    if (el2) el2.disabled = false;
    if (el3) el3.disabled = false;
    document.getElementById(footer).classList.remove('text-muted');
    document.getElementById(footer).style.backgroundColor = 'navajowhite';
    if (errorId) {
        var errEl = document.getElementById(errorId);
        if (errEl) errEl.style.display = 'none';
    }
}

function disable(text, radio1, radio2, radio3, footer, mistake, errorId) {
    document.getElementById(text).textContent = 'After correctly answering the question above, you will be able to decide below.';
    var el1 = document.getElementById(radio1);
    var el2 = document.getElementById(radio2);
    var el3 = document.getElementById(radio3);
    if (el1) el1.disabled = true;
    if (el2) el2.disabled = true;
    if (el3) el3.disabled = true;
    document.getElementById(footer).classList.add('text-muted');
    document.getElementById(footer).style.backgroundColor = null;
    document.getElementById(mistake).value = parseInt(document.getElementById(mistake).value) + 1;
    if (errorId) {
        var errEl = document.getElementById(errorId);
        if (errEl) errEl.style.display = '';
    }
}

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('ES_learn2_mistakes').value = 0;
    document.getElementById('Trad_learn2_mistakes').value = 0;
});
</script>
{% endblock %}