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

{% set name = field('name') %}
{% set content = field('content') %}
{% set position = field('position') %}
{% set src = field('image') %}
{% set alt_text = field('alt_text') %}
{% set image_spacing = field('image_spacing') %}
{% set img_alignment = field('image_alignment').value %}
{% set content_alignment = field('alignment').value %}

{% set wrapperClasses = classNames('qx-element-testimonial__wrapper', {
	'qx-d-inline-flex  qx-flex-column-reverse' : (img_alignment == 'bottom'),
	'qx-d-inline-flex  qx-align-items-center qx-flex-row-reverse' : (img_alignment == 'right'),
	'qx-d-inline-flex  qx-align-items-center' : (img_alignment == 'left')
}) %}

{% set classes = classNames('qx-element qx-element-testimonial-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 content %}
		<p class="qx-testimonial__quote">{{ content }}</p>
	{% endif %}
	
	<div class="{{ wrapperClasses }}">
    <div class="qx-element-testimonial__media qx-d-inline-block">
		  {% if src.media %}
        {% if src.media.type == "svg" %}
          {{ src.media.svg }}
        {% else %}
          {{ image( src.media.image, alt_text)  }}
        {% endif %}  
	      {% elseif src.url %}
          {{ image(src.url, alt_text) }}
      {% endif %} 
    </div>

    <div class="qx-testimonial__author">
    	{% if name %}
    		<div class="qx-testimonial__name">{{ name }}</div>
    	{% endif %}
    	{% if position %}
      	<div class="qx-testimonial__position">{{ position }}</div>
    	{% endif %}
    </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() }},
    contentSelector = id + " p.qx-testimonial__quote",
    imgSpacing = id + " .qx-testimonial__media_author",
    mediaSelector = id + " .qx-element-testimonial__media",
    imgSelector = id + " .qx-element-testimonial__media img",
    nameSelector = id + ' .qx-testimonial__name',
    positionSelector = id + ' .qx-testimonial__position',

// Testimonial
style.css( contentSelector, 'font-size', '20px');
style.css( contentSelector, 'color', {{ field('content_color') | json_encode() }});
style.typography(contentSelector, {{ field('content_font') | json_encode() }});
style.responsiveCss(contentSelector, {{ field("content_spacing") | json_encode() }}, 'margin-bottom', {{ field("content_spacing").unit | json_encode() }});
style.alignment( id, {{ field('content_alignment') | json_encode() }});

// Media 
style.css( imgSelector, 'border-radius', '100%');
style.css( imgSelector, 'object-fit', 'cover');
style.width( imgSelector, {{ field('width') | json_encode() }} ); 
style.height( imgSelector, {{ field('width') | json_encode() }} ); 
style.borderRadius( imgSelector, {{ field('image_border_radius') | json_encode() }} );

// Image spacing 
if( img_alignment == 'top'){
  style.responsiveCss(mediaSelector, {{ field("image_spacing") | json_encode() }}, 'margin-bottom', {{ field("image_spacing").unit | json_encode() }});
} else if( img_alignment == 'bottom'){
  style.responsiveCss(mediaSelector, {{ field("image_spacing") | json_encode() }}, 'margin-top', {{ field("image_spacing").unit | json_encode() }});
} else if( img_alignment == 'right'){
  style.responsiveCss(mediaSelector, {{ field("image_spacing") | json_encode() }}, 'margin-left', {{ field("image_spacing").unit | json_encode() }});
} else{
  style.responsiveCss(mediaSelector, {{ field("image_spacing") | json_encode() }}, 'margin-right', {{ field("image_spacing").unit | json_encode() }});
}

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

// Name
style.css( nameSelector, 'margin-bottom', '0px');
style.css( nameSelector, 'color', {{ field('name_color') | json_encode() }});
style.typography(nameSelector, {{ field('name_font') | json_encode() }});
style.responsiveCss(nameSelector, {{ field("name_spacing") | json_encode() }}, 'margin-bottom', {{ field("name_spacing").unit | json_encode() }});

// Position
style.css( positionSelector, 'color', {{ field('position_color') | json_encode() }});
style.typography(positionSelector, {{ field('position_font') | json_encode() }});


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