{{ block title }}
🎓 Training Complete
{{ endblock }}

{{ block content }}
<div class="card bg-mid m-0">
<h2 class="card-header">📌 Final Step: Commitment to Continue</h2>
<div class="card-body">
<h5><strong>Would you like to continue?</strong></h5>
<p>
    Congratulations on completing the training! You now understand the experiment and can continue to the online part. Before moving forward, we need you to understand what you're committing to.
</p>

<!-- Critical Requirements -->
<div class="danger-box">
    <h6><strong>⚠️ Critical Requirements - Please Read Carefully</strong></h6>
    <p><strong>You will be participating in a REAL-TIME experiment with other real people.</strong> Other participants are depending on you to stay active and engaged throughout the entire session.</p>
    
    <p><strong>You MUST:</strong></p>
    <ul>
        <li>Stay at your computer for the <strong>entire duration</strong> (~35 minute once the experiment begins)</li>
        <li><strong>Keep this tab active</strong> - switching tabs or windows will cause technical issues</li>
        <li>Remain <strong>actively engaged</strong> the whole time - you're working with real people in real-time</li>
        <li>Wait for your group to form (up to 10 minutes - you'll be paid $1.50 for waiting if you cannot be grouped)</li>
    </ul>
    
    <p><strong>⛔ Important:</strong> If you become inactive, quit, or switch tabs during the experiment, you will <strong>NOT be paid</strong> for either the training or the experiment, as this disrupts the experience for other participants.</p>
</div>
{{ block title }}
🎓 Training Complete
{{ endblock }}

{{ block content }}
<div class="card bg-mid m-0">
<h2 class="card-header">📌 Final Step: Commitment to Continue</h2>
<div class="card-body">
<h5><strong>Would you like to continue?</strong></h5>
<p>
    Congratulations on completing the training! You now understand the experiment and have two options:
</p>

<!-- Payment Structure Reminder -->
<div class="payment-reminder">
    <h6><strong>💰 Your Two Options:</strong></h6>
    <ul>
        <li><strong>Exit now:</strong> You'll receive $2.50 for completing the training phase and can return to Prolific</li>
        <li><strong>Continue to the experiment:</strong> You'll receive:
            <ul>
                <li>$1.50 if you wait for ten minutes and we cannot form a group</li>
                <li>$4.50-$11.25 for the ~35 minute experiment, depending on your performance and decisions</li>
                <li><strong>Total potential: $7-$13.75</strong></li>
            </ul>
        </li>
    </ul>
</div>

<!-- Requirements if continuing -->
<div class="process-box" style="margin-top: 20px;">
    <h6><strong>📋 If you would like to continue to the experiment, please consider the following:</strong></h6>
    <p>This is a <strong>real-time experiment</strong> where you'll work with 3 other real participants. To ensure a good experience for everyone:</p>
    
    <ul>
        <li><strong>Time commitment:</strong> ~35 minute once the experiment begins, plus up to 10 minutes of waiting</li>
        <li><strong>Stay on this tab:</strong> Switching tabs or windows can cause technical issues with the real-time features</li>
        <li><strong>Stay at your computer:</strong> Since you'll be working with others in real-time, please remain active and engaged throughout</li>
        <li><strong>Group matching:</strong> You'll wait briefly while we match you with 3 other participants</li>
    </ul>
    
    <p><strong>Please note:</strong> If you become inactive or leave during the experiment, you won't receive payment for the training or experiment, as this affects the other participants' experience.</p>
</div>

<p class="green-box">
    ✅ Please choose the option that works best for you:
</p>
</div>
</div>

<br>

<div>
    <button type="button" class="next-button" onclick="setCommitment(true)">✅ I'd Like to Continue to the Experiment</button>
    <button type="button" class="next-button" onclick="setCommitment(false)">🚪 Exit Now and Return to Prolific</button>
    <input type="hidden" name="committed" id="id_committed" value="">
</div>

<script>
function setCommitment(value) {
    document.getElementById('id_committed').value = value ? 'True' : 'False';
    const commitButtons = document.querySelectorAll('[onclick^="setCommitment"]');
    commitButtons.forEach(btn => btn.classList.remove('selected'));
    event.target.classList.add('selected');
    document.querySelector('form').submit();
}
</script>

{{ endblock }}

{{ block styles }}
<style>
.green-box {
    margin-top: 20px;
    background-color: #d4edda;
    padding: 12px;
    border-left: 5px solid #28a745;
    border-radius: 4px;
}

.payment-reminder {
    margin: 15px 0;
    background-color: #fff3cd;
    padding: 15px;
    border-left: 5px solid #ffc107;
    border-radius: 4px;
}

.payment-reminder h6 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #856404;
}

.payment-reminder ul {
    margin-bottom: 0;
}

.process-box {
    margin: 15px 0;
    background-color: #e8f5e8;
    padding: 15px;
    border-left: 5px solid #198754;
    border-radius: 6px;
}

.process-box h6 {
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: bold;
    color: #333;
}

.process-box ul {
    margin-bottom: 10px;
}

.next-button {
    background-color: white;
    color: black;
    border: 2px solid #008CBA;
    font-size: 16px;
    padding: 10px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    border-radius: 12px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.next-button:hover {
    background-color: #008CBA;
    color: white;
}

.next-button:active {
    background-color: #005f8b;
    color: white;
    border: 2px solid #005f8b;
}

.next-button.selected {
    background-color: #008CBA;
    color: white;
}
</style>
{{ endblock }}
<!-- Payment Structure Reminder -->
<div class="payment-reminder" style="margin-top: 20px;">
    <h6><strong>💰 Payment Structure:</strong></h6>
    <ul>
        <li><strong>If you exit now:</strong> You'll receive $2.50 for completing the training phase</li>
        <li><strong>If you continue to the experiment:</strong>
            <ul>
                <li>$1.50 for waiting (up to 10 minutes) for a group to form</li>
                <li>$4.50-$11.25 for the ~35 minute experiment, depending on your performance</li>
                <li><strong>Total potential: $7-$13.75</strong></li>
            </ul>
        </li>
    </ul>
</div>

<div class="process-box" style="margin-top: 20px;">
    <h6><strong>⏱️ What Happens Next:</strong></h6>
    <p>If you commit, you'll enter a waiting room where we'll match you with 3 other participants. Once your group is ready, the experiment will begin. <strong>You must stay focused and active the entire time.</strong></p>
</div>

<p class="green-box">
    ✅ Please make your choice below. Think carefully about whether you can commit to staying active for the full session.
</p>
</div>
</div>

<br>

<div>
    <button type="button" class="next-button" onclick="setCommitment(true)">✅ I Commit and Will Stay Active for the Full Session</button>
    <button type="button" class="next-button" onclick="setCommitment(false)">🚪 No Thanks – Exit to Prolific Now</button>
    <input type="hidden" name="committed" id="id_committed" value="">
</div>

<script>
function setCommitment(value) {
    document.getElementById('id_committed').value = value ? 'True' : 'False';
    const commitButtons = document.querySelectorAll('[onclick^="setCommitment"]');
    commitButtons.forEach(btn => btn.classList.remove('selected'));
    event.target.classList.add('selected');
    document.querySelector('form').submit();
}
</script>

{{ endblock }}

{{ block styles }}
<style>
.green-box {
    margin-top: 20px;
    background-color: #d4edda;
    padding: 12px;
    border-left: 5px solid #28a745;
    border-radius: 4px;
}

.payment-reminder {
    margin: 15px 0;
    background-color: #fff3cd;
    padding: 15px;
    border-left: 5px solid #ffc107;
    border-radius: 4px;
}

.payment-reminder h6 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #856404;
}

.payment-reminder ul {
    margin-bottom: 0;
}

.danger-box {
    margin: 15px 0;
    background-color: #f8d7da;
    padding: 15px;
    border-left: 5px solid #dc3545;
    border-radius: 6px;
    font-weight: bold;
}

.danger-box h6 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #721c24;
}

.danger-box ul {
    margin-bottom: 10px;
}

.process-box {
    margin: 15px 0;
    background-color: #e8f5e8;
    padding: 15px;
    border-left: 5px solid #198754;
    border-radius: 6px;
}

.process-box h6 {
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: bold;
    color: #333;
}

.next-button {
    background-color: white;
    color: black;
    border: 2px solid #008CBA;
    font-size: 16px;
    padding: 10px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    border-radius: 12px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.next-button:hover {
    background-color: #008CBA;
    color: white;
}

.next-button:active {
    background-color: #005f8b;
    color: white;
    border: 2px solid #005f8b;
}

.next-button.selected {
    background-color: #008CBA;
    color: white;
}
</style>
{{ endblock }}