{% extends "global/Page.html" %}
{% load otree %}

{% block title %}
{% endblock %}

{% block content %}

<style>
    .wtp-wrap{
        max-width: 980px;
        margin: 0 auto;
        line-height: 1.35;
    }
    .wtp-wrap h3{
        margin: 0 0 10px 0;
        font-size: 1.25rem;
    }
    .wtp-wrap h4{
        margin: 0 0 8px 0;
        font-size: 1.05rem;
    }
    .wtp-wrap p{
        margin: 0 0 12px 0;
    }
    .wtp-box{
        background: #fafafa;
        border: 1px solid #e6e6e6;
        border-radius: 10px;
        padding: 14px 16px;
        margin: 14px 0;
    }
    .wtp-list{
        margin: 8px 0 0 18px;
    }
    .wtp-table{
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
    }
    .wtp-table td, .wtp-table th{
        border: 1px solid #e6e6e6;
        padding: 10px;
        vertical-align: top;
    }
    .wtp-muted{
        color: #555;
        font-size: 0.98em;
    }
    .wtp-spacer{
        height: 10px;
    }

    /* Info button */
    .info-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 16px;
        height: 16px;
        margin-left: 6px;

        border: 1px solid #000;
        border-radius: 50%;
        background: #fff;

        color: #000;
        font-size: 12px;
        line-height: 1;

        padding: 0;
        cursor: pointer;
        vertical-align: middle;
    }
    .info-btn:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(0,0,0,0.15);
    }

    /* Modal */
    .modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.35);
        display: none;
        align-items: center;
        justify-content: center;
        padding: 18px;
        z-index: 9999;
    }
    .modal-backdrop.open {
        display: flex;
    }
    .modal-box {
        width: min(720px, 95vw);
        max-height: 85vh;
        overflow: auto;
        background: #fff;
        border-radius: 10px;
        padding: 16px 18px;
        box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    }
    .modal-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
    }
    .modal-title {
        font-size: 16px;
        margin: 0;
    }
    .modal-close {
        border: 1px solid #bbb;
        background: #fff;
        border-radius: 8px;
        padding: 4px 10px;
        cursor: pointer;
    }

.pair-table {
    margin-left: 18px;
    margin-top: 6px;
    border-collapse: collapse;
}

.pair-table td {
    padding: 4px 0;
    vertical-align: baseline;
}

.pair-table .bullet {
    width: 22px;
    padding-right: 10px;
}

.pair-table .left {
    padding-right: 24px;   /* space BEFORE & */
    white-space: nowrap;
}

.pair-table .sep {
    width: 48px;           /* controls horizontal gap */
    text-align: center;
    font-weight: 600;
}

.pair-table .right {
    padding-left: 24px;    /* space AFTER & */
    white-space: nowrap;
}

</style>
<h4>Préférences entre scénarios</h4>
<div class="wtp-wrap">

    <p>
        Avant de poursuivre, nous souhaitons connaître vos préférences à propos des 3 scénarios.
        Pour cela, nous allons vous poser une série de questions.
    </p>

    <p>
        Vos réponses <strong>peuvent influencer le scénario que vous réaliserez</strong>.
        Dans 10% des cas, l’ordinateur tient compte des réponses des participant·e·s pour décider quel scénario appliquer.
        Il est donc dans votre intérêt de répondre de la manière la plus honnête.
    </p>

    <p>
        Pour chacune de ces questions, vous allez comparer les scénarios deux par deux.
        Pour chaque paire, 4 ou 5 décisions distinctes vous seront présentées.
        Chaque décision comporte les deux scénarios ainsi qu’un paiement garanti associé à chaque option.
        Les montants proposés pour ce paiement garanti varient d’une décision à l’autre.
    </p>

    <p>
        Au total, vous verrez ce type de décisions pour les paires de scénarios suivantes :
    </p>

<table class="pair-table">
    <tr>
        <td class="bullet">•</td>
        <td class="left">{{ sA.title }}</td>
        <td class="sep">&amp;</td>
        <td class="right">{{ sB.title }}</td>
    </tr>
    <tr>
        <td class="bullet">•</td>
        <td class="left">{{ sA.title }}</td>
        <td class="sep">&amp;</td>
        <td class="right">{{ sC.title }}</td>
    </tr>
    <tr>
        <td class="bullet">•</td>
        <td class="left">{{ sB.title }}</td>
        <td class="sep">&amp;</td>
        <td class="right">{{ sC.title }}</td>
    </tr>
</table>

<div style="height: 16px;"></div>
    <p>
        L’ordre d’apparition des paires ainsi que leur disposition est aléatoire. Vous ne verrez qu'une seule paire par écran.
    </p>
  <p>
    Pour chacune de ces décisions, vous aurez donc le choix entre deux options, comme dans les deux exemples suivants :
  </p>
    <div class="wtp-box">
        <p style="margin-bottom: 8px;">Exemple de décision #1</p>

        <table class="wtp-table">
            <tr>
                <th style="width: 50%; text-align:center;">Option 1</th>
                <th style="width: 50%; text-align:center;">Option 2</th>
            </tr>
            <tr>
                <td>
                    <ul style="margin-left: 18px; margin-top: 6px;">
                        <li>
                            {{ sA.title }}
                            <button type="button" class="info-btn"
                                    data-modal-title="{{ sA.title|escape }}"
                                    data-modal-body="{{ sA.rappels_html|escape }}">+</button>
                        </li>
                        <li>Paiement garanti de <strong>5,0</strong>€</li>
                    </ul>
                    <div class="wtp-spacer"></div>
                </td>
                <td>
                    <ul style="margin-left: 18px; margin-top: 6px;">
                        <li>
                            {{ sB.title }}
                            <button type="button" class="info-btn"
                                    data-modal-title="{{ sB.title|escape }}"
                                    data-modal-body="{{ sB.rappels_html|escape }}">+</button>
                        </li>
                        <li>Paiement garanti de <strong>9,0</strong>€</li>
                    </ul>
                    <div class="wtp-spacer"></div>
                </td>
            </tr>
        </table>
    </div>

    <div class="wtp-muted">
        <p>
            Si cette décision venait à être sélectionnée par l'ordinateur pour déterminer la suite de l'expérience, alors en choisissant :
        </p>
        <ul style="margin-left: 18px; margin-top: 6px;">
            <li><strong>Option 1</strong> : vous participerez à la partie 2 dans les conditions données par le {{ sA.title }}. Votre paiement garanti reste égal à 5€.</li>
            <li><strong>Option 2</strong> : vous participerez à la partie 2 dans les conditions données par le {{ sB.title }}. Votre paiement garanti devient désormais égal à 9€.</li>
        </ul>
    </div>

    <div class="wtp-box">
        <p style="margin-bottom: 8px;">Exemple de décision #2</p>

        <table class="wtp-table">
            <tr>
                <th style="width: 50%; text-align:center;">Option 1</th>
                <th style="width: 50%; text-align:center;">Option 2</th>
            </tr>
            <tr>
                <td>
                    <ul style="margin-left: 18px; margin-top: 6px;">
                        <li>
                            {{ sC.title }}
                            <button type="button" class="info-btn"
                                    data-modal-title="{{ sC.title|escape }}"
                                    data-modal-body="{{ sC.rappels_html|escape }}">+</button>
                        </li>
                        <li>Paiement garanti de <strong>5,0</strong>€</li>
                    </ul>
                    <div class="wtp-spacer"></div>
                </td>
                <td>
                    <ul style="margin-left: 18px; margin-top: 6px;">
                        <li>
                            {{ sA.title }}
                            <button type="button" class="info-btn"
                                    data-modal-title="{{ sA.title|escape }}"
                                    data-modal-body="{{ sA.rappels_html|escape }}">+</button>
                        </li>
                        <li>Paiement garanti de <strong>5,0</strong>€</li>
                    </ul>
                    <div class="wtp-spacer"></div>
                </td>
            </tr>
        </table>
    </div>

    <div class="wtp-muted">
        <p>
            Si cette décision venait à être sélectionnée par l'ordinateur pour déterminer la suite de l'expérience, alors en choisissant :
        </p>
        <ul style="margin-left: 18px; margin-top: 6px;">
            <li><strong>Option 1</strong> : vous participerez à la partie 2 dans les conditions données par le {{ sC.title }}. Votre paiement garanti reste égal à 5€.</li>
            <li><strong>Option 2</strong> : vous participerez à la partie 2 dans les conditions données par le {{ sA.title }}. Votre paiement garanti reste égal à 5€.</li>
        </ul>
    </div>

    <div style="height: 10px;"></div>

    <p>
        Veuillez prendre vos décisions avec soin.
        À la fin de cette partie, l’ordinateur décidera au hasard s’il utilise vos réponses pour déterminer votre scénario final.
    </p>

    <p>
        Si c'est le cas pour vous, il sélectionnera au hasard une décision parmi toutes les décisions possibles.
        À partir de vos réponses, l’ordinateur déterminera quelle option vous auriez choisie pour cette décision.
        Cette option déterminera alors :
    </p>

    <ul class="wtp-list">
        <li>le scénario que vous réaliserez</li>
        <li>votre paiement garanti</li>
    </ul>

    <div style="height: 10px;"></div>

    <p>
        Si l’ordinateur décide de ne pas tenir compte de vos réponses, le scénario final sera choisi au hasard
        et votre paiement garanti restera égal à 5€.
    </p>

    <p>
        Rappelez-vous que votre paiement final est la somme de votre paiement garanti et du paiement récolté
        pour l’une des parties sélectionnées au hasard par l’ordinateur.
    </p>

    <p>
        Comme il existe une chance que vos réponses soient prises en compte,
        il est dans votre intérêt de choisir, à chaque décision, <strong>l’option que vous préférez vraiment.</strong>
    </p>

    <p>
        Veuillez cliquer sur le bouton "Suivant" pour commencer à prendre ces décisions.
    </p>

</div>

<div style="height: 10px;"></div>

{{ next_button }}

<!-- Modal (single shared popup) -->
<div id="rules_modal" class="modal-backdrop" role="dialog" aria-modal="true" aria-hidden="true">
    <div class="modal-box">
        <div class="modal-header">
            <h4 id="rules_modal_title" class="modal-title"></h4>
            <button type="button" id="rules_modal_close" class="modal-close">Fermer</button>
        </div>
        <div id="rules_modal_body"></div>
    </div>
</div>

<script>
(function () {
    const modal = document.getElementById('rules_modal');
    const titleEl = document.getElementById('rules_modal_title');
    const bodyEl = document.getElementById('rules_modal_body');
    const closeBtn = document.getElementById('rules_modal_close');

    function openModal(title, html) {
        titleEl.textContent = title || '';
        bodyEl.innerHTML = html || '';
        modal.classList.add('open');
        modal.setAttribute('aria-hidden', 'false');
    }

    function closeModal() {
        modal.classList.remove('open');
        modal.setAttribute('aria-hidden', 'true');
        titleEl.textContent = '';
        bodyEl.innerHTML = '';
    }

    document.addEventListener('click', function (e) {
        const btn = e.target.closest('.info-btn');
        if (btn) {
            const t = btn.getAttribute('data-modal-title') || '';
            const b = btn.getAttribute('data-modal-body') || '';
            openModal(t, b);
            return;
        }

        if (e.target === modal) {
            closeModal();
        }
    });

    closeBtn.addEventListener('click', closeModal);

    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && modal.classList.contains('open')) {
            closeModal();
        }
    });
})();
</script>

{% endblock %}