{{ block title }}
Attention Check Fail
{{ 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;">Attention Check Not Passed</h3>
                <p style="color: #721c24; font-size: 18px; line-height: 1.6; margin-bottom: 15px;">
                    Unfortunately, you did not select the highlighted option in the practice questions. 
                    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;">
                    Attention checks are important for ensuring data quality in research studies. 
                    When participating in future studies, please read all instructions carefully and 
                    pay attention to any highlighted or emphasized options.
                </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 }}