<!-- Image Element -->
<QuixTemplate id="person-template">
  <QuixHtml>
    {% set id = field("id") %}
{% set class = field('class') %}
{# person image #}
{% set src = field('image') %}
{% set alt_text = field('alt_text') %}
{% set link = field('link') %}
{# person details #}
{% set name = field('name') %}
{% set tag = field('html_tag') %}
{% set position = field('position') %}
{% set description = field('description') %}
{# Image postion #}
{% set wrapperClassesForPerson = classNames('qx-element-person__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'),
}) %}

{% set classes = classNames('qx-element qx-element-person-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="{{ wrapperClassesForPerson }}">
    {# person image #}
    <figure class="qx-element-person__image 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-person__profile">

      {# person name #}
      {% if name %}
        <div class="qx-element-person__name">
          {{field('name') | wrap(tag) }}
        </div>
      {% endif %}

      {# person position #}
      {% if position %}
        <div class="qx-element-person__position">
          {{field('position')}}
        </div>
      {% endif %}

      {# person content #}
      {% if description %}
        <div class="qx-element-person__description">
          {{field('description')}}
        </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() }},
    wrapperSelector = id + " .qx-element-person__wrapper",
    imageSelector = id + " .qx-element-person__image",
    flexSelector = id + " .qx-element-person__image, " + id +" .qx-element-person__profile",
    nameSelector = id + " .qx-element-person__name",
    positionSelector = id + " .qx-element-person__position",
    descriptionSelector = id + " .qx-element-person__description",
    profileSelector = id + " .qx-element-person__profile";

// image Style
if( img_alignment == 'left'){
  style.responsiveCss(imageSelector, {{ field("image_spacing") | json_encode() }}, 'margin-right', {{ field("image_spacing").unit | json_encode() }});
  style.css( imageSelector , 'margin-bottom', '0px' );
  style.css( flexSelector , 'flex', '1 0 0' );
} else if( img_alignment == 'right'){
  style.responsiveCss(imageSelector, {{ field("image_spacing") | json_encode() }}, 'margin-left', {{ field("image_spacing").unit | json_encode() }});
  style.css( imageSelector , 'margin-bottom', '0px' );
  style.css( flexSelector , 'flex', '1 0 0' );
} else{
  style.responsiveCss(imageSelector, {{ field("image_spacing") | json_encode() }}, 'margin-bottom', {{ field("image_spacing").unit | json_encode() }});
}
// svg
if( img.media ) {
  if( img.media.type == "svg" ) {
    style.css( imageSelector + " path", "fill", img.media.properties.color )
    style.css( imageSelector + " svg", 'width', img.media.properties.size.value +  img.media.properties.size.unit)
    style.css( imageSelector + " svg", 'height', img.media.properties.size.value +  img.media.properties.size.unit)
  }
}

style.borderRadius( imageSelector + ' *', {{ field("img_border_radius") | json_encode() }})

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

// position Style
// ------------------
style.responsiveCss( positionSelector , {{ field("position_spacing") | json_encode() }}, 'margin-bottom', {{ field("position_spacing").unit | json_encode() }});
style.css( positionSelector, 'color', {{ field('position_color') | json_encode() }});
style.typography( positionSelector, {{ field('position_font') | json_encode() }});

// Description Style
// -------------------
style.css( descriptionSelector, 'color', {{ field('description_color') | json_encode() }});
style.typography( descriptionSelector, {{ field('description_font') | json_encode() }});

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

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