{% set HERO_DEFAULTS = {
  title: 'Frischewochen im Berliner Großmarkt',
  image: false,
  video: false
} %}

{% macro Hero(settings = {}) %}
  {% set settings = merge(HERO_DEFAULTS, settings) %}

  <section class="section hero">
    <div class="hero__container container container--fluid">
      {% call Carousel({
        className: 'hero__carousel',
        pluginOptions: {
          type: 'fade',
          autoplay: true,
          interval: 5000,
          arrows: false,
          drag: false
        }
      }) %}
        {% for slide in range(5) %}
          <li class="splide__slide">
            {% if settings.image or settings.video %}
              <div class="hero-item">
                <figure class="hero-item__media-wrapper">
                  {{ Image({
                    className: 'hero-item__media',
                    image: {
                      src: '480x476',
                      className: 'hero-item__media-image',
                      width: 1920,
                      height: 'auto'
                    },
                    sources: [
                      { media: '1280', size: '1920x1070' },
                      { media: '992', size: '1280x794' },
                      { media: '768', size: '992x614' },
                      { media: '480', size: '768x476' }
                    ]
                  }) if settings.image }}
                  {% if settings.video %}
                    <div class="hero-item__media">
                      <video class="hero-item__media-video" playsinline muted loop autoplay>
                        <source src="{{ PATH.media }}/dummy-video.mp4" type="video/mp4">
                      </video>
                    </div>
                  {% endif %}
                  <figcaption class="hero-item__media-caption">&copy; Author Name</figcaption>
                </figure>
                <div class="hero-item__container">
                  <div class='hero-item__container-inner'>
                    {{ Title({
                      className: 'title--white',
                      text: settings.title
                    }) if settings.title }}
                    <a href="#" class="hero-item__action">
                      <span class="hero-item__action-text">Mehr Infos</span>
                      <span class="hero-item__action-icon" aria-hidden="true">
                        {{ Helpers.svg('icons/arrow-right') }}
                      </span>
                    </a>
                  </div>
                </div>
              </div>
            {% endif %}
          </li>
        {% endfor %}
      {% endcall %}
      <div class="hero-links">
        <ul class="hero-links__list">
          {% for text in [
            ['Gastronomie'],
            ['Services'],
            ['Händler']
          ] %}
            <li class="hero-links__item">
              <a href="#" class="hero-link">
                <span class="hero-link__text">{{ text }}</span>
                <span class="hero-link__icon" aria-hidden="true">
                {{ Helpers.svg('icons/arrow-right') }}
              </span>
              </a>
            </li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </section>
{% endmacro %}