{% load wagtailcore_tags wagtailimages_tags static gem_tags %}
{% if bannerpages %}
  {% for bannerpage in bannerpages %}
    <div class="banner{% if bannerpage.banner %} banner--image-type{% endif %}">
      {% if bannerpage.hide_on_freebasics %}
        {% if not is_via_freebasics %}
          {% if bannerpage.banner_link_page %}
            <a href="{% pageurl bannerpage.banner_link_page.specific %}" target="_top" class="banner__item-link banner__item-link--text">
          {% 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="banner__item-link banner__item-link--text">
          {% endif %}
            <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>
            </div>
          </a>
        {% endif %}
      {% else %}
        {% if bannerpage.banner %}
          {% image bannerpage.banner original as tmp_photo_1x %}
          {% image bannerpage.banner width-480 as tmp_photo %}

          {% if bannerpage.banner_link_page %}
            <div class="banner__image--block">
              <a href="{% pageurl bannerpage.banner_link_page.specific %}" target="_top" class="banner__item-link">
                <img alt="{{ bannerpage.title }}" src="{{tmp_photo_1x.url}}" class="banner__image"/>
              </a>
            </div>
          {% elif bannerpage.external_link %}
            <div class="banner__image--block">
              <a href="{{ bannerpage.external_link }}" target="_top" class="banner__item-link">
                <img alt="{{ bannerpage.title }}" src="{{tmp_photo_1x.url}}" class="banner__image"/>
              </a>
            </div>
          {% else %}
            {% comment %}
              <img alt="{{ bannerpage.title }}" src="{{tmp_photo_1x.url}}" class="banner__image"/>
              <div class="banner__image" style="background-image: url('{{tmp_photo_1x.url}}');"></div>
            {% endcomment %}
              <div class="banner__image--block">
                <img alt="{{ bannerpage.title }}" src="{{tmp_photo_1x.url}}" class="banner__image"/>
              </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 %}
          {% if bannerpage.banner_link_page %}
            <a href="{% pageurl bannerpage.banner_link_page.specific %}" target="_top" class="banner__item-link banner__item-link--text">
          {% 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="banner__item-link banner__item-link--text">
          {% endif %}
            <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>
            </div>
          </a>
        {% endif %}
      {% endif %}
    </div>
  {% endfor %}
{% endif %}