@openeuropa/bcl-theme-default 0.19.0 → 0.22.0

package/templates/bcl-file/file.html.twig

@@ -4,6 +4,7 @@
   Parameters:
   - title (string) (default: '')
   - title_tag (string) (default: 'h2')
+  - title_attributes (drupal attrs)
   - item_title (string) (default: '')
   - icon (icon Object) (default: {})
   - text (string) (default: '')
@@ -37,6 +38,7 @@
 {% set _icon = icon|default({}) %}
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('h2') %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _item_title = item_title|default('') %}
 {% set _text = text|default('') %}
 {% set _content = content|default('') %}
@@ -62,10 +64,11 @@
 {% endif %}
 
 {% if _title is not empty %}
-  {% set _title_classes = 'fw-bold mb-4' %}
-  <{{ _title_tag }} class="{{ _title_classes }}">
-    {{- _title -}}
-  </{{ _title_tag }}>
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    attributes: _title_attributes,
+  } only %}
 {% endif %}
 
 {% if _variant == 'card' %}
@@ -135,7 +138,7 @@
           },
           attributes: create_attribute()
                       .setAttribute('download', _download.url)
-                      .addClass(['text-underline-hover', 'align-self-center', 'd-inline-block', 'mt-1', 'mt-md-0'])
+                      .addClass(['standalone', 'align-self-center', 'd-inline-block', 'mt-1', 'mt-md-0'])
         }) %}
         {% include '@oe-bcl/bcl-link/link.html.twig' with _download only %}
       </div>
@@ -148,7 +151,7 @@
       {% include '@oe-bcl/bcl-link/link.html.twig' with _translation.label|merge({
         path: '#' ~ _id,
         attributes: create_attribute()
-                    .addClass(['text-underline-hover'])
+                    .addClass(['standalone'])
                     .setAttribute('aria-controls', _id)
                     .setAttribute('data-bs-toggle', 'collapse')
                     .setAttribute('aria-expanded', 'false')
@@ -168,7 +171,7 @@
               {% if _item.title is not empty %}
                 <p class="fw-bold m-0">{{ _item.title }}</p>
               {% endif %}
-              {% if _item.title is not empty %}
+              {% if _item.description is not empty %}
                 <p class="m-0">{{ _item.description }}</p>
               {% endif %}
               {% if _item.language is not empty or _item.meta is not empty %}
@@ -194,7 +197,7 @@
               },
               attributes: create_attribute()
                           .setAttribute("download", _item.download.url)
-                          .addClass(['d-block', 'text-underline-hover', 'mt-1'])
+                          .addClass(['d-block', 'standalone', 'mt-1'])
             }) only %}
             </div>
           </div>

package/templates/bcl-footer/footer.html.twig

@@ -69,9 +69,11 @@
                   {% endif %}
                   {% if item.type == 'links' %}
                     {% for link in item.links %}
+                      <div class="mb-1">
                       {% include '@oe-bcl/bcl-link/link.html.twig' with link|merge({
-                        attributes: create_attribute().addClass(['d-block', 'text-underline-hover', 'mb-1'])
+                        attributes: create_attribute().addClass(['standalone'])
                       }) only %}
+                      </div>
                     {% endfor %}
                   {% endif %}
                 {% endfor %}

package/templates/bcl-form/form.html.twig

@@ -3,6 +3,7 @@
 {# Parameters:
   - title: (string) (default: '')
   - title_tag: (string) (default: 'h2')
+  - title_attributes (drupal attrs)
   - helper_text (string) (default: '')
   - antispam (string) (default: '')
   - items (array of array of objects) (default: []) format: [
@@ -26,6 +27,7 @@
 
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('h2') %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _helper_text = helper_text|default('') %}
 {% set _items = items|default([]) %}
 {% set _antispam = antispam|default('') %}
@@ -36,10 +38,11 @@
 {% endif %}
 
 {% if _title is not empty %}
-  {% set _title_classes = 'fw-bold mb-4' %}
-  <{{ _title_tag }} class="{{ _title_classes }}">
-    {{- _title -}}
-  </{{ _title_tag }}>
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    attributes: _title_attributes,
+  } only %}
 {% endif %}
 
 {% if _helper_text is not empty %}

package/templates/bcl-gallery/gallery.html.twig

@@ -0,0 +1,206 @@
+{% spaceless %}
+
+{#
+Parameters:
+  - "id" (string) (default: '')
+  - "title" (string) (default: '')
+  - "title_tag" (string) (default: 'h2')
+  - "title_attributes" (drupal attrs)
+  - "counter" (string) (default: '')
+  - "toggle_collapsed" (string) (default: '')
+  - "toggle_expanded" (string) (default: '')
+  - "previous_label" (string) (default: '')
+  - "next_label" (string) (default: '')
+  - "max_visible_thumbnails" (int) (default: 5)
+  - "items" (array of objects) format: [
+      {
+        thumbnails (string) img path
+        media: (string) <img> tag
+        caption (string)
+        caption_title (string)
+        caption_classes (string)
+        interval (integer) (default: 0)
+      }
+      ...
+    ],
+  - "icon_path" (string) (default: '')
+#}
+
+{# Internal properties #}
+
+{% set _id = id|default('gallery-' ~ random(1000)) %}
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h2') %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
+{% set _counter = counter|default('') %}
+{% set _toggle_collapsed = toggle_collapsed|default('') %}
+{% set _toggle_expanded = toggle_expanded|default('') %}
+{% set _next_label = next_label|default('Next') %}
+{% set _prev_label = prev_label|default('Previous') %}
+{% set _items = items|default([]) %}
+{% set _max_visible_thumbnails = max_visible_thumbnails|default(5) %}
+{% set _icon_path = icon_path|default('') %}
+
+{% set _carousel_items = [] %}
+{% set _carousel_id = "carousel" ~ _id|capitalize %}
+{% set _modal_id = "modal" ~ _id|capitalize %}
+{% set _collpase_id = "collapse" ~ _id|capitalize %}
+{% set _max_visible_thumbnails = _max_visible_thumbnails + 1 %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass('bcl-gallery') %}
+
+{# Print the result #}
+
+{% if _items is not empty %}
+
+  <div {{ attributes }}>
+    {% if _items is iterable %}
+      <div class="d-sm-flex flex-sm-row align-items-sm-center">
+        <div class="flex-sm-grow-1">
+        {% if _title is not empty %}
+          {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+            title: _title,
+            title_tag: _title_tag,
+            attributes: _title_attributes,
+          } only %}
+        {% endif %}
+        </div>
+        <div class="mb-3 mb-sm-0 fw-bold">
+          {%- if _counter is not empty -%}
+            {{ _counter|replace({'%d': _items|length}) }}
+          {%- endif -%}
+        </div>
+      </div>
+
+      {% for _item in _items %}
+        {% if loop.first %}
+          <div class="bcl-gallery__thumbnails">
+        {% endif %}
+          {% if loop.index == _max_visible_thumbnails %}
+            <div class="bcl-gallery__thumbnails-collaspe collapse" id="{{ _collpase_id }}">
+          {% endif %}
+            {% if loop.index % _max_visible_thumbnails == 0 or loop.first %}
+              <ul class="bcl-gallery__grid">
+            {% endif %}
+                <li>
+                  <a href="#" data-bs-target="#{{ _carousel_id }}" data-bs-slide-to="{{ loop.index - 1 }}" class="bcl-gallery__item d-block w-100 img-fluid">
+                    <div class="bcl-gallery__item-overlay" data-bs-target="#{{ _modal_id }}" data-bs-toggle="modal">
+                    {% if '<iframe' in _item.media or '<video' in _item.media %}
+                      <span class="bcl-gallery__item-play-icon">
+                      {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+                        name: 'play-fill',
+                        size: 's',
+                        path: _icon_path,
+                      } only %}
+                      </span>
+                    {% endif %}
+                    {% if _item.caption is not empty or item.caption_title is not empty %}
+                      <div class="bcl-gallery__item-caption">
+                      {% if _item.caption_title is not empty %}
+                        <h5>{{ _item.caption_title }}</h5>
+                      {% endif %}
+                      {% if _item.caption is not empty %}
+                        <div class="bcl-gallery__item-description">
+                          {{ _item.caption }}
+                        </div>
+                      {% endif %}
+                      </div>
+                    {% endif %}
+                    </div>
+                    {{ _item.thumbnail }}
+                  </a>
+                </li>
+            {% if loop.index % 5 == 0 or loop.last %}
+              </ul>
+            {% endif %}  
+          {% if loop.last %}
+            </div>
+          {% endif %}
+        {% if loop.index > _max_visible_thumbnails and loop.last %}
+          </div>
+          <div class="bg-lighter py-3 px-4 mt-2 rounded text-center">
+            <a 
+              class="bcl-gallery__collapse standalone d-none d-sm-inline-block" 
+              aria-controls="{{ _collpase_id }}" 
+              data-bs-toggle="collapse" 
+              aria-expanded="false" 
+              role="button" 
+              href="#{{ _collpase_id }}"
+            >
+              <span class="label-collapsed">{{ _toggle_collapsed|replace({'%d': _items|length}) }}</span>
+              <span class="label-expanded">{{ _toggle_expanded }}</span>
+              {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+                name: 'caret-down-fill',
+                size: '2xs',
+                path: _icon_path,
+                attributes: create_attribute().addClass('ms-2-5'),
+              } only %}
+            </a>
+            <a 
+              class="bcl-gallery__mobile-view-more standalone d-inline-block d-sm-none" 
+              data-bs-target="#{{ _carousel_id }}" 
+              data-bs-slide-to="{{ _max_visible_thumbnails - 1 }}" 
+              role="button" 
+              href="#"
+            >
+              <span data-bs-target="#{{ _modal_id }}" data-bs-toggle="modal">
+                <span class="label-collapsed">{{ _toggle_collapsed|replace({'%d': _items|length}) }}</span>
+                {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+                  name: 'caret-down-fill',
+                  size: '2xs',
+                  path: _icon_path,
+                  attributes: create_attribute().addClass('ms-2-5'),
+                } only %}
+              <span>
+            </a>
+          </div>
+        {% endif %}
+      {% endfor %}
+    {% endif %}
+
+    <div class="modal" id="{{ _modal_id }}" tabindex="-1" aria-labelledby="{{ _modal_id }}" aria-hidden="true" data-bs-backdrop="false">
+      <div class="modal-dialog modal-dialog-centered modal-fullscreen">
+        <div class="modal-content">
+          <div class="modal-header border-0 justify-content-between">
+            {% if _title is not empty %}
+              <div class="modal-title">
+                <h3 class="d-none d-sm-block">{{- _title -}}</h3>
+              </div>
+            {% endif %}
+            <div class="carousel-pager">
+              <span>1</span> / {{ _items|length }}
+            </div>
+            <div class="modal-close">
+              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+          </div>
+          
+          <div class="modal-body d-flex align-items-center justify-content-center">
+            {% for _item in _items %}
+              {% set _carousel_items = _carousel_items|merge([_item|merge({
+                caption: ('<iframe' in _item.media or '<video' in _item.media) ? '' : _item.caption,
+                image: ('<iframe' in _item.media or '<img' in _item.media) ? _item.media|replace({'src=': 'data-src='}) : _item.media,
+              })]) %}
+            {% endfor %}
+            {% include '@oe-bcl/bcl-carousel/carousel.html.twig' with {
+              id: _carousel_id,
+              with_controls: true,
+              with_indicators: false,
+              prev_label: _prev_label,
+              next_label: _next_label,
+              autoplay: false,
+              items: _carousel_items,
+            } only %}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+{% endif %}
+
+{% endspaceless %}

package/templates/bcl-header/header.html.twig

@@ -10,19 +10,23 @@
         classes: ""
       }
   - site_name (string) (default: "")
+  - project_link (string) (default: "")
   - head (Navbar object) (default: {})
   - breadcrumbs (Breadcrumbs object) (default: {})
   - light (boolean) (default: false)
   - modals (Array of modal objects) (default: [])
+  - language_modal (object) (default: {})
 #}
 
 {% set _variant = variant|default('neutral') %}
 {% set _navbar = navbar|default({}) %}
 {% set _project_logo = project_logo|default({}) %}
+{% set _project_link = project_link|default('') %}
 {% set _site_name = site_name|default('') %}
 {% set _site_name_classes = 'bcl-header__site-name' %}
 {% set _head = head|default({}) %}
 {% set _breadcrumbs = breadcrumbs|default({}) %}
+{% set _language_modal = language_modal|default({}) %}
 {% set _modals = modals|default([]) %}
 {% set _light = light|default(false) %}
 
@@ -53,23 +57,31 @@
   {% if _project_logo is not empty or _site_name is not empty %}
   <div class="{{ _project_classes  }}">
     <div class="container">
-    {% if _project_logo is not empty %}
-      <img
-      {% if _project_logo.path is not empty %}
-        src="{{ _project_logo.path }}"
-      {% endif %}
-      {% if _project_logo.alt is not empty %}
-        alt="{{ _project_logo.alt }}"
+    {% if _project_link is not empty %}
+      <a
+        href="{{ _project_link }}"
+      >
+    {% endif %}
+      {% if _project_logo is not empty %}
+        <img
+        {% if _project_logo.path is not empty %}
+          src="{{ _project_logo.path }}"
+        {% endif %}
+        {% if _project_logo.alt is not empty %}
+          alt="{{ _project_logo.alt }}"
+        {% endif %}
+        {% if _project_logo.classes is not empty %}
+          class="{{ _project_logo.classes }}"
+        {% endif %}
+        />
       {% endif %}
-      {% if _project_logo.classes is not empty %}
-        class="{{ _project_logo.classes }}"
+      {% if _site_name is not empty %}
+        <span class="{{ _site_name_classes }}">
+        {{- _site_name -}}
+        </span>
       {% endif %}
-      />
-    {% endif %}
-    {% if _site_name is not empty %}
-      <div class="{{ _site_name_classes }}">
-       {{- _site_name -}}
-       </div>
+    {% if _project_link is not empty %}
+      </a>
     {% endif %}
     </div>
   </div>
@@ -92,4 +104,8 @@
   {% include '@oe-bcl/bcl-modal/modal.html.twig' with modal only %}
 {% endfor %}
 
+{% if _language_modal is not empty %}
+  {% include '@oe-bcl/bcl-language-list/language-list.html.twig' with _language_modal only %}
+{% endif %}
+
 {% endspaceless %}

package/templates/bcl-heading/heading.html.twig

@@ -0,0 +1,42 @@
+{% spaceless %}
+
+{# Parameters:
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - path (string) (default: '')
+  - link: (object) (default: {})
+  - attributes (drupal attrs)
+#}
+
+{% set _title = title|default('') %}
+{% set _path = path|default('') %}
+{% set _title_tag = title_tag|default('h2') %}
+{% set _link = link|default({}) %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{%  endif %}
+
+{% if attributes.class is empty %}
+  {% set attributes = attributes.addClass(['fw-bold', 'mb-4']) %}
+{% endif %}
+
+{% set attributes = attributes.addClass(['bcl-heading']) %}
+
+{% if _link is not empty and _title is not empty and _link.label is empty %}
+  {% set _link = _link|merge({ label: _title }) %}
+{% endif %}
+
+{% if _title is not empty or _link is not empty %}
+<{{ _title_tag }} 
+  {{- attributes -}}
+>
+{%- if _link is not empty -%}
+  {% include '@oe-bcl/bcl-link/link.html.twig' with _link only %}
+{%- else -%}
+  {{- _title -}}
+{%- endif %}
+</{{ _title_tag }}>
+{% endif -%}
+
+{% endspaceless %}

package/templates/bcl-language-list/language-list-grid.html.twig

@@ -0,0 +1,68 @@
+{% spaceless %}
+
+{#
+  Parameters:
+  - items (array) (default: []) format: [
+    {
+      lang (string)
+      label (string)
+      path (string)
+      active (boolean)
+    }
+  ]
+  - category (string) (default: '')
+  - icon_path (string) (default: '')
+#}
+
+{% set _items = items|default([]) %}
+{% set _icon_path = icon_path|default('') %}
+{% set _category = category|default('') %}
+
+{% set _columns = [] %}
+{% set _columns = _columns|merge([_items|slice(0, (items|length / 2)|round(0, 'ceil'))]) %}
+{% set _columns = _columns|merge([_items|slice((items|length / 2)|round(0, 'ceil'), items|length)]) %}
+
+<div class="pb-2">
+  {% if _category is not empty %}
+  <h5 class="mb-4">{{ _category }}</h5>
+  {% endif %}
+  {% if _columns is not empty and _columns is iterable %}
+  <div class="row">
+    {% for _column in _columns %}
+      <div class="col-12 col-md">
+      {% for _item in _column %}
+        {% if _item.attributes is empty %}
+          {% set _item = _item|merge({
+            attributes: create_attribute()
+          }) %}
+        {% endif %}
+        {% set _item = _item|merge({
+          attributes: _item.attributes.addClass(['w-100', 'mb-2-5', 'btn', 'w-100'])
+        }) %}
+        {% if _item.active %}
+          {% set _item = _item|merge({
+            icon: {
+              name: "check2",
+              path: _icon_path,
+            },
+            attributes: _item.attributes.addClass(['selected', 'justify-content-between'])
+          }) %}
+        {% else %}
+          {% set _item = _item|merge({
+            attributes: _item.attributes.addClass('justify-content-start')
+          }) %}
+        {% endif %}
+        {% if _item.lang is not empty %}
+          {% set _item = _item|merge({
+            attributes: _item.attributes.setAttribute('lang', _item.lang).setAttribute('hreflang', _item.lang)
+          }) %}
+        {% endif %}
+        {% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
+      {% endfor %}
+      </div>
+    {% endfor %}
+  </div>
+  {% endif %}
+</div>
+
+{% endspaceless %}

package/templates/bcl-language-list/language-list-modal.html.twig

@@ -0,0 +1,58 @@
+{% extends "@oe-bcl/bcl-modal/modal.html.twig" %}
+
+{% if _title is not empty %}
+  {% set header = true %}
+{% endif %}
+
+{% if _variant == 'neutral' %}
+  {% set size = "xl" %}
+  {% set fullscreen_responsive = "md" %}
+{% else %}
+  {% set size = "fullscreen" %}
+{% endif %}
+
+{% set overlay = false %}
+{% set inside_container = true %}
+
+{% set attributes = attributes.addClass(['bcl-language-list-modal', 'bcl-language-list-modal--' ~ _variant]) %}
+
+{% block header %}
+  {% if size == 'fullscreen' %}
+  <div class="container">
+    {% if variant == 'eu' or variant == 'ec' %}
+    <div class="border-bottom mx-n3 px-3 px-md-0 pt-md-4-5">
+      <div class="py-3-5 px-3 px-sm-0 px-md-3">
+    {% endif %}
+    <div class="d-flex justify-content-between align-items-center">
+  {% endif %}
+  <div class="d-flex align-items-center">
+    {% set _title_classes = 'mb-0' %}
+    {% if _icon_path is not empty %}
+      {% set _title_classes = _title_classes ~ ' ms-2' %}
+      {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+        name: 'globe2',
+        path: _icon_path
+      } only %}
+    {% endif %}
+    <h5 class="{{ _title_classes }}">{{ _title }}</h5>
+  </div>
+  <button type="button" class="btn-close" data-bs-dismiss="modal"
+    {% if _close_label is not empty %}
+      aria-label="{{ _close_label }}"
+    {% endif %}
+  ></button>
+  {% if size == 'fullscreen' %}
+    </div>
+    {% if variant == 'eu' or variant == 'ec' %}
+      </div>
+    </div>
+    {% endif %}
+  </div>
+  {% endif %}
+{% endblock %}
+
+{% block body %}
+  {% include '@oe-bcl/bcl-language-list/language-list.html.twig' with {
+    attributes: create_attribute()
+  } %}
+{% endblock %}

package/templates/bcl-language-list/language-list.html.twig

@@ -0,0 +1,111 @@
+{% spaceless %}
+
+{# Parameters:
+  - overlay (boolean) (default: false)
+  - inside_container (boolean) (default: false)
+  - variant (string) (default: 'neutral')
+  - title (string) (default: '')
+  - logo (object) (default: {}) format: {
+      path (string),
+      alt (string),
+      class (string),
+    }
+  - icon_path (string) (default: '')
+  - eu_category (string) (default: '');
+  - non_eu_category (string) (default: '')
+  - items (array) (default: [])
+    - "lang" (string) (default: '')
+    - "label" (string) (default: '')
+    - "path" (string) (default: '')
+    - "active (boolean) (default: false)
+  - non_eu_items (array) (default: [])
+    - "lang" (string) (default: '')
+    - "label" (string) (default: '')
+    - "path" (string) (default: '')
+    - "active (boolean) (default: false)
+  - close_label (string) (default: '')
+#}
+
+{% set _overlay = overlay|default(false) %}
+{% set _inside_container = inside_container|default(false) %}
+{% set _variant = variant|default('neutral') %}
+{% set _title = title|default('') %}
+{% set _logo = logo|default({}) %}
+{% set _icon_path = icon_path|default('') %}
+{% set _eu_category = eu_category|default('') %}
+{% set _non_eu_category = non_eu_category|default('') %}
+{% set _items = items|default([]) %}
+{% set _non_eu_items = non_eu_items|default([]) %}
+{% set _close_label = close_label|default('') %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% if _overlay %}
+  {% include '@oe-bcl/bcl-language-list/language-list-modal.html.twig' %}
+{% else %}
+  {% set attributes = attributes.addClass(['bcl-language-list', 'bcl-language-list--' ~ _variant]) %}
+
+  {% if not _inside_container %}
+    {% set attributes = attributes.addClass(['pt-5']) %}
+  {% endif %}
+
+  <div
+    {{ attributes }}
+  >
+    {% if _logo is not empty %}
+    <div class="container">
+      {% if _title is empty %}
+      <div class="text-center">
+      {% endif %}
+      <div class="d-inline-flex align-items-center">
+        <img
+          {% if _logo.path is not empty %}
+          src="{{ _logo.path }}"
+          {% endif %}
+          {% if _logo.alt is not empty %}
+          alt="{{ _logo.alt }}"
+          {% endif %}
+          {% if _logo.class is not empty %}
+          class="{{ _logo.class }}"
+          {% endif %}
+        />
+        {% if _title is not empty %}
+        <h5 class="h5 ms-4">{{ _title }}</h5>
+        {% endif %}
+      </div>
+      {% if _title is empty %}
+      </div>
+      {% endif %}
+    </div>
+    {% endif %}
+
+    {% if _items is not empty or _non_eu_items is not empty %}
+    <div class="main pt-4">
+      {% if not (_variant == 'neutral' and _inside_container) %}
+      <div class="container">
+      {% endif %}
+      {% if _items is not empty and _items is iterable %}
+        {% include '@oe-bcl/bcl-language-list/language-list-grid.html.twig' with {
+            items: _items,
+            icon_path: _icon_path,
+            category: eu_category,
+        } only %}
+      {% endif %}
+      {% if _non_eu_items is not empty and _non_eu_items is iterable %}
+        {% include '@oe-bcl/bcl-language-list/language-list-grid.html.twig' with {
+            items: _non_eu_items,
+            icon_path: _icon_path,
+            category: non_eu_category,
+        } only %}
+      {% endif %}
+      {% if not (_variant == 'neutral' and _inside_container) %}
+      </div>
+      {% endif %}
+    </div>
+    {% endif %}
+  </div>
+{% endif %}
+
+{% endspaceless %}