{% extends "global/Page.html" %}
{% block content %}

<h3>Connection check (2 minutes)</h3>

<p>
    Please use the video room now to briefly introduce yourselves and confirm that the connection works.
    You have <strong>2 minutes</strong> before this page auto-advances.
</p>

<div style="border: 2px solid #444; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
    <p><strong>Before continuing, please check:</strong></p>
    <ul>
        <li>You can <strong>hear</strong> your partner.</li>
        <li>You can <strong>see</strong> your partner.</li>
        <li>Your partner can hear and see you.</li>
    </ul>
    <p>
        If you accidentally closed the video popup you will not be able to proceed with the experiment - in this case please return the study.
    </p>
</div>


<form method="post">
    <p><strong>Can you hear your partner?</strong></p>
    {{ form.can_hear_partner }}

    <br><br>

    <p><strong>Can you see your partner?</strong></p>
    {{ form.can_see_partner }}

    <br><br>

    <button class="btn btn-primary">Continue</button>
</form>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // During the connection check, talking is allowed -> hide the "Do not talk" overlay in the popup
    try {
        localStorage.setItem('pacman_phase', 'joint');
    } catch (e) {
        console.warn('Could not set pacman_phase in localStorage', e);
    }
});
</script>

{% endblock %}