{% load wagtailcore_tags wagtailimages_tags gem_tags %}
{% if bannerpages %}
<div class="banner">
  {% for bannerpage in bannerpages %}
    {% if bannerpage.hide_on_freebasics %}
      {% if not is_via_freebasics %}
        <div class="banner--text">
          <div class="banner__caption">
            <h1 class="banner__title">
              {{bannerpage.title|smarttruncatechars:115|safe}}
            </h1>
            {% if bannerpage.subtitle %}
              <p class="banner__subtitle">{
                { bannerpage.subtitle|smarttruncatechars:115|safe }}
              </p>
            {% endif %}
          </div>
            {% if bannerpage.banner_link_page %}
              <a href="{% pageurl bannerpage.banner_link_page.specific %}" target="_top" class="call-to-action__item">
                 <span class="call-to-action__item--text">{% trans "Click here for more" %}</span>
              </a>
            {% elif bannerpage.external_link %}
             <a href="{% if bannerpage.external_link %}{{bannerpage.external_link}}{% elif bannerpage.banner_link_page %}{% pageurl bannerpage.banner_link_page.specific %}{% endif %}" class="call-to-action__item">
               <span class="call-to-action__item--text">{% trans "Click here for more" %}</span>
             </a>
            {% endif %}
        </div>
      {% endif %}
    {% else %}
      {% if bannerpage.banner %}
        {% image bannerpage.banner width-1080 as tmp_photo_1x %}
        {% if bannerpage.banner_link_page %}
          <a href="{% pageurl bannerpage.banner_link_page.specific %}" target="_top" class="banner__item-link">
            <div title="{{ bannerpage.title }}" class="banner__image" style="background-image: url('{{tmp_photo_1x.url}}');"></div>
          </a>
        {% elif bannerpage.external_link %}
          <a href="{{ bannerpage.external_link }}" target="_top" class="banner__item-link">
            <div title="{{ bannerpage.title }}" class="banner__image" style="background-image: url('{{tmp_photo_1x.url}}');"></div>
          </a>
        {% else %}
          <div title="{{ bannerpage.title }}" class="banner__image" style="background-image: url('{{tmp_photo_1x.url}}');"></div>
        {% endif %}
        <div class="banner__caption">
          <h1 class="banner__title">{{ bannerpage.title }}</h1>
          {% if bannerpage.subtitle %}
            <p class="banner__subtitle">{{bannerpage.subtitle}}</p>
          {% endif %}
        </div>
      {% else %}
         <div class="banner--text">
          <div class="banner__caption">
            <h1 class="banner__title">
              {{bannerpage.title|smarttruncatechars:115|safe}}
            </h1>
            {% if bannerpage.subtitle %}
              <p class="banner__subtitle">
                {{ bannerpage.subtitle|smarttruncatechars:115|safe }}
              </p>
            {% endif %}
          </div>
            {% if bannerpage.banner_link_page %}
              <a href="{% pageurl bannerpage.banner_link_page.specific %}" target="_top" class="call-to-action__item call-to-action__item--text">
                {% trans "Click here for more" %}
              </a>
            {% elif bannerpage.external_link %}
              <a href="{% if bannerpage.external_link %}{{bannerpage.external_link}}{% elif bannerpage.banner_link_page %}{% pageurl bannerpage.banner_link_page.specific %}{% endif %}" class="call-to-action__item call-to-action__item--text">
                {% trans "Click here for more" %}
              </a>
            {% endif %}
          </div>
      {% endif %}
    {% endif %}
  {% endfor %}
</div>
{% endif %}