{{ extends "global/Page.html" }}

{{ block title }}
Exit
{{ endblock }}

{{ block content }}

<style>
.page-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px;
}
.card {
    background: #f8f9fa;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    padding: 32px;
    border: 1px solid #ececec;
}
.badge {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff3f3;
    color: #a94442;
    font-weight: 700;
    margin-bottom: 18px;
}
.title {
    font-size: 28px;
    font-weight: 700;
    margin: 8px 0 12px;
}
.message {
    font-size: 18px;
    line-height: 1.7;
    color: #333;
    margin-bottom: 18px;
}
.note {
    background: #ffffff;
    border-left: 4px solid #d9534f;
    padding: 14px 16px;
    border-radius: 10px;
    color: #7a2d2d;
    margin-top: 14px;
}
</style>

<div class="page-wrap">
    <div class="card">
        <div class="badge">Session ended</div>
        <div class="title">{{ exit_title }}</div>

        <div class="message">
            {{ exit_message }}
        </div>

        <div class="note">
            {{ exit_note }}
        </div>

        {% if session.config.name != 'combined_public_goods' %}
        <div style="margin-top: 24px; background: #f0faf0; border: 2px dashed #28a745; border-radius: 10px; padding: 20px; text-align: center;">
            <p style="font-weight: 700; margin-bottom: 8px;">Your completion code is:</p>
            <div style="font-size: 1.8em; font-weight: bold; color: #28a745; font-family: monospace; padding: 10px; background: white; border-radius: 5px; display: inline-block; letter-spacing: 2px;">
                {{ completion_code }}
            </div>
            <p style="margin-top: 14px;">
                <a href="{{ prolific_url }}" class="btn btn-success btn-lg" target="_blank" style="display: inline-block; padding: 12px 32px; background: #28a745; color: white; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 16px;">
                    Click Here to Complete on Prolific
                </a>
            </p>
            <p style="margin-top: 10px; font-size: 13px; color: #666;">
                If the button doesn't work, copy and paste this URL into your browser:<br>
                <code>{{ prolific_url }}</code>
            </p>
        </div>
        {% endif %}
    </div>
</div>

{{ endblock }}