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

{{ block scripts }}
    <script src="{{ static 'global/js/disable.js' }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const inputs = document.querySelectorAll('input');
            inputs.forEach(input => {
                input.addEventListener('mousedown', e => e.preventDefault());
                input.addEventListener('keydown', e => e.preventDefault());
            });
            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 enter your <b>final</b> estimate for this student (a number from 1–100).</p>
        {{ else }}
            <p>In this step, you and your partner will each enter your estimate <b>separately</b> after your discussion. There might be situation that:
               <li>
                If you both enter the same number, that number becomes your team's final estimate.
               </li>
                <li>
                    If you and your partner enter different numbers, the average of the two numbers will be used as your team's final estimate.
               </li>
            </p>
        {{ endif }}
        <p>Below is the interface screenshot of 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_team_review.html' }}
            {{ else }}
                {{ include 'practice/includes/chat_panel.html' }}
            {{ endif }}
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; max-width: auto; margin: 0 auto;">
            {{ formfields }}
        </div>
    </div>
    {{ next_button }}

{{ endblock }}