{{ block title }}
Failed training question three times
{{ endblock }}

{{ block content }}

<div class="card bg-mid m-0">
    <h2 class="card-header">❌ Study Participation Ended</h2>
    <div class="card-body">
        <div style="text-align: center; margin-bottom: 20px;">
            <div style="background-color: #f8d7da; border: 2px solid #f5c6cb; border-radius: 12px; padding: 30px; margin-bottom: 30px;">
                <h3 style="color: #721c24; margin-bottom: 20px;">Practice Question Not Passed</h3>
                <p style="color: #721c24; font-size: 18px; line-height: 1.6; margin-bottom: 15px;">
                    Unfortunately, you did not answer the practice question correctly after three attempts. 
                    This means you are no longer eligible to participate in the main experiment.
                </p>
                <p style="color: #721c24; font-size: 16px; line-height: 1.5;">
                    As mentioned in the instructions, <strong>no payment will be provided</strong> for incomplete participation.
                </p>
            </div>
            
            <div style="background-color: #e2e3e5; border: 2px solid #d6d8db; border-radius: 12px; padding: 25px; margin-bottom: 30px;">
                <h4 style="color: #383d41; margin-bottom: 15px;">📋 What This Means</h4>
                <p style="color: #383d41; font-size: 16px; line-height: 1.5; margin-bottom: 10px;">
                    • Your participation in this study has ended
                </p>
                <p style="color: #383d41; font-size: 16px; line-height: 1.5; margin-bottom: 10px;">
                    • You will not proceed to the main experiment
                </p>
                <p style="color: #383d41; font-size: 16px; line-height: 1.5;">
                    • No compensation will be provided
                </p>
            </div>
            
            <div style="background-color: #d1ecf1; border: 2px solid #bee5eb; border-radius: 12px; padding: 25px; margin-bottom: 30px;">
                <h4 style="color: #0c5460; margin-bottom: 15px;">💡 For Future Reference</h4>
                <p style="color: #0c5460; font-size: 16px; line-height: 1.5;">
                    Practice questions are designed to ensure participants understand the task before 
                    proceeding to the main experiment. When participating in future studies, please 
                    read all instructions carefully and take time to understand the concepts being tested.
                </p>
            </div>
            
            <div style="background-color: #fff3cd; border: 2px solid #ffeaa7; border-radius: 12px; padding: 25px; margin-bottom: 30px;">
                <h4 style="color: #856404; margin-bottom: 15px;">📧 Questions or Concerns?</h4>
                <p style="color: #856404; font-size: 16px; line-height: 1.5; margin-bottom: 10px;">
                    If you have any questions about this decision or the study in general, 
                    please contact the research team at:
                </p>
                <p style="color: #856404; font-size: 16px; font-weight: bold;">
                    <a href="mailto:collectivemindslab@csh.ac.at" style="color: #856404; text-decoration: none;">
                        collectivemindslab@csh.ac.at
                    </a>
                </p>
            </div>
        </div>
        
        {{ formfields }}
        
        <div style="text-align: center; margin-top: 30px;">
            <p style="font-size: 18px; color: #333; margin-bottom: 20px;">
                Thank you for your time. You may now close this window.
            </p>
            {{ next_button }}
        </div>
    </div>
</div>

<style>
.button {
    background-color: #6c757d;
    border: none;
    color: white;
    padding: 12px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 12px;
    transition: background-color 0.3s;
}

.button:hover {
    background-color: #5a6268;
}

.card {
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #ddd;
    padding: 15px 20px;
    margin: 0;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    border-radius: 8px 8px 0 0;
}

.card-body {
    padding: 25px;
}

.bg-mid {
    background-color: #ffffff;
}

.m-0 {
    margin: 0;
}

a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}
</style>

{{ endblock }}