{#
/**
 * @file
 * CivicTheme Header component.
 *
 * Props:
 * - theme: [string] Theme variation (light or dark).
 * - 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_top3: Top section third content slot.
 * - content_middle1: Middle section first content slot.
 * - content_middle2: Middle section second content slot.
 * - content_middle3: Middle section third content slot.
 * - content_bottom1: Bottom section content slot.
 *
 * Blocks:
 * - content_top1_block
 * - content_top2_block
 * - content_top3_block
 * - content_middle1_block
 * - content_middle2_block
 * - content_middle3_block
 * - content_bottom1_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_top3 is not empty or content_middle1 is not empty or content_middle2 is not empty or content_middle3 is not empty or content_bottom1 is not empty %}
  <header class="ct-header {{ modifier_class -}}" role="banner" {% if attributes %}{{ attributes|raw }}{% endif %}>

    {% if content_top1 is not empty or content_top2 is not empty or content_top3 is not empty %}
      <div class="ct-header__top hide-xxs show-m">

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

        {% if content_top2 is not empty or content_top3 is not empty %}
          <div class="container">
            <div class="row">

              {% block content_top2_block %}
                <div class="col-xxs-12 col-m-4">
                  <div class="ct-header__content-top2">
                    {{ content_top2|raw }}
                  </div>
                </div>
              {% endblock %}

              {% block content_top3_block %}
                <div class="col-xxs-12 col-m-8">
                  <div class="ct-header__content-top3">
                    {{ content_top3|raw }}
                  </div>
                </div>
              {% endblock %}

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

    {% if content_middle1 is not empty or content_middle2 is not empty or content_middle3 is not empty %}
      <div class="ct-header__middle">

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

        {% if content_middle2 is not empty or content_middle3 is not empty %}
          <div class="container">
            <div class="row row--no-wrap">
              {% if content_middle2 is not empty %}
                {% block content_middle2_block %}
                  <div class="col col--no-grow">
                    <div class="ct-header__content-middle2">
                      {{ content_middle2|raw }}
                    </div>
                  </div>
                {% endblock %}
              {% endif %}

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

    {% if content_bottom1 is not empty %}
      <div class="ct-header__bottom">
        {% block content_bottom1_block %}
          <div class="container">
            <div class="row">
              <div class="col-xxs-12">
                <div class="ct-header__content-bottom1">
                  {{ content_bottom1|raw }}
                </div>
              </div>
            </div>
          </div>
        {% endblock %}
      </div>
    {% endif %}
  </header>
{% endif %}
