{{ block title }}
    Thanks for participating
{{ endblock }}
{{ block content }}

    <div class="result-shell">
        <div class="result-card">
            <div class="result-box result-box-info">
                <p>You earned {{ player.bargain_earnings|to2 }} GBP from the first part of this experiment.</p>
            </div>

            <div class="result-box result-box-info">
                <p>Please copy-paste the validation code in Prolific <b>(and please note down the code in case of problem)</b>.</p>
            </div>

            {% if player.participant.finished %}
                {% if prolific_completion_url %}
                    <div class="result-box result-box-highlight">
                        <p><b>Prolific completion link:</b></p>
                        <p><a href="{{ prolific_completion_url }}" target="_blank">{{ prolific_completion_url }}</a></p>
                    </div>
                {% else %}
                    <div class="result-box result-box-warning">
                        <p>The Prolific completion link is not configured for this session. Please take a screenshot and contact us if needed.</p>
                    </div>
                {% endif %}
                <div class="result-box result-box-info">
                    <p><b>Thanks again!</b></p>
                </div>
	            {% else %}
	                <div class="result-box result-box-warning">
	                    <p>If you see this message, an error might have occurred. Please take a screenshot and contact us if you do not receive your payment.</p>
	                </div>
	            {% endif %}
        </div>
    </div>

{{ endblock }}

{{ block styles }}
    <style>
        body {
            background: #eef3f7;
        }

        .result-shell {
            max-width: 860px;
            margin: 0 auto;
        }

        .result-card {
            background: #fbfdff;
            border: 1px solid #d4dde6;
            border-radius: 14px;
            box-shadow: 0 8px 24px rgba(30, 48, 66, 0.06);
            padding: 22px 24px;
        }

        .result-box {
            margin: 14px 0;
            padding: 12px 14px;
            border-radius: 8px;
        }

        .result-box p {
            margin-bottom: 0;
            line-height: 1.7;
            text-align: justify;
        }

        .result-box-info {
            background: #edf4fa;
            border-left: 4px solid #4e6f8c;
            color: #355066;
        }

        .result-box-highlight {
            background: #f6f1e7;
            border-left: 4px solid #b79a62;
            color: #57451f;
        }

        .result-box-warning {
            background: #fff1ef;
            border-left: 4px solid #c64b3c;
            color: #7c4f48;
        }
    </style>
{{ endblock }}