{#
/**
 * @file
 * CivicTheme Footer component.
 *
 * Props:
 * - theme: [string] Theme variation (light or dark).
 * - background_image: [string] Content background inline image.
 * - attributes: [string] Additional HTML attributes.
 * - modifier_class: [string] Additional CSS classes.
 *
 * Slots:
 * - content_top1: Top section first content slot.
 * - content_top2: Top section second content slot.
 * - content_middle1: Middle section first content slot.
 * - content_middle2: Middle section second content slot.
 * - content_middle3: Middle section third content slot.
 * - content_middle4: Middle section fourth content slot.
 * - content_middle5: Middle section fifth content slot.
 * - content_bottom1: Bottom section first content slot.
 * - content_bottom2: Bottom section second content slot.
 *
 * Blocks:
 * - content_top1_block
 * - content_top2_block
 * - content_middle1_block
 * - content_middle2_block
 * - content_middle3_block
 * - content_middle4_block
 * - content_middle5_block
 * - content_bottom1_block
 * - content_bottom2_block
 */
#}

{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
{% set modifier_class = '%s %s'|format(theme_class, modifier_class|default('')) %}

{% if content_top1 is not empty or content_top2 is not empty or content_middle1 is not empty or content_middle2 is not empty or content_middle3 is not empty or content_middle4 is not empty or content_bottom1 is not empty or content_bottom2 is not empty %}
  <footer class="ct-footer {{ modifier_class -}}" role="contentinfo" data-component-name="ct-footer" {% if background_image %}style="background-image: url('{{ background_image }}')"{% endif %} {% if attributes %}{{ attributes|raw }}{% endif %}>

    {% if content_top1 is not empty or content_top2 is not empty %}
      <div class="container ct-footer__top">
        <div class="row">

          {% if content_top1 is not empty %}
            {%- block content_top1_block %}
              <div class="col-xxs-12 col-m-6">
                <div class="ct-footer__top__content-top1">
                  {{- content_top1|raw -}}
                </div>
              </div>
            {% endblock -%}
          {% endif %}

          {% if content_top2 is not empty %}
            {%- block content_top2_block %}
              <div class="col-xxs-12 col-m-6">
                <div class="ct-footer__top__content-top2">
                  {{- content_top2|raw -}}
                </div>
              </div>
            {% endblock -%}
          {% endif %}

        </div>
      </div>
    {% endif %}

    {% if content_middle1 is not empty or content_middle2 is not empty or content_middle3 is not empty or content_middle4 is not empty or content_middle5 is not empty %}
      <div class="container ct-footer__middle">
        <div class="row">

          {% if content_middle1 is not empty %}
            {%- block content_middle1_block %}
              <div class="col-xxs-12 col-m-3">
                <div class="ct-footer__middle__content-middle1">
                  {{- content_middle1|raw -}}
                </div>
              </div>
            {% endblock -%}
          {% endif %}

          {% if content_middle2 is not empty %}
            {%- block content_middle2_block %}
              <div class="col-xxs-12 col-m-3">
                <div class="ct-footer__middle__content-middle2">
                  {{- content_middle2|raw -}}
                </div>
              </div>
            {% endblock -%}
          {% endif %}

          {% if content_middle3 is not empty %}
            {%- block content_middle3_block %}
              <div class="col-xxs-12 col-m-3">
                <div class="ct-footer__middle__content-middle3">
                  {{- content_middle3|raw -}}
                </div>
              </div>
            {% endblock -%}
          {% endif %}

          {% if content_middle4 is not empty %}
            {%- block content_middle4_block %}
              <div class="col-xxs-12 col-m-3">
                <div class="ct-footer__middle__content-middle4">
                  {{- content_middle4|raw -}}
                </div>
              </div>
            {% endblock -%}
          {% endif %}

          {% if content_middle5 is not empty %}
            {%- block content_middle5_block %}
              <div class="col-xxs-12">
                <div class="ct-footer__middle__content-middle5">
                  {{- content_middle5|raw -}}
                </div>
              </div>
            {% endblock -%}
          {% endif %}

        </div>
      </div>
    {% endif %}

    {% if content_bottom1 is not empty or content_bottom2 is not empty %}
      <div class="container ct-footer__bottom">
        <div class="row">

          {% if content_bottom1 is not empty %}
            {%- block content_bottom1_block %}
              <div class="col-xxs-12 col-m-7">
                <div class="ct-footer__bottom__content-bottom1">
                  {{- content_bottom1|raw -}}
                </div>
              </div>
            {% endblock -%}
          {% endif %}

          {% if content_bottom2 is not empty %}
            {%- block content_bottom2_block %}
              <div class="col-xxs-12 col-m-5">
                <div class="ct-footer__bottom__content-bottom2">
                  {{- content_bottom2|raw -}}
                </div>
              </div>
            {% endblock -%}
          {% endif %}

        </div>
      </div>
    {% endif %}

  </footer>
{% endif %}
