{{ extends "otree/Page.html" }}

{{ block global_styles  }}
    <link rel="stylesheet" href="{{ static 'styles.css' }}">
    <link rel="stylesheet" href="{{ static 'hiring-funnel.css' }}">
    <script src="{{ static 'otai-utils.js' }}"></script>
    <style>
        :root {
            --progress-header-height: 88px;
            --instruction-recap-gap: 12px;
            --instruction-recap-top: calc(var(--progress-header-height) + var(--instruction-recap-gap));
        }
        .progress-bar-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: white;
            padding: 10px 20px;
            z-index: 1000;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .progress-bar-container {
            width: 100%;
            background-color: #e9ecef;
            border-radius: 4px;
            height: 8px;
            margin-bottom: 20px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .progress-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, #4CAF50, #45a049);
            transition: width 0.3s ease;
            border-radius: 4px;
        }
        .progress-text {
            font-size: 12px;
            color: #666;
            margin-top: 4px;
            text-align: right;
        }
        .round-text {
            font-size: 13px;
            color: #333;
            margin-top: 6px;
            text-align: left;
            font-weight: 600;
        }
        body {
            padding-top: 60px;
        }
    </style>
{{ endblock }}

{{ block page_body }}
    <div class="progress-bar-wrapper">
        <div class="progress-bar-container">
            <div class="progress-bar-fill" style="width: {{ progress_percentage }}%"></div>
        </div>
        <div class="progress-text">Study Progress: {{ progress_percentage }}%</div>
        {{ if show_round_counter }}
            <div class="round-text">Round {{ current_main_round }} of {{ total_main_rounds }}</div>
        {{ endif }}
    </div>
    
    {{ block content }}{{ endblock }}

    {{ if show_instruction_recap }}
    <button type="button" class="instruction-recap-button" id="instruction-recap-open">Instructions</button>
    <div class="instruction-recap-backdrop" id="instruction-recap-backdrop" aria-hidden="true">
        <div class="instruction-recap-panel" role="dialog" aria-modal="true" aria-labelledby="instruction-recap-title">
            <button type="button" class="instruction-recap-x" id="instruction-recap-x" aria-label="Close instruction recap">x</button>
            <h2 id="instruction-recap-title">Instruction Recap</h2>

            <section>
                <h3>Hiring Task and Funnel</h3>
                <p>Imagine you are a member of the hiring committee at a mid-sized company hiring a Junior Analyst. Your goal is to hire the candidate with the highest true quality in each round.</p>
                <p>True quality follows a normal distribution with mean {{ mu }} and standard deviation {{ sigma }}.</p>
                <img src="{{ static 'true_quality.png' }}" alt="Distribution of true quality" class="instruction-recap-image">

                {{ if is_condition_1 }}
                <p>You will evaluate {{ num_candidates }} candidates through a 3-gate funnel: {{ num_candidates }} -> {{ gate1_select }} -> {{ gate2_select }} -> {{ final_select }}.</p>
                <ul>
                    <li>Gate 1: select {{ gate1_select }} candidates based on Resume scores.</li>
                    <li>Gate 2: select {{ gate2_select }} candidates based on Resume and Zoom scores.</li>
                    <li>Gate 3: select {{ final_select }} final hire based on Resume, Zoom, and In-person scores.</li>
                </ul>
                {{ else }}
                <p>You will see {{ gate2_select }} finalists selected by another participant and choose {{ final_select }} candidate to hire.</p>
                {{ endif }}
            </section>

            <section>
                <h2>Score Interpretation and Noise</h2>
                <p>
                    Resume, Zoom, and In-person scores are noisy signals of a candidate's true quality.
                    Higher scores are better, but no score is perfectly accurate.
                </p>
                <ul>
                    <li>Resume score noise standard deviation: {{ sigma_resume }}</li>
                    <li>Zoom score noise standard deviation: {{ sigma_zoom }}</li>
                    <li>In-person score noise standard deviation: {{ sigma_inperson }}</li>
                </ul>
                <p>
                    The noise at each stage is independent. This means that a candidate may perform better than their true quality in one stage, and worse than their true quality in another stage—each stage’s error is drawn fresh.
                </p>
            </section>

            <section>
                <h2>Click-to-Reveal</h2>
                {{ if is_standard }}
                <ul>
                    <li>Each score cell is hidden initially.</li>
                    <li>Click an individual score cell to reveal that candidate's score for that stage.</li>
                    <li>Revealing one score cell does not reveal other candidates' scores.</li>
                    <li>When moving to the next stage, score cells start hidden again.</li>
                    <li>You may re-reveal any score cells you want in the new stage.</li>
                    <li>You do NOT need to click open every score before making a selection.</li>
                    <li>Hidden cells say <strong>click to reveal</strong>.</li>
                </ul>
                
                {{ else }}
                {{ if is_blind }}
                <ul>
                    <li>Each score cell is hidden initially.</li>
                    <li>Click an individual score cell to reveal that candidate's score for that stage.</li>
                    <li>Revealing one score cell does not reveal other candidates' scores.</li>
                    <li>You are making the final hiring decision from the finalist set shown on the page. There is no additional screening stage after this page.</li>
                    <li>You do NOT need to click open every score before making a selection.</li>
                    <li>Hidden cells say <strong>click to reveal</strong>.</li>
                </ul>
                
                {{ endif }}
                {{ endif }}
            </section>

            <section>
                <h3>Bonus Payment</h3>
                <p>Your final bonus is based on one randomly selected main round. The bonus depends on the true quality of the candidate hired in that selected round, so your goal in every round is to maximize the true quality of the final hire.</p>
            </section>

            <div class="instruction-recap-actions">
                <button type="button" class="instruction-recap-close" id="instruction-recap-close">Close</button>
            </div>
        </div>
    </div>
    <script>
    (function () {
        const openButton = document.getElementById('instruction-recap-open');
        const backdrop = document.getElementById('instruction-recap-backdrop');
        const closeButton = document.getElementById('instruction-recap-close');
        const xButton = document.getElementById('instruction-recap-x');
        if (!openButton || !backdrop) return;

        function openRecap() {
            backdrop.classList.add('is-open');
            backdrop.setAttribute('aria-hidden', 'false');
        }

        function closeRecap() {
            backdrop.classList.remove('is-open');
            backdrop.setAttribute('aria-hidden', 'true');
        }

        openButton.addEventListener('click', openRecap);
        if (closeButton) closeButton.addEventListener('click', closeRecap);
        if (xButton) xButton.addEventListener('click', closeRecap);
        backdrop.addEventListener('click', function (event) {
            if (event.target === backdrop) closeRecap();
        });
        document.addEventListener('keydown', function (event) {
            if (event.key === 'Escape' && backdrop.classList.contains('is-open')) closeRecap();
        });
    })();
    </script>
    {{ endif }}
{{ endblock }}