{{ 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;
    }
    .slider-container {
        margin: 15px 0;
    }
    .slider-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 5px; /* Add padding to the sides of the slider wrapper */
    }
    .slider-label {
        font-size: 0.8em;
        min-width: 120px; /* Set a minimum width for the labels */
        text-align: center; /* Center the text */
    }
    .form-range {
        -webkit-appearance: none; /* Override default appearance on webkit browsers */
        width: calc(100% - 240px); /* Subtract the minimum width of both labels */
        margin: 10px 0; /* Add some vertical space around the slider */
    }
    /* Style the slider thumb for webkit browsers */
    .form-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
    }
    /* Style the slider thumb for Firefox */
    .form-range::-moz-range-thumb {
        -moz-appearance: none;
        appearance: none;
    }
    .slider-output {
        display: inline-block; /* Makes the output behave like a block element inline */
        background-color: #f9f9f9; /* Light background to make it stand out */
        color: #555; /* Slightly darker text for better readability */
        text-align: center; /* Center the text inside the output */
        padding: 4px 8px; /* Padding inside the output */
        margin: 0 auto; /* Center the output below the slider */
        border: 1px solid #ddd; /* Light border around the output */
        border-radius: 4px; /* Rounded corners for the output */
        font-size: 1em; /* Smaller font size for the output */
        margin-top: 10px; /* Space between the slider and the output */
    }

</style>
{{ formfield "satisfaction_experience" }}
<br>
<div id="slider-error" style="display: none; color: red; margin-top: 10px;">
Please adjust the frustration slider to reflect your experience.
</div>
<div class="slider-container">
    <label for="frustration_level">Please rate the level of frustration you felt during the tasks:</label>
    <br>
    <div class="slider-wrapper">
        <span class="slider-label">1 = Not frustrated</span>
        <input type="range" id="frustration_level" name="frustration_level" min="1" max="100" step="1" class="form-range" oninput="updateOutputAndSetFlag(this.value, 'frustrationOutput')">
        <span class="slider-label">100 = Very frustrated</span>
    </div>
    <output class="slider-output" id="frustrationOutput"></output> <!-- You may want to show a default or current value here -->
</div>

<br>

{{ formfield "abandonment_consideration" }}
{{ formfield "abandonment_reason" }}
{{ formfield "skipped" }}
{{ formfield "skip_reason" }}

<!-- Next Button -->
<div style="margin-top: 10px;">
{{ block next_button }}
<button type="submit" class="btn btn-primary">Next</button>{{ endblock }}
<script>
    let sliderTouched = false; // Flag to track interaction with the slider

    function updateOutputAndSetFlag(val, outputId) {
        document.getElementById(outputId).textContent = val;
        sliderTouched = true; // Set to true on slider interaction
        document.getElementById('slider-error').style.display = 'none'; // Hide error message
    }
    document.addEventListener('DOMContentLoaded', function() {
        // Handle abandonment consideration fields
        var considerationYes = document.querySelector('input[name="abandonment_consideration"][value="True"]');
        var considerationNo = document.querySelector('input[name="abandonment_consideration"][value="False"]');
        var reasonField = document.querySelector('textarea[name="abandonment_reason"]');

        function toggleAbandonmentReasonRequired() {
            reasonField.required = considerationYes.checked;
        }

        considerationYes.addEventListener('change', toggleAbandonmentReasonRequired);
        considerationNo.addEventListener('change', toggleAbandonmentReasonRequired);

        // Handle skipped fields
        var skippedYes = document.querySelector('input[name="skipped"][value="True"]');
        var skippedNo = document.querySelector('input[name="skipped"][value="False"]');
        var skipReasonField = document.querySelector('textarea[name="skip_reason"]');

        function toggleSkipReasonRequired() {
            skipReasonField.required = skippedYes.checked;
        }

        skippedYes.addEventListener('change', toggleSkipReasonRequired);
        skippedNo.addEventListener('change', toggleSkipReasonRequired);

        // Initial checks
        toggleAbandonmentReasonRequired();
        toggleSkipReasonRequired();

        document.querySelector('form').addEventListener('submit', function(event) {
            if (!sliderTouched) {
                event.preventDefault(); // Prevent form submission
                document.getElementById('slider-error').style.display = 'block'; // Show error message
            }
        });
    });

    function updateOutput(val, outputId) {
        document.getElementById(outputId).textContent = val;
    }
</script>

{{ endblock }}