{{ block styles }}
<link href="{{ static 'fullscreen.css' }}" rel="stylesheet">
<link href="{{ static 'progress2.css' }}" rel="stylesheet">
<link href="{{ static 'enhancements.css' }}" rel="stylesheet">
<style>
    body {
        padding-top: 220px; /* Add space for the fixed header */
    }

    main {
        flex-flow: row wrap;
        justify-content: center;
        /* margin-top: 500px; /* Add margin between the header and sliders */ 
    }

    .slider-container {
        position: relative;
    }

    .slider-container::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 0.25rem;
        width: 2px;
        height: 5px;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.125);
    }

    .slider {
        width: 300px;
        height: 32px;
        border-radius: 16px;
        padding: 0 8px;
        background: hsl(216, 17%, 98%);
        border: 1px solid rgba(0, 0, 0, 0.125);
        pointer-events: none;
    }

    .slider::-webkit-slider-thumb {
        pointer-events: auto;
    }

    .slider::-moz-range-thumb {
        pointer-events: auto;
    }

    .slider::-ms-thumb {
        pointer-events: auto;
    }

    .slider.is-valid {
        background: hsl(151.2, 71.43%, 93.14%);
    }

    .page-header {
        position: relative;
        text-align: center;
        top: 0;
        width: 50%;
        max-width: 50%;
        padding: 10px;
    }

    .score-stop-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .scrolled .page-header {
        background-color: #fff; /* Change background color when scrolled */
    }

    .indent {
        height: 100px; /* Set the height of the indent */
    }
</style>
{{ endblock }}

{{ block content }}

<header>
    <div class="page-header">
        <p>Choose how much you want to produce by moving sliders into the middle position. <br /> Whenever you want, you can stop or skip.</p>
        <my-progress class="w-100" max="vars.progress.total" ticks="1" value="vars.progress.solved">
        </my-progress>
        <div class="score-stop-container">
            <!-- <div class="alert alert-info m-2">Total score: <b ot-text="vars.progress.score"></b></div> -->
            <div class="alert alert-info m-2">Total score: <b ot-text="vars.progress.solved"></b></div>
            <button type="submit" class="btn btn-primary">stop</button>
        </div>
    </div>
    <div class="indent"></div>
</header>

<main>
    {{ for slider in sliders }}
    <div class="slider-container" style="margin-left:{{slider.margins.l}}px; margin-right:{{slider.margins.r}}px">
        <input type="range" class="slider form-range my-1" ot-class="vars.classes.{{slider.name}}" min="-10" max="10"
            name="{{slider.name}}" value="{{slider.value}}" ot-input>
    </div>
    {{ endfor }}
</main>

<footer>

</footer>

{{ endblock }}

{{ block scripts }}

<script src="{{ static 'otree-front-1.3.b1.js' }}"></script>
<script src="{{ static 'progress2.js' }}"></script>

<script>
    "use strict";

    var header = document.querySelector('.page-header');

    window.addEventListener('scroll', function () {
        if (window.pageYOffset > 0) {
            header.classList.add('scrolled');
        } else {
            header.classList.remove('scrolled');
        }
    });

    ot.onStartPage(function () {
        vars.classes = {};
        vars.progress = js_vars.progress;
        ot.enableInputs();
    });

    ot.onInput(function (name, value) {
        value = parseInt(value);
        ot.sendLive("move", { name, value });
    });

    ot.onLive('feedback', function (data) {
        if (data.solved) {
            vars.classes[data.name] = "is-valid";
        } else {
            vars.classes[data.name] = null;
        }
    });

    ot.onLive('progress', function (data) {
        Object.assign(vars.progress, data);
        if (data.terminated) {
            ot.completePage();
        }
    });
</script>

{{ endblock }}