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

<h2>Decide which fruit to collect</h2>

{% if is_practice %}
    <p>
        <strong>Practice trial:</strong> this discussion phase will advance in 2 seconds, because you will be instructed which fruit to collect on the next screen.
    </p>
{% elif is_parallel %}
    <p>
        <strong>Parallel trial:</strong> this phase will advance after 2 seconds.
    </p>
    <p>
        You will each complete the task individually so please do not communicate with each other.
    </p>
{% else %}
    <p>
        You now have <strong>1 minute</strong> to discuss and decide which fruit to collect.
        Remember: you should make a final decision about the fruit you will collect together.
    </p>
    <p>This page will automatically continue after 1 minute.</p>
{% endif %}

<hr>

<p><strong>Target fruits for this trial:</strong></p>

<div style="display: flex; gap: 40px; align-items: center; margin-top: 20px; margin-bottom: 30px;">

    <div style="text-align: center;">
        <svg width="90" height="80">
            <polygon
              points="45,5 5,75 85,75"
              fill="{{ option1_color }}"
              stroke="black"
              stroke-width="2"
              vector-effect="non-scaling-stroke"
            />
        </svg>
        <div>Fruit 1</div>
    </div>

    <div style="text-align: center;">
        <svg width="90" height="80">
            <polygon
              points="45,5 5,75 85,75"
              fill="{{ option2_color }}"
              stroke="black"
              stroke-width="2"
              vector-effect="non-scaling-stroke"
            />
        </svg>
        <div>Fruit 2</div>
    </div>

</div>

<p>
    This page will automatically continue after
    <strong>{{ timeout_seconds }} seconds</strong>.
</p>

<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 %}