{{ extends "global/Page.html" }}
{{ block title }}Prolific Verification{{ endblock }}

{{ block content }}

<link rel="stylesheet" href="{{ static 'hiring-funnel.css' }}">

<p>Please confirm your Prolific information before starting.</p>
<p style="color: #2e7d32; font-size: 0.95em; margin-top: -5px;">
    Note: Your Prolific ID is automatically filled from the Prolific study link.
</p>

<div style="margin-top: 20px;">
    {{ formfield "prolific_pid" }}
    <input type="hidden" id="id_prolific_pid_from_url" name="prolific_pid_from_url" value="">
</div>

{{ next_button }}

<script>
(function () {
    const params = new URLSearchParams(window.location.search);

    const pid = params.get('PROLIFIC_PID') || params.get('prolific_pid') || params.get('participant_label') || '';

    const pidInput = document.getElementById('id_prolific_pid');
    const pidFromUrlInput = document.getElementById('id_prolific_pid_from_url');

    if (pidInput && pid && !pidInput.value) pidInput.value = pid;
    if (pidFromUrlInput && pid) pidFromUrlInput.value = pid;
})();
</script>

{{ endblock }}