{{ block content }}

<style>
    .otree-body {
        line-height: 1.6; /* Better line spacing */
        background-color: #f4f4f4; /* Light background for the page */
    }
    .page-header {
    padding-top: 5px;
    }
    .symbol-display {
        font-size: 30px;
        margin-bottom: 10px;
        border: 2px solid #4b4443;
        font-family: 'Consolas', 'Courier New', monospace;
        padding: 15px;
        display: inline-block;
        background-color: #ffffff;
        webkit-user-select: none; /* Chrome/Safari */
        moz-user-select: none; /* Firefox */
        ms-user-select: none; /* IE10+ */
        user-select: none; /* Standard syntax */
    }
    #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 4/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>What sequence of characters do you see in the box below?<br></p>
    </div>
</div>
<br>

<!-- Symbol Display -->
<div class="symbol-display">
    {{ random_string }}
</div>
<br><br>


<!-- Transcription Field -->
<div style="margin-top: 10px;">
    {{ formfield "transcription" }}
    {{ formfield_errors "transcription" }}
</div>
<!-- Next Button -->
<div style="margin-top: 10px;">
{{ block next_button }}
<button type="submit" class="btn btn-primary">Submit</button>
{{ endblock }}
</div>
<br>
<!--Skip Button-->
<button onclick="skipTask()" type="button" class="btn btn-danger">Skip the task</button>

<script type="text/javascript">
    function skipTask() {
        // Set the value to 999 without showing it to the participant
        var numberInput = document.getElementsByName('transcription')[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 }}