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

{% block title %}Partie 2 de l'expérience{% endblock %}

{% block content %}

<style>
    /* Same spacing system as other pages */
    .p1-wrap {
        max-width: 980px;
        margin: 0 auto;
    }

    .p1-wrap p {
        margin-bottom: 14px;
        line-height: 1.35;
    }

    .p1-section {
        margin-top: 24px;
        margin-bottom: 24px;
    }

    .p1-wrap ol,
    .p1-wrap ul {
        margin-top: 0;
        margin-bottom: 14px;
    }

    .p1-wrap li {
        margin-bottom: 8px;
        line-height: 1.35;
    }

    /* Standard activity boxes */
    .activity-title-box {
        display: inline-block;
        border: 1px solid #e6e6e6;
        border-radius: 10px;
        padding: 8px 16px;
        background: #fafafa;
        font-weight: 600;
        margin: 18px 0 10px 0;
    }

    /* More salient version for "Votre mission" */
    .mission-box {
        display: inline-block;
        border: 1px solid #dcdcdc;
        border-radius: 12px;
        padding: 10px 22px;
        background: #f0f0f0;
        font-weight: 700;
        font-size: 1.05rem;
        margin: 6px 0 14px 0;
    }
    /* Match EXACT box design from your Part 1 page */
    .p1-subtitle-card {
        display: inline-block;
        background: #f4f4f4;
        border: 1px solid #e6e6e6;
        border-radius: 8px;
        padding: 10px 18px;
        margin: 10px 0 14px 0;
    }

    .p1-subtitle-card h5 {
        margin: 0;
    }


    /* Slider demo styling */
    .slider-page {
        max-width: 700px;
        margin: 10px auto 0 auto;
        text-align: center;
    }

    .slider-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-top: 40px;
        margin-bottom: 6px;
    }

    .slider-track {
        position: relative;
        width: 350px;
    }

    #slider_demo_input {
        width: 100%;
    }

    .slider-bubble {
        position: absolute;
        top: -28px;
        transform: translateX(-50%);
        padding: 2px 6px;
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.8);
        color: #fff;
        font-size: 0.85rem;
        white-space: nowrap;
        pointer-events: none;
    }

    .slider-target {
        font-size: 1rem;
        text-align: left;
        min-width: 120px;
    }
</style>

<div class="p1-wrap">

    <div class="p1-section">
        <p>
            Cette partie dure 16 minutes au total.
        </p>
        <!-- More salient header -->
        <div class="p1-subtitle-card">
            <h5 xmlns="http://www.w3.org/1999/html">Votre mission</h5>
        </div>


        <p>
            Vous devrez décider comment <strong>répartir ces 16 minutes entre deux activités</strong>.
        </p>
        <!-- Activity 1 -->
        <div class="activity-title-box">
            Activité 1 – Exercices de logique
        </div>

        <p>
            <ul style="margin-top: 0; margin-bottom: 14px;">
                <li><strong>Objectif :</strong> résoudre le même type d’exercices que précédemment.</li>
                <li><strong>Rémunération :</strong> {{ piece_rate }}€ par exercice correctement résolu.</li>
            </ul>

        </p>

        <!-- Activity 2 -->
        <div class="activity-title-box">
            Activité 2 – Curseur
        </div>

        <p>
            {% if is_pilot %}
            <ul style="margin-top: 0; margin-bottom: 14px;">
                <li><strong>Principe :</strong> toutes les 7,5 secondes, un curseur et une position cible apparaîtront à l'écran.</li>
                <li><strong>Objectif :</strong> déplacer le curseur jusqu’à la position indiquée.</li>
                <li><strong>Rémunération :</strong> En plaçant correctement chacun des curseurs, vous gagnerez une rémunération fixe
            par minute. Chaque erreur réduit votre rémunération totale pour cette activité. Le montant de cette rémunération vous sera communiqué au moment de la décision.</li>
                <li><strong>Exemple :</strong> Faites glisser le point rond jusqu’au nombre indiqué comme cible à droite du curseur.</li>
            </ul>
            {% else %}
            <ul style="margin-top: 0; margin-bottom: 14px;">
                <li><strong>Principe :</strong> toutes les 7,5 secondes, un curseur et une position cible apparaîtront à l'écran.</li>
                <li><strong>Objectif :</strong> déplacer le curseur jusqu’à la position indiquée.</li>
                <li><strong>Rémunération :</strong> En plaçant correctement chacun des curseurs, vous gagnerez 0,40€
            par minute. Chaque erreur réduit votre rémunération totale pour cette activité de 0,05€.</li>
                <li><strong>Exemple :</strong> Faites glisser le point rond jusqu’au nombre indiqué comme cible à droite du curseur.</li>
            </ul>
            {% endif %}
        </p>


        <div class="slider-page" aria-hidden="true">
            <div class="slider-wrapper">
                <div class="slider-track">
                    <input
                        id="slider_demo_input"
                        type="range"
                        min="0"
                        max="100"
                        value="50"
                    >
                    <div id="slider_demo_bubble" class="slider-bubble">50</div>
                </div>

                <div class="slider-target">
                    Cible&nbsp;: <span id="slider_demo_target">10</span>
                </div>
            </div>
        </div>

    </div>
    <div class="p1-subtitle-card">
            <h5 xmlns="http://www.w3.org/1999/html">Paiement</h5>
    </div>
    <p>
        Si cette partie est sélectionnée pour votre paiement final, vous gagnerez la <strong>somme des rémunérations</strong>
    obtenues pour chaque activité.
    <p>
        Ce montant s’ajoutera aux 6,0€ garantis que vous recevrez pour votre participation.
    </p>
        </p>
    <div style="text-align:right;">
      {{ next_button }}
  </div>

</div>

<script>
(function () {
    var slider = document.getElementById('slider_demo_input');
    var bubble = document.getElementById('slider_demo_bubble');
    var targetEl = document.getElementById('slider_demo_target');

    if (!slider || !bubble || !targetEl) return;

    var target = 10;

    function updateBubble() {
        var val = Number(slider.value);
        var min = Number(slider.min);
        var max = Number(slider.max);

        var percent = (val - min) / (max - min);
        var trackWidth = slider.getBoundingClientRect().width;
        var thumbOffset = 14;

        var left = percent * (trackWidth - 2 * thumbOffset) + thumbOffset;

        bubble.style.left = left + 'px';
        bubble.textContent = val;
        targetEl.textContent = target;
    }

    slider.addEventListener('input', updateBubble);
    slider.addEventListener('change', updateBubble);

    updateBubble();
    window.addEventListener('resize', updateBubble);
})();
</script>

{% endblock %}