<!-- Blurb Element -->
<QuixTemplate id="blurb-template">
  <QuixHtml>
    {% set id = field('id') %}
{% set class = field('class') %}
{% set tag = field('html_tag') %}
{% set link = field('link') %}
{% set src = field('image') %}
{% set alt_text = field('alt_text') %}
{% 
  set wrapperClasses = classNames('qx-element-blurb__wrapper', 
  field('content_v_align').value ? field('content_v_align').value : "", 
  {
    'qx-d-md-flex qx-flex-md-row' : (field('image_alignment').value == 'left'),
    'qx-d-md-flex qx-flex-md-row-reverse' : (field('image_alignment').value == 'right'),
  }, class) 
%}
{% set classes = classNames('qx-element qx-element-blurb-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 }}">
  
  <div class="{{ wrapperClasses }} ">

    <figure class="qx-element-blurb__media qx-d-inline-block">
      {% if src.media %}
        {% if src.media.type == "svg" %}
          {{ src.media.svg }}
        {% else %}
          {{ image( src.media.image, alt_text) | link(link) }}
        {% endif %}  
      {% elseif src.url %}
          {{ image(src.url, alt_text) | link(link) }}
      {% endif %}
    </figure>

    <div class="qx-element-blurb__content qx-w-100">
      <div class="qx-element-blurb__title">
        {{ field('title') | wrap(tag) | link(link) }}
      </div>
      <div class="qx-element-blurb__body">
        {{ field('content') }}
      </div>
    </div>

  </div>

</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() }},
    img_alignment = {{ field("image_alignment").value | json_encode() }},
    wrapperSelector = id + " .qx-element-blurb__wrapper",
    imgSelector = id + " .qx-element-blurb__media",
    contentSelector = id + " .qx-element-blurb__content",
    titleSelector = id + " .qx-element-blurb__title",
    bodySelector = id + " .qx-element-blurb__body";

// -----------------------------
// Media 
// -----------------------------
if( img_alignment == 'left'){
  
  style.responsiveCss(imgSelector, {{ field("image_spacing") | json_encode() }}, 'margin-right', {{ field("image_spacing").unit | json_encode() }});
  style.phone(imgSelector, 'margin-bottom:' + {{ field("image_spacing").phone.value | json_encode() }} + {{ field("image_spacing").unit | json_encode() }});

} else if( img_alignment == 'right'){
  
  style.responsiveCss(imgSelector, {{ field("image_spacing") | json_encode() }}, 'margin-left', {{ field("image_spacing").unit | json_encode() }});
  style.phone(imgSelector, 'margin-bottom:' + {{ field("image_spacing").phone.value | json_encode() }} + {{ field("image_spacing").unit | json_encode() }});

} else{
  style.responsiveCss(imgSelector, {{ field("image_spacing") | json_encode() }}, 'margin-bottom', {{ field("image_spacing").unit | json_encode() }});
}
// svg
if( img.media ) {
  if( img.media.type == "svg" ) {
    style.css( imgSelector + " path", "fill", img.media.properties.color )
    style.css( imgSelector + " svg", 'width', img.media.properties.size.value +  img.media.properties.size.unit)
    style.css( imgSelector + " svg", 'height', img.media.properties.size.value +  img.media.properties.size.unit)
  }
}

// Width 
style.width(imgSelector, {{ field("image_width") | json_encode() }})

// -----------------------------
// Title
// -----------------------------
// Spacing 
style.responsiveCss(titleSelector, {{ field("title_spacing") | json_encode() }}, 'margin-bottom', {{ field("title_spacing").unit | json_encode() }});
// Color
style.css( titleSelector + ' *', 'color', {{ field('title_color') | json_encode() }});
// Typography
style.typography( titleSelector + ' *', {{ field('title_font') | json_encode() }});


// -----------------------------
// Body
// -----------------------------
// Color
style.css( bodySelector + ',' + bodySelector + ' *', 'color', {{ field('body_color') | json_encode() }});
// Typography - Multiple selectors
style.typography( bodySelector + ',' + bodySelector + ' *', {{ field('body_font') | json_encode() }});


// -----------------------------
// Content
// -----------------------------
// Alignment
style.alignment(wrapperSelector, {{ field('content_alignment') | json_encode() }});
// Padding
style.padding(contentSelector, {{ field('content_padding') | json_encode() }})

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