{% macro dense_rating(params) %}
<style>
    .sliders {
        float: right;
        position: absolute;
        top: 50px;
        left: 50%;
        padding-bottom: 4em;
        min-width: 40%;
        max-width: 500px;
    }

    #prompt-text, #audio-prompt-controls {
        margin-top: 25px;
        width: calc(50% - 1rem);
    }

    .slider {
        -webkit-appearance: none;
        background: linear-gradient(90deg, blue, red);
        border-radius: 5px;
        height: 12px;
        outline: none;
        transition: opacity .2s;
        width: 100%;
        text-align: center;
        position: relative;
    }

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 24px;
        height: 24px;
        background: #FFFFFF;
        border-radius: 50%;
        border-style: solid;
        border-color: 1849 AB;
        cursor: pointer;
        position: relative;
        z-index: 99;
    }

    .slidercontainer {
        max-height: 600px;
        overflow: auto;
    }

    .sliderticks {
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        margin-bottom: 18px;
    }

    .sliderticks p {
        position: relative;
        display: flex;
        justify-content: center;
        text-align: center;
        width: 1px;
        background: #D3D3D3;
        height: 10px;
        line-height: 40px;
        margin: 0 0 20px 0;
    }

    .untouched-range::-webkit-slider-thumb {
        background: yellow;
    }

    .untouched-range::-moz-range-thumb {
        background: yellow;
    }

    .untouched-range::-ms-thumb {
        background: yellow;
    }

    .form-label {
        font-weight: bold;
    }

</style>
<div class="sliders">
    {% for hash, dimension in params.dimension_dict.items() %}
    <label for="{{hash}}" class="form-label">{{dimension}}</label>
    <input type="range" min="1" max="5" value="3" class="slider untouched-range" id="{{hash}}"
           dimension="{{dimension}}">
    <div class="sliderticks">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </div>
    <hr>
    {% endfor %}
    <button id="submit" type="submit" onclick="submit()" class="btn btn-success btn-lg">Submit</button>
</div>
<br>

<script>
    let allDimensions = Array.from($('.form-label').map(function (x, e) {
        return $(e).text()
    }));
    let sliderDict = {};

    $('.slider').change(function () {
        let dimension = $(this).attr('dimension');
        let value = parseInt($(this).val());
        $(this).removeClass('untouched-range');
        sliderDict[dimension] = value;
        console.log(sliderDict);
    });

    function submit() {
        let submitButton = $('#submit');
        submitButton.prop('disabled', true);
        console.log(sliderDict)
        let visitedDimensions = Object.keys(sliderDict).sort();
        // Make sure all dimensions have been rated
        if (JSON.stringify(visitedDimensions) !== JSON.stringify(allDimensions)) {
            alert('Please rate all dimensions');
            submitButton.prop('disabled', false);
        } else {
            psynet.nextPage(sliderDict);
        }
    }
</script>
{% endmacro %}