{{ block content }}
<! –– Here, we style the necessary parts. ––>
<style>
    .otree-body {
        line-height: 1.6; /* Better line spacing */
        background-color: #f4f4f4; /* Light background for the page */
    }

    .page-header {
    padding-top: 5px;
}
    .matrix-table {
        border-collapse: separate; /* Updated for spacing between cells */
        border-spacing: 5px; /* Space between cells */
        margin: 0 auto; /* Center the table */
        webkit-user-select: none; /* Chrome/Safari */
        moz-user-select: none; /* Firefox */
        ms-user-select: none; /* IE10+ */
        user-select: none; /* Standard syntax */
    }
    .matrix-table td {
        width: 40px; /* Width of the cells */
        height: 25px; /* Smaller height for the cells */
        text-align: center;
        border: 1px solid #ddd;
        padding: 5px; /* Adjust padding to reduce overall cell size */
        font-size: 18px; /* Font size of the numbers */
        background-color: #ffffff; /* Background color of the cells */
    }

    #progress-container {
        width: 80%; /* Narrower progress bar for better design */
        background-color: lightgray;
        border-radius: 5px;
        margin: 20px auto 30px; /* More space around the progress bar */
    }
    #progress-bar {
        height: 20px;
        background-color: dimgrey;
        border-radius: 5px;
        transition: width 0.4s ease; /* Smooth transition for progress bar changes */
    }
    #progress-text {
        font-size: 18px; /* Increase the font size */
        text-align: left; /* Center the text */
        color: #333333; /* Change the color to a darker shade for better visibility */
        margin-top: 5px; /* Add space above the text */
        margin-bottom: 15px; /* Add space below the text */
    }
    .progress-label {
        display: block;
        margin-bottom: 5px; /* Reduced margin for compact design */
        font-size: 18px; /* Reduced size for subtlety */
        text-align: center; /* Ensure label is centered */
    }
    hr {
        border-top: 1px dashed #e0e0e0; /* Light grey dashed border */
    }
    .card-body {
        font-size:18px;
    }
</style>

<!-- Show the progress bar only for treatment1 and treatment2 -->
{{ if treatment == 'treatment1' or treatment == 'treatment2' }}
    <!-- Overall Progress Bar -->
    <div class="progress-label">Overall progress in the study</div>
    <div id="progress-container">
        <div id="progress-bar" style="width: {{ progress_percent }}%;"></div>
    </div>
    <hr>
    <p id="progress-text">Round {{ player.round_number }}/{{ C.NUM_ROUNDS }} in Session 1/4:</p>
{{ else }}
    <!-- Display only the round number for other treatments -->
    <p id="progress-text">Round {{ player.round_number }}:</p>
{{ endif }}

<!-- Task -->
<div class="card">
    <div class="card-body">
        <p>How many times does the number ‘1’ appear in the table below? <br></p>
    </div>
</div>
<br>

<!-- Matrix Table -->
<table class="matrix-table">
    {{ for row in matrix }}
        <tr>
            {{ for cell in row }}
                <td>{{ cell }}</td>
            {{ endfor }}
        </tr>
    {{ endfor }}
</table>


<!-- Number Entry Field -->
<div style="margin-top: 20px;">
    {{ formfield "number_entered" }}
    {{ formfield_errors 'number_entered' }}
</div>
<!-- Next Button -->
<div style="margin-top: 10px;">
{{ block next_button }}
<button type="submit" class="btn btn-primary">Next</button>
{{ endblock }}

</div>
<br>
<button onclick="skipTask()" type="button" class="btn btn-danger">Skip the task</button>


<!-- JS: When the Skip button is clicked, a nonsensical value indicates in the data that the button was skipped -->
<script type="text/javascript">
    function skipTask() {
        // Set the value to 999 without showing it to the participant
        var numberInput = document.getElementsByName('number_entered')[0];
        numberInput.value = 999;

        // Hide the input field so the participant does not see the value being set
        numberInput.style.visibility = 'hidden';

        // Submit the form
        document.forms[0].submit();
    }
</script>

{{ endblock }}