{{ block content }}

<div class="card">
    <div class="card-body text-center">
        <h3>Thank You!</h3>
        
        <div class="success-icon mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16" style="color: #28a745;">
                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
            </svg>
        </div>

        {% if session.config.name != 'combined_public_goods' %}
        <div class="alert alert-success mt-4" role="alert">
            <h5 class="alert-heading">Confirm Your Completion</h5>
            <p>To receive payment on Prolific, please click the button below to confirm your completion.</p>
        </div>
        
        <div class="completion-box mt-4 mb-4">
            <p><strong>Your completion code is:</strong></p>
            <div class="completion-code">
                {{ completion_code }}
            </div>
        </div>
        
        <a href="{{ prolific_url }}" class="btn btn-success btn-lg" target="_blank">
            Click Here to Complete on Prolific
        </a>
        
        <p class="mt-4 text-muted">
            <small>If the button doesn't work, please copy and paste this URL into your browser:<br>
            <code>{{ prolific_url }}</code></small>
        </p>
        {% else %}
        <p class="mt-4">The experiment is now complete. Thank you for participating!</p>
        {% endif %}
    </div>
</div>

<style>
    .card {
        margin-top: 30px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .card-body {
        padding: 40px;
    }
    
    .success-icon {
        margin-top: 20px;
    }
    
    .completion-box {
        background-color: #f8f9fa;
        padding: 20px;
        border-radius: 5px;
        border: 2px dashed #28a745;
    }
    
    .completion-code {
        font-size: 1.8em;
        font-weight: bold;
        color: #28a745;
        font-family: monospace;
        padding: 15px;
        background-color: white;
        border-radius: 5px;
        display: inline-block;
        letter-spacing: 2px;
    }
    
    .btn-lg {
        padding: 15px 40px;
        font-size: 1.2em;
    }
</style>

{{ endblock }}