{% set classes = ['aae-a-image-compare', 'e-con', 'e-atomic-element', base_styles.base] | merge(settings.classes | default([])) | join(' ') %}
{% set default_position = settings.default_position | default(50) %}
{% set direction = settings.direction | default('horizontal') %}
{% set click_move = (settings.enable_click_move is defined and settings.enable_click_move == false) ? 'no' : 'yes' %}

<div class="{{ classes }} {{ editor_classes | default('') }}"
    data-id="{{ id }}"
    data-element_type="{{ type }}"
    data-e-type="{{ type }}"
    data-interaction-id="{{ interaction_id | default('') }}"
    data-default-position="{{ default_position }}"
    data-direction="{{ direction }}"
    data-enable-click-move="{{ click_move }}"
    style="--aae-image-compare-position: {{ default_position }}%;"
    {% if settings._cssid is defined and settings._cssid is not empty %}
        id="{{ settings._cssid | e('html_attr') }}"
    {% endif %}
    {% if settings.attributes is defined and settings.attributes is not empty %}
        {{ settings.attributes | raw }}
    {% endif %}
    {{ editor_attributes | default('') | raw }}>

    {#
        No <style> tag here — only real inline `style=""` attributes are
        allowed on this template. That only covers the two elements this
        twig itself renders (label + range input) and only their static,
        unconditional declarations. Everything else — pseudo-elements
        (::-webkit-slider-thumb / ::-moz-range-thumb), pseudo-class +
        sibling-combinator hover/active rules, @media, the live CSS-var
        driven position, and anything targeting the divider/thumb/captions/
        overlay (rendered by other widgets or the editor, not by this
        template) — can't be expressed as an attribute and lives in
        assets/scss/image-compare.scss instead.
    #}
    <label class="aae-a-image-compare__label"
           for="aae-image-compare-range-{{ id }}"
           style="font-size:0;line-height:0;position:absolute;inset:0;margin:0;padding:0;">Move image comparison slider</label>
    <input type="range"
           min="0"
           max="100"
           value="{{ default_position }}"
           class="aae-a-image-compare__range"
           id="aae-image-compare-range-{{ id }}"
           style="position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;background-color:transparent;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;z-index:20;opacity:0;"
           data-aae-compare-range>

    {{ children_placeholder | raw }}
</div>