<QuixTemplate id="section-template">
  <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 }}")
    <!-- Section Style -->
    {% include 'global.twig' %}

var style = Object.assign({}, Assets),
          id = "#{{ field('id') }}",
          backgroundOverlay = ".{{ field('id') }}-background-overlay",
          topDivider = id + " .qx-shape-top",
          topDividerSvg = topDivider + ' svg',
          bottomDivider = id + " .qx-shape-bottom",
          bottomDividerSvg = bottomDivider + ' svg';

// Custom height
var heightType = {{ field('height') | json_encode() }}
if( heightType == 'custom' ){
  var containerType = {{ field('container_type') | json_encode() }}
  var containerClass = ( containerType == 'boxed' ) ? ' .qx-container' : ' .qx-container-fluid'

  style.minHeight(id + containerClass, {{ field('custom_height') | json_encode() }})
}

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

// Top Divider 
var topDividerStyle = {{ field('top_divider_style') | json_encode() }}

if( topDividerStyle != 'none'){

  // shape color
  style.css( topDivider + " path.qx-shape-fill", 'fill', "{{ field("top_divider_color") }}" )
  
  // Width
  style.width(topDividerSvg, {{ field('top_divider_width') | json_encode() }}, '%')
  
  // Height
  style.height(topDividerSvg, {{ field('top_divider_height') | json_encode() }})

  // Flip control
  if( {{ field('top_divider_flip') | json_encode() }} ){
    style.css( topDivider, 'transform', 'scaleX(-1)')
  }

  // Bring To front
  if( {{ field('top_divider_front') | json_encode() }} ){
    style.css(topDivider, 'z-index', '2')
  }

}

// Bottom Divider 
var bottomDividerStyle = {{ field('bottom_divider_style') | json_encode() }}

if( bottomDividerStyle != 'none'){

  // shape color
  style.css( bottomDivider + " path.qx-shape-fill", 'fill', "{{ field("bottom_divider_color") }}" )
  
  // Width
  style.width(bottomDividerSvg, {{ field('bottom_divider_width') | json_encode() }}, '%')
  
  // Height
  style.height(bottomDividerSvg, {{ field('bottom_divider_height') | json_encode() }})

  // Flip control
  if( {{ field('bottom_divider_flip') | json_encode() }} ){
    style.css( bottomDivider, 'transform', 'scaleX(-1) rotate(180deg)')
  }

  // Bring To front
  if( {{ field('bottom_divider_front') | json_encode() }} ){
    style.css(bottomDivider, 'z-index', '2')
  }

}

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

style.load(id)

// loading children ( ROW ) style...
{% if renderer %}
  {{ renderer.render( node['children'], null, 'frontend' ) | raw  }}
{% endif %}  
    <!-- Section Script -->
    {% set id = field('id') %}

var background = {{ field("background") | json_encode() }}

if( !_.isEmpty(background) ) {
  if( background.state.normal.type == "video" ) {
    if( ! jQuery("script#backgroundjs").length ) {
      var inlineScript = document.createElement("script");

      inlineScript.src = "libraries/quix/assets/js/background.js";
      inlineScript.id = "backgroundjs"
      document.head.appendChild(inlineScript);

      var link = document.createElement('link');
      link.href = "libraries/quix/assets/css/background.css";

      document.head.appendChild(link);

      setTimeout(function() {
        jQuery(".qx-background-video-container").background({
          source: {
            mp4: background.state.normal.properties.url.url

            {# mp4: FILE_MANAGER_ROOT_URL + background.state.normal.properties.src #}
          }
        });
      }, 300)
    } else {
      jQuery(".qx-background-video-container").background({
        source: {
          mp4: background.state.normal.properties.url.url

          {# mp4: FILE_MANAGER_ROOT_URL + background.state.normal.properties.src #}
        }
      });
    }
  }
}

  </QuixStyle>
</QuixTemplate>