<!-- Divider Element -->
<QuixTemplate id="divider-template">
  <QuixHtml>
    {% set id = field('id') %}
{% set class = field('class') %}

{% set divider = field('type') %}
{% set src = field('image') %}
{% set alt_text = field('alt_text') %}
{% set classes = classNames('qx-element qx-element-divider-separator-v2', class ) %}
{% set animation = "" %}

{% if field('animation') != 'none' %}

    {% if field('animation')is not empty %}
        {% set animation = "cls:" ~ field('animation') ~ ";" %}
    {% endif %}

    {# repeat #}
    {% if field('animation_repeat') %}
        {% set animation = animation ~ "repeat:ture;" %}
    {% endif %}

    {# delay #}
    {% if field('animation_delay').value %}
        {% set animation = animation ~ "delay:" ~ field('animation_delay').value %}
    {% endif %}
{% endif %}

<div id="{{ id }}" class="{{ classes }}" qx-scrollspy="{{ animation }}">
  {% if divider == 'border' %}
    <span class="qx-divider-separator"></span>
  {% else %}
    {% if src.media %}
      {% if src.media.type == "svg" %}
        {{ src.media.svg }}
      {% else %}
        {{ image( FILE_MANAGER_ROOT_URL ~ src.media.image, alt_text) }}
      {% endif %}  
    {% elseif src.url %}
      {{ image(src.url, alt_text) }}
    {% endif %}
  {% endif %}
</div>  </QuixHtml>
  <QuixStyle>
    <!-- Global Style -->
    var style = Object.assign({}, Assets),
          id = "#{{ field("id") }}",
          css = "";
// margin
style.margin(id, {{ field("margin") | json_encode() }})

// padding 
style.padding(id, {{ field("padding") | json_encode() }})

// Z-Index
style.css(id, 'z-index', {{ field("zindex") | json_encode() }})

// background 
style.background (id, {{ field("background") | json_encode() }})

// border + box shadow 
style.border (id, {{ field("border") | json_encode() }})

// custom css 
style.raw ("{{ field("custom_css").code }}")
    <!-- Element Style -->
    {% include 'global.twig' %}

var id = "#{{ field("id") }}",
    img = {{ field("image") | json_encode() }},
    seperator = id + " .qx-divider-separator";

// Border 
style.css( seperator, 'border-top-style', {{ field('style') | json_encode() }});
style.css( seperator, 'border-top-width', {{ field('weight').value | json_encode() }} + 'px');
style.css( seperator, 'border-color', {{ field('color') | json_encode() }});
style.css( seperator, 'display', 'inline-block');
style.width( seperator, {{ field('width') | json_encode() }}, '%' );

// Gap 
style.responsiveCss(id, {{ field('gap') | json_encode() }}, 'padding-top', 'px')
style.responsiveCss(id, {{ field('gap') | json_encode() }}, 'padding-bottom', 'px')

// Alignment
style.alignment(id, {{ field('alignment') | json_encode() }});

// svg
if( img.media ) {
  if( img.media.type == "svg" ) {
    style.css( id + " path", "fill", img.media.properties.color )
    style.css( id + " svg", 'width', img.media.properties.size.value +  img.media.properties.size.unit)
    style.css( id + " svg", 'height', img.media.properties.size.value +  img.media.properties.size.unit)
  }
}

style.load(id)
  </QuixStyle>
</QuixTemplate>