{% extends '@DWGinger/crud/form/edit.html.twig' %}

{% block heading %}
  {{ 'title.object_edit'|trans({'%object%': object}) }}
{% endblock %}

{% block actions %}
    <a href="{{ path('dw_ginger_attribute_index') }}" title="{{ 'action.back_to_list'|trans }}" class="float-right">
        <i class="fa fa-chevron-left fa-2x"></i>
    </a>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .sliding-range {
            --SliderColor      : hsl(50, 100%, 50%);
            width              : 50%;
            -webkit-appearance : none;
            height             : 8px;
            border-radius      : 4px;
            margin-top         : 12px;
            background-color   : rgb(220, 220, 220);
        }
        .sliding-range::-webkit-slider-thumb {
            -webkit-appearance : none;
            width              : 12px;
            height             : 30px;
            border-radius      : 10px;
            background-color   : var(--SliderColor);
            overflow           : visible;
            cursor             : pointer;
        }
        .sliding-range.form-control {
            display            : inline;
        }
        #rangevalue {
            font-size          : 1.4rem;
            margin-left        : 20px;
        }
    </style>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        const Slider = document.querySelector('input[type="range"]')
        if (Slider) {
            Slider.oninput = function(e)
            {
                // Convert -5/+5 range to 0-100 color hue
                const hue = (parseInt(e.target.value) + 5) * 10;
                Slider.style.setProperty('--SliderColor', `hsl(${hue}, 100%, 50%)`)
                $('#rangevalue').text(e.target.value);
            }
            $('input[type="range"]').after("<span id='rangevalue'>0</span>");
            $('input[type="range"]').trigger( "input" );
        }
    </script>
{% endblock %}