{{ 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: 10rem; /* Add space for the fixed header */
        background-color: #f4f4f4;  /* light grey background */
        font-family: Helvetica, sans-serif;
    }

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

    .slider-container {
        position: relative;
    }

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

    .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: #ffffff; 
    }

    .indent {
        height: 15px; /* Set the height of the indent */
    }

    .slider-text, .page-header {
        text-align: center;
        background-color: white;
        padding: 20px;
        border-radius: 15px;
        margin: auto;
        max-width: 800px; /* center the container and limit its width on large screens */
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);  /* subtle shadow */
    }

    .slider-text p, .page-header p {
        line-height: 1.5;  /* increase the line height for readability */
        margin-bottom: 5px;  /* space between paragraphs */
    }
</style>
{{ endblock }}

{{ block content }}

<div class="slider-text">
    <p>It's Phase 2, Round {{ round_number }}/{{ num_rounds }}. Decide how much you want to produce by moving sliders into the middle position. <br> You can stop whenever you want.</p>
</div>


<header>
    <div class="page-header">
        <p>Player A will get <strong> {{ group.tax_amount }}% </strong> (<span id="dynamicValue"></span> points) of your production<br/> </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">Produced: <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>

<audio id="slider-sound" src="{% static 'slider.wav' %}" preload="auto"></audio>

<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();
        }
    });

    ot.onLive('feedback', function (data) {
        if (data.solved) {
            vars.classes[data.name] = "is-valid";
            // Play sound when slider is solved
            var sliderSound = document.getElementById('slider-sound');
            sliderSound.play();
        } else {
            vars.classes[data.name] = null;
        }
    });
</script>


<script>
ot.onLive('progress', function (data) {
    Object.assign(vars.progress, data);
    if (data.terminated) {
        ot.completePage();
    }
    // Compute the dynamic value
    const taxAmount = {{ group.tax_amount }};
    const dynamicValue = Math.round(taxAmount * vars.progress.solved / 100);
    document.getElementById('dynamicValue').textContent = dynamicValue;
});
</script>

{{ endblock }}