{#
/**
 * @file
 * Theme override to display a block.
 *
 * Available variables:
 * - plugin_id: The ID of the block implementation.
 * - label: The configured label of the block if visible.
 * - configuration: A list of the block's configuration values.
 *   - label: The configured label for the block.
 *   - label_display: The display settings for the label.
 *   - provider: The module or other provider that provided this block plugin.
 *   - Block plugin specific settings will also be stored here.
 * - in_preview: Whether the plugin is being rendered in preview mode.
 * - content: The content of this block.
 * - attributes: array of HTML attributes populated by modules, intended to
 *   be added to the main container tag of this template.
 *   - id: A valid HTML ID and guaranteed unique.
 * - title_attributes: Same as attributes, except applied to the main title
 *   tag that appears in the template.
 * - title_prefix: Additional output populated by modules, intended to be
 *   displayed in front of the main title tag that appears in the template.
 * - title_suffix: Additional output populated by modules, intended to be
 *   displayed after the main title tag that appears in the template.
 *
 * @see template_preprocess_block()
 */
#}
{% set class_block = 'contact-layout' %}

{%
  set classes = [
    'block',
    'block-' ~ configuration.provider|clean_class,
    'block-' ~ plugin_id|clean_class,
    class_block,
  ]
%}
<section{{ attributes.addClass(classes) }}>
  <div class="container">
    <div class="row">
      <div class="col-md-2"></div>
      <div class="col-md-8 {{class_block}}__intro">
        <header class="{{class_block}}__header">
          {{ title_prefix }}
          {% if label %}
            <h2{{ title_attributes.addClass('contact-layout__title') }}>{{ label }}</h2>
          {% endif %}
          {{ title_suffix }}
        </header>
        <div class="{{class_block}}__content">
          {{ content.body[0] }}
        </div>
      </div>
    </div>
    {% block content %}
      <div class="row">
        <div class="col-md-6">
          {% set contact_items = content.field_contact_items['#items'] %}
          {% for key, item in contact_items %}
            {% set item = item.entity %}
            {% if item %}
              {% set image_url = file_url(item.field_image.entity.field_media_image.entity.uri.value) %}
              {% set mail = item.field_mail.value %}
              {% set phone = item.field_phone.value %}
              {% set location = item.field_location.value %}
              {% if item.field_image.entity.field_media_image.entity.alt %}
                {% set image_alt = item.field_image.entity.field_media_image.entity.alt %}
              {% else %}
                {% set image_alt = item.field_title.value %}
              {% endif %}
              <div class="{{class_block}}__item">
                {% if image_url %}
                  <figure class="{{class_block}}__image mb-4">
                    <img src="{{ image_url }}" alt="{{ image_alt }}">
                  </figure>
                {% endif %}
                {% if phone %}
                  <div class="{{class_block}}__phone mb-4">
                    <a href="tel:{{ phone }}">{{ phone }}</a>
                  </div>
                {% endif %}
                {% if mail %}
                  <div class="{{class_block}}__mail mb-4">
                    <a href="mailto:{{ mail }}">{{ mail }}</a>
                  </div>
                {% endif %}
                {% if location %}
                  <div class="{{class_block}}__location mb-4">
                    {{ location }}
                  </div>
                {% endif %}
              </div>
            {% endif %}
          {% endfor %}
        </div>
        <div class="col-md-6">
          <div class="{{class_block}}__form block-form">
            {{ content.field_contact_form_entity[0] }}
          </div>
        </div>
      </div>
    {% endblock %}
  </div>
</section>

.contact-layout {
  background-color: $alabaster;
  padding: rem(30px) 0;

  @include from(l) {
    padding: rem(80px) 0;
  }

  &__intro {
    padding-bottom: rem(30px);
    text-align: center;

    @include from(l) {
      padding-bottom: rem(80px);
    }

    a {
      color: $orange;
    }
  }

  &__title {
    margin-bottom: rem(20px);

    @include from(l) {
      margin-bottom: rem(30px);
    }
  }

  &__image {
    @include fluid-aspect(1 1);
    margin-bottom: rem(20px);
    width: 100%;

    @include from(l) {
      margin-bottom: rem(30px);
    }


    img {
      border-radius: rem(40px);
      width: 100%;
    }
  }

  &__item {
    margin-bottom: rem(40px);

    a {
      color: $orange;
    }

    > div {
      align-items: center;
      display: flex;
      gap: rem(20px);

      &:before {
        content: '';
        display: block;
        height: rem(37px);
        width: rem(37px);
      }
    }
  }

  &__phone {
    &:before {
      background-image: url('../img/icons/phone.png');
    }
  }

  &__mail {
    &:before {
      background-image: url('../img/icons/email.png');
    }
  }

  &__location {
    &:before {
      background-image: url('../img/icons/location.png');
    }
  }
}