{{ block styles }}
    <link href="{{ static 'global/css/styles.css' }}" rel="stylesheet">
    <link href="{{ static 'global/css/screenshot.css' }}" rel="stylesheet">
    <link href="{{ static 'global/css/font.css' }}" rel="stylesheet">
{{ endblock }}

{{ block scripts }}
    <script src="{{ static 'global/js/disable.js' }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var popoverElement = document.getElementById('instructions-popover');
            var contentEl = document.getElementById('practice-popover-content');
            if (!popoverElement || !contentEl) return;
            var html = contentEl.innerHTML.trim();
            if (!html) return;
            var popover = new bootstrap.Popover(popoverElement, {
                trigger: 'manual',
                placement: 'right',
                html: true,
                content: function () { return html; }
            });
            popover.show();
        });
    </script>
{{ endblock }}

{{ extends 'practice/Title.html' }}

{{ block content }}
    <div id="practice-popover-content" style="display:none">{{ third_party_popover_body }}</div>
    <div class="instructions">
        {{ if is_single }}
            <p>In this step, you will see your estimate and an AI's estimate before you enter your final answer on the next screen.</p>
        {{ else }}
            <p>
                In this step, you will have 60 seconds to discuss with your partner.
                {% if contains_ai %}
                    {% if survey_third_party_is_ai %}
                    You will also see an AI's estimate.
                    {% else %}
                    You will also see a previous participant's estimate.
                    {% endif %}
                {% endif %}
            </p>
            <p> During this time, you can:
                <li>Share how you made your estimate.</li>
                <li>Discuss if you agree with each other.</li>
                <li>Decide on your team's approach.</li>
            </p>
        {{ endif }}
        <p>Below is the interface screenshot for the actual task.</p>
    </div>
    <div class="screenshot-mode">
        <div class="task-group-screen">
            {{ include 'task_group/includes/info_table_reversed.html' }}

            {{ if is_single }}
                {{ include 'task_group/includes/solo_chat_stage.html' }}
            {{ else }}
                {{ include 'practice/includes/chat_panel.html' }}
            {{ endif }}

        </div>
    </div>
    {{ next_button }}

{{ endblock }}