{% load otree %}
<p>
    You make several choices again involving {{ config.recipient }}'s bonus, filling in a table like the one
    below.
    For each row, we ask you to choose between {% if app_name == "song" %}human-written poem{% elif app_name == "eggs" %}free-range eggs{% elif app_name == "catfishing" %}real creator{% elif app_name == "surveillance" %}not monitor{% else %}{% if app_name == "books" %}original note{% else %}{{ config.original_label }}{% endif %}{% endif %} and {% if app_name == "eggs" %}caged eggs{% elif app_name == "catfishing" %}AI creator{% elif app_name == "surveillance" %}monitor{% else %}{% if app_name == "books" %}fake note{% else %}{{ config.fake_label }}{% endif %}{% endif %} with a bonus for {{ config.recipient }}.
</p>

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col-md-10 col-sm-12">
            <table class="mpl-table-demo" style="pointer-events: none; user-select: none;">
                <thead>
                    <tr>
                        {{ if original_first }}
                        <th>{% if app_name == "books" %}original note{% else %}{{ config.original_label }}{% endif %}</th>
                        <th>I am indifferent</th>
                        <th>{% if app_name == "books" %}fake note{% else %}{{ config.fake_label }}{% endif %} + Bonus</th>
                        {{ else }}
                        <th>{% if app_name == "books" %}fake note{% else %}{{ config.fake_label }}{% endif %} + Bonus</th>
                        <th>I am indifferent</th>
                        <th>{% if app_name == "books" %}original note{% else %}{{ config.original_label }}{% endif %}</th>
                        {{ endif }}
                    </tr>
                </thead>
                <tbody>
                    {{ if original_first }}
                    <tr>
                        <td class="demo-selected"><input type="radio" checked disabled> {% if app_name == "books" %}original note{% else %}{{ config.original_label }}{% endif %}</td>
                        <td><input type="radio" disabled> I am indifferent</td>
                        <td><input type="radio" disabled> {% if app_name == "books" %}fake note{% else %}{{ config.fake_label }}{% endif %} + $2</td>
                    </tr>
                    <tr>
                        <td class="demo-selected"><input type="radio" checked disabled> {% if app_name == "books" %}original note{% else %}{{ config.original_label }}{% endif %}</td>
                        <td><input type="radio" disabled> I am indifferent</td>
                        <td><input type="radio" disabled> {% if app_name == "books" %}fake note{% else %}{{ config.fake_label }}{% endif %} + $3</td>
                    </tr>
                    <tr>
                        <td class="demo-selected"><input type="radio" checked disabled> {% if app_name == "books" %}original note{% else %}{{ config.original_label }}{% endif %}</td>
                        <td><input type="radio" disabled> I am indifferent</td>
                        <td><input type="radio" disabled> {% if app_name == "books" %}fake note{% else %}{{ config.fake_label }}{% endif %} + $5</td>
                    </tr>
                    <tr>
                        <td><input type="radio" disabled> {% if app_name == "books" %}original note{% else %}{{ config.original_label }}{% endif %}</td>
                        <td class="demo-selected"><input type="radio" checked disabled> I am indifferent</td>
                        <td><input type="radio" disabled> {% if app_name == "books" %}fake note{% else %}{{ config.fake_label }}{% endif %} + $7</td>
                    </tr>
                    <tr>
                        <td><input type="radio" disabled> {% if app_name == "books" %}original note{% else %}{{ config.original_label }}{% endif %}</td>
                        <td><input type="radio" disabled> I am indifferent</td>
                        <td class="demo-selected"><input type="radio" checked disabled> {% if app_name == "books" %}fake note{% else %}{{ config.fake_label }}{% endif %} + $10</td>
                    </tr>
                    {{ else }}
                    <tr>
                        <td><input type="radio" disabled> {% if app_name == "books" %}fake note{% else %}{{ config.fake_label }}{% endif %} + $2</td>
                        <td><input type="radio" disabled> I am indifferent</td>
                        <td class="demo-selected"><input type="radio" checked disabled> {% if app_name == "books" %}original note{% else %}{{ config.original_label }}{% endif %}</td>
                    </tr>
                    <tr>
                        <td><input type="radio" disabled> {% if app_name == "books" %}fake note{% else %}{{ config.fake_label }}{% endif %} + $3</td>
                        <td><input type="radio" disabled> I am indifferent</td>
                        <td class="demo-selected"><input type="radio" checked disabled> {% if app_name == "books" %}original note{% else %}{{ config.original_label }}{% endif %}</td>
                    </tr>
                    <tr>
                        <td><input type="radio" disabled> {% if app_name == "books" %}fake note{% else %}{{ config.fake_label }}{% endif %} + $5</td>
                        <td><input type="radio" disabled> I am indifferent</td>
                        <td class="demo-selected"><input type="radio" checked disabled> {% if app_name == "books" %}original note{% else %}{{ config.original_label }}{% endif %}</td>
                    </tr>
                    <tr>
                        <td><input type="radio" disabled> {% if app_name == "books" %}fake note{% else %}{{ config.fake_label }}{% endif %} + $7</td>
                        <td class="demo-selected"><input type="radio" checked disabled> I am indifferent</td>
                        <td><input type="radio" disabled> {% if app_name == "books" %}original note{% else %}{{ config.original_label }}{% endif %}</td>
                    </tr>
                    <tr>
                        <td class="demo-selected"><input type="radio" checked disabled> {% if app_name == "books" %}fake note{% else %}{{ config.fake_label }}{% endif %} + $10</td>
                        <td><input type="radio" disabled> I am indifferent</td>
                        <td><input type="radio" disabled> {% if app_name == "books" %}original note{% else %}{{ config.original_label }}{% endif %}</td>
                    </tr>
                    {{ endif }}
                    <tr class="demo-more-rows">
                        <td colspan="3">... (more rows with increasing bonus amounts)</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<p class="mt-3">
    We assume that once you choose {% if app_name == "eggs" %}caged eggs{% elif app_name == "catfishing" %}AI creator{% elif app_name == "surveillance" %}monitor{% else %}{% if app_name == "books" %}fake note{% else %}{{ config.fake_label }}{% endif %}{% endif %} for one row, you will choose {% if app_name == "eggs" %}caged eggs{% elif app_name == "catfishing" %}AI creator{% elif app_name == "surveillance" %}monitor{% else %}{% if app_name == "books" %}fake note{% else %}{{ config.fake_label }}{% endif %}{% endif %} for all rows below because the rows below simply make {% if app_name == "eggs" %}caged eggs{% elif app_name == "catfishing" %}AI creator{% elif app_name == "surveillance" %}monitor{% else %}{% if app_name == "books" %}fake note{% else %}{{ config.fake_label }}{% endif %}{% endif %} better by increasing the bonus. You will only need to choose the row in which you switch from preferring {% if app_name == "song" %}human-written poem{% elif app_name == "eggs" %}free-range eggs{% elif app_name == "catfishing" %}real creator{% elif app_name == "surveillance" %}not monitor{% else %}{% if app_name == "books" %}original note{% else %}{{ config.original_label }}{% endif %}{% endif %} to preferring {% if app_name == "eggs" %}caged eggs{% elif app_name == "catfishing" %}AI creator{% elif app_name == "surveillance" %}monitor{% else %}{% if app_name == "books" %}fake note{% else %}{{ config.fake_label }}{% endif %}{% endif %}. You do that by clicking on the row.
</p>

<style>
    .mpl-table-demo {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
    }
    .mpl-table-demo th {
        background: #333;
        color: white;
        padding: 4px 6px;
        text-align: center;
        font-size: 0.95em;
    }
    .mpl-table-demo td {
        padding: 2px 8px;
        border: 1px solid #ccc;
        text-align: center;
        font-size: 0.9em;
    }
    .mpl-table-demo .demo-selected {
        background-color: #fa8e00 !important;
    }
    .mpl-table-demo .demo-more-rows td {
        font-style: italic;
        color: #666;
        border-top: 2px dashed #999;
    }
    .mpl-table-demo input[type="radio"] {
        transform: scale(1.1);
        vertical-align: middle;
        margin-right: 3px;
    }
</style>