{{ block title }}
    {{ if player.round_number == 1 }}
    Welcome to the first round of the experiment! <br>
    You will pick the rules for groupwork 
    {{ else }}
    What would you pick as the Professor for the new worksheet?
    {{ endif }}
    {{ endblock }}

    {{ block content }}

    {{ if player.participant.admonish == 1 }}
    <div class="warning_box">
    <div class="warning_content">
    <h2 class="warning_text">⚠️ Warning</h2>
    <p class="warning_message">{{ admonish_msg }}</p>
    </div>
    </div>
    {{ endif }}

    <!-- What would you do as the Professor Section -->
    <div class="card bg-light m-0">
        <div class="card">
            <h2 class="card-header">What would you do as the Professor?</h2>
            <div class="card-body">
                <p class="card-text">
                    In the experiment, you will have to play the role of a Teaching Assistant that votes on what rules the class should have for the group work. You will also vote on whether the rules should be decided by majority voting, or by the Professor.
                    <br><br>
                    At the start of each round, we will ask you what rule you would pick if you were the Professor making the decision herself. You will not get Feedback on this choice within the experiment. However, we record these choices for a lottery. The participant across all groups that do our experiment with the best Professor choices will win an additional $20.
                </p>
            </div>
        </div>
    </div>

    <br>

    <!-- Strategy Vote Section -->
    <div class="card bg-light m-0">
        <div class="card">
            <h2 class="card-header">Private Vote: Your Personal Choice</h2>
            <div class="card-body">
                <p class="card-text">
                    Over the next few pages, you will have to vote as a Teaching Assistant about what the rules for the group work should be. You will also have to vote for either making a majority vote, or having the Professor make the decision. 
                    <br><br>
                    If you were the Professor, which rules would you choose?
                </p>
            </div>
        </div>
    </div>

    <br>

    <form method="post">
        <div class="button-section">
            <h4> What would you choose if you were the Professor?</h4>
            <div class="button-container-2x2">
                <button type="button" class="button button2 equal-button" onclick="setStrategyVote(1)">{{ button_1 }}</button>
                <button type="button" class="button button2 equal-button" onclick="setStrategyVote(2)">{{ button_2 }}</button>
                <button type="button" class="button button2 equal-button" onclick="setStrategyVote(3)">{{ button_3 }}</button>
                <button type="button" class="button button2 equal-button" onclick="setStrategyVote(4)">{{ button_4 }}</button>
            </div>
            <input type="hidden" name="strategy_vote_private" id="id_strategy_vote_private" value="">
        </div>

        <!-- Hidden field for reactivation -->
        <input type="hidden" name="resurrect_me" id="id_resurrect_me" value="">
    </form>

    <br><br>

    <!-- PROGRESS BAR -->
    <div class="card bg-light m-0">
        <div class="card">
            <div class="card-body">
                <h5 style="text-align: center; margin-bottom: 10px;">Experiment Progress</h5>
                <div class="progress-container">
                    <div class="progress-bar" id="progressBar"></div>
                </div>
                <div class="progress-labels">
                    <span>First worksheet</span>
                    <span>Last worksheet</span>
                </div>
            </div>
        </div>
    </div>

    <br>

    <!-- NOTE ABOUT PROFESSOR LOTTERY -->
    <div class="card bg-light m-0">
        <div class="card">
            <div class="card-body">
                <p class="card-text">
                    <strong>Note:</strong> You will not receive feedback on your choice as Professor in this experiment. However, we record these choices for a lottery. The participant across all groups that do our experiment with the best Professor choices will win an additional $20.
                </p>
            </div>
        </div>
    </div>

    <script>
    let strategySelected = false;

    // Set resurrect_me to False on page load
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('id_resurrect_me').value = 'False';
        
        // Calculate and display progress
        const roundNum = {{ round_num }};
        const lastRound = {{ last_round }};
        const progress = (roundNum / lastRound) * 100;
        
        document.getElementById('progressBar').style.width = progress + '%';
    });

    function setStrategyVote(value) {
        document.getElementById('id_strategy_vote_private').value = value;
        strategySelected = true;

        // Update UI - highlight selected button
        const strategyButtons = document.querySelectorAll('[onclick^="setStrategyVote"]');
        strategyButtons.forEach(button => button.classList.remove('selected'));
        event.target.classList.add('selected');

        // Submit the form immediately after selection
        document.querySelector('form').submit();
    }

    function setResurrectMe() {
        document.getElementById('id_resurrect_me').value = 'True';
        const resurrectButton = document.getElementById('resurrect-button');
        resurrectButton.textContent = 'Reactivation Recorded';
        resurrectButton.style.backgroundColor = '#4CAF50';
        resurrectButton.style.borderColor = '#4CAF50';
        resurrectButton.disabled = true;
    }
    </script>

    {{ if player.participant.active == 0 }}
    <div class="inactive_box">
        <h1 class="inactive_text"> You have been marked inactive. <br> To rejoin the experiment on the next page, press this button. </h1>
        <button type="button" id="resurrect-button" class="button button2 inactive-button" onclick="setResurrectMe()"> Active</button>
    </div>
    {{ endif }}

    {{ endblock }}

    {{ block styles }}
    <style>
    .warning_box {
        background-color: #fff3cd;
        border: 1px solid #ffeaa7;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
    }

    .warning_content {
        text-align: center;
    }

    .warning_text {
        color: #856404;
        margin-bottom: 10px;
    }

    .warning_message {
        color: #856404;
        margin: 0;
    }

    .inactive_box {
        height: 100%;
        width: 100%;
        background-color: #d3d3d3;
        opacity: 90%;
        position: fixed;
        left: 0;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .inactive_text {
        color: #cc0000;
        opacity: 100%;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
    }

    .inactive-button {
        font-size: 20px;
        padding: 15px 30px;
        margin-top: 10px;
    }

    .button-section {
        text-align: center;
    }

    /* New 2x2 grid container for strategy buttons */
    .button-container-2x2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 15px;
        max-width: 600px;
        margin: 15px auto 0;
        padding: 0 20px;
    }

    .equal-button {
        text-align: center;
        padding: 12px 20px;
        min-width: 150px;
        white-space: normal;
        box-sizing: border-box;
    }

    /* Strategy buttons in 2x2 grid */
    .button-container-2x2 .equal-button {
        min-height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 10px;
        line-height: 1.4;
    }

    /* Button styling */
    .button {
        background-color: #3182bd;
        border: none;
        color: white;
        border-radius: 12px;
        font-size: 18px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .button2 {
        background-color: white;
        color: black;
        border: 2px solid #008CBA;
    }

    .button2:hover {
        background-color: #008CBA;
        color: white;
    }

    .button2.selected {
        background-color: #4CAF50;
        color: white;
        border: 2px solid #4CAF50;
        font-weight: bold;
    }

    /* Responsive for smaller screens */
    @media (max-width: 768px) {
        .button-container-2x2 {
            grid-template-columns: 1fr;
            grid-template-rows: repeat(4, 1fr);
            max-width: 300px;
        }

        .equal-button {
            width: 90%;
            max-width: 300px;
        }
    }

    @media (max-width: 480px) {
        .button-container-2x2 {
            padding: 0 10px;
        }
        
        .button-container-2x2 .equal-button {
            min-height: 60px;
            font-size: 16px;
            padding: 10px 8px;
        }
    }

    /* Progress bar styles */
    .progress-container {
        width: 100%;
        height: 30px;
        background-color: #e9ecef;
        border-radius: 15px;
        overflow: hidden;
    }

    .progress-bar {
        height: 100%;
        background-color: #008CBA;
        width: 0%;
        transition: width 0.5s ease;
        border-radius: 15px;
    }

    .progress-labels {
        display: flex;
        justify-content: space-between;
        margin-top: 8px;
        font-size: 14px;
        color: #666;
    }
    </style>
    {{ endblock }}