{% from 'macros/icon.html' import Icon %}

{% macro Slider(modal) %}
  <div class="c-slider" data-module="Slider">
    <div class="c-slider__slides">
      {% for item in modal %}
        {% set activeClass = "" %}
        {% if item.active %}
          {% set activeClass = " is-active" %}
        {% endif %}

        <div class="c-slider__slide{{activeClass}}">
          <picture class="c-slider__picture">
            <source srcset="{{item.imgSrcLg}}" media="(min-width: 768px)">
            <img class="c-slider__image" src="{{item.imgSrcSm}}" alt="{{item.imgAlt}}">
          </picture>
          <div class="c-slider__content">
            <div class="c-slider__text">
              <h1>{{item.title}}</h1>
              {{item.text|safe}}
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
    <div class="c-slider__controls">
      <div class="c-slider__previous">
        {{ Icon('chevron-left') }}
      </div>
      <div class="c-slider__pips"></div>
      <div class="c-slider__next">
        {{ Icon('chevron-right') }}
      </div>
    </div>
  </div>
{% endmacro %}

{{ Slider([{'title': 'Slide title 1', 'text': '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>', 'imgSrcSm': '//placeimg.com/600/600/tech/grayscale', 'imgSrcLg': '//placeimg.com/1600/800/tech/grayscale', 'imgAlt': '{{item.imgAlt}}', 'active': true}, {'title': 'Slide title 2', 'text': '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>', 'imgSrcSm': '//placeimg.com/600/600/tech/grayscale', 'imgSrcLg': '//placeimg.com/1600/800/tech/grayscale', 'imgAlt': '{{item.imgAlt}}'}])}}