@openeuropa/bcl-theme-default 0.22.0 → 0.25.0

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

@@ -6,13 +6,13 @@
 
 {% block content %}
   {% if project_status_title is not empty %}
-    {% set _project_title_attributes = create_attribute().addClass(['fw-bold', 'mb-4']) %}
+    {% set _project_title_attributes = create_attribute().addClass(['mb-4']) %}
     {% if project_status_id is not empty %}
       {% set _project_title_attributes = _project_title_attributes.setAttribute('id', project_status_id) %}
     {% endif %}
     {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
       title: project_status_title,
-      title_tag: 'h3',
+      title_tag: 'h2',
       attributes: _project_title_attributes,
     } only %}
   {% endif %}
@@ -31,8 +31,8 @@
     {% for _paragraph in first_paragraphs %}
       {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
         title: _paragraph.title,
-        title_tag: 'h3',
-        attributes: create_attribute().addClass(['fw-bold', 'mb-4', 'pt-3'])
+        title_tag: 'h2',
+        attributes: create_attribute().addClass(['mb-4', 'pt-3'])
                                       .setAttribute('id', _paragraph.title_id),
       } only %}
       {{- _paragraph.content -}}
@@ -51,8 +51,8 @@
     {% for _paragraph in second_paragraphs %}
       {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
         title: _paragraph.title,
-        title_tag: 'h3',
-        attributes: create_attribute().addClass(['fw-bold', 'mb-4', 'pt-3'])
+        title_tag: 'h2',
+        attributes: create_attribute().addClass(['mb-4', 'pt-3'])
                                       .setAttribute('id', _paragraph.title_id),
       } only %}
       {{- _paragraph.content -}}
@@ -60,27 +60,19 @@
   {% endif %}
 
   {% if gallery.main_title is not empty %}
-    {% set _gallery_title_attributes = create_attribute().addClass(['fw-bold', 'my-4']) %}
+    {% set _gallery_title_attributes = create_attribute().addClass(['my-4']) %}
     {% if gallery.main_title_id is not empty %}
       {% set _gallery_title_attributes = _gallery_title_attributes.setAttribute('id', gallery.main_title_id) %}
     {% endif %}
     {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
       title: gallery.main_title,
-      title_tag: 'h3',
+      title_tag: 'h2',
       attributes: _gallery_title_attributes,
     } only %}
   {% endif %}
-  {% if gallery.items is defined and gallery.items is not empty %}
-  <div class="mt-3">
-    {% for _showcase in gallery.items %}
-      <div class="mb-2-5 pb-4">
-      {% if _showcase.carousel %}
-        {% include '@oe-bcl/bcl-carousel/carousel.html.twig' with _showcase only %}
-      {% else %}
-        {% include '@oe-bcl/bcl-featured-media/featured-media.html.twig' with _showcase only %}
-      {% endif %}
-      </div>
-    {% endfor %}
+  {% if gallery is not empty %}
+  <div class="mt-3 mb-4-5">
+    {% include '@oe-bcl/bcl-gallery/gallery.html.twig' with gallery only %}
   </div>
   {% endif %}
 

package/templates/bcl-project-status/project-status.html.twig

@@ -9,6 +9,7 @@
   - label (string) (default: '')
   - badge (string) (default: ''),
   - progress (string) (default: '')
+  - attributes (drupal attrs)
 #}
 
 {% set _label = label|default('') %}
@@ -49,6 +50,7 @@
     {% if _badge is not empty %}
       {% include '@oe-bcl/bcl-badge/badge.html.twig' with {
         label: _badge,
+        rounded_pill: true,
         background: _bg,
         attributes: create_attribute().addClass(['mb-3', 'mb-md-0']),
       } only %}

package/templates/bcl-recent-activities/recent-activities.html.twig

@@ -40,19 +40,21 @@
     {% endif %}
     {% if _activity.content is not empty and _activity.meta is not empty %}
     <div>
-      {% if _activity.content is not empty %}
+      {%- if _activity.content is not empty -%}
         <p class="mb-2">{{- _activity.content -}}</p>
-      {% endif %}
-      {% if _activity.meta is not empty and _activity.meta is iterable %}
-        {% for _meta in _activity.meta %}
+      {%- endif -%}
+      {%- if _activity.meta is not empty and _activity.meta is iterable -%}
+        {%- for _meta in _activity.meta -%}
         <p class="mb-0">
+        {%-  if _meta.icon is not empty -%}
           {% include '@oe-bcl/bcl-icon/icon.html.twig' with _meta.icon only %}
+        {%- endif -%}
           {{- _meta.label -}}
         </p>
-        {% endfor %}
-      {% endif %}
+        {%- endfor -%}
+      {%- endif -%}
     </div>
-    {% endif %}
+    {%- endif -%}
   </div>
   {% endfor %}
 {% endif %}

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

@@ -2,10 +2,17 @@
 
 {% block banner %}
 {% if banner.search_bar is defined %}
-  <div class="bg-lighter py-4 py-lg-3">
+  <div class="bg-lighter pt-3 pb-4 pb-lg-3">
     <div class="container">
       <div class="row">
-        <div class="col-12 col-lg-6 offset-lg-3">
+        <div class="col-12 col-lg-3">
+          {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+            title: main_title,
+            title_tag: "h1",
+            attributes: create_attribute().addClass(['mb-3', 'mb-lg-0']),
+          } only %}
+        </div>
+        <div class="col-12 col-lg-6 align-self-center">
           {% include '@oe-bcl/bcl-search-form/search-form.html.twig' with banner.search_bar only %}
         </div>
       </div>  

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

@@ -1,10 +1,11 @@
 {% spaceless %}
 
 {# Parameters:
-  - pill: (boolean) (default: false)
-  - icon: (icon Object) (default: {})
-  - submit: (button Object) (default: {})
-  - input: (form input Object) (default: {})
+  - pill (boolean) (default: false)
+  - icon (icon Object) (default: {})
+  - submit (button Object) (default: {})
+  - input (form input Object) (default: {})
+  - attributes (drupal attrs)
   ]
 #}
 
@@ -13,7 +14,7 @@
 {% set _submit = submit|default({}) %}
 {% set _input = input|default({}) %}
 
-{% set _classes = ["bcl-search-form"] %}
+{% set _classes = ['bcl-search-form'] %}
 
 {% if _pill %}
   {% set _classes = _classes|merge(['rounded']) %}

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

@@ -2,25 +2,25 @@
 
 {#
   Parameters:
-  - "id" (string) (default: '')
-  - "label" (string) (default: '')
-  - "label_extra_classes" (string) (default: '')
-  - "hidden_label" (boolean) (default: false)
-  - "helper_text" (string) (default: '')
-  - "helper_text_id" (string) (default: '')
-  - "disabled" (boolean) (default: false)
-  - "invalid" (boolean) (default: false)
-  - "valid" (boolean) (default: false)
-  - "invalid_feedback" (string) (default: '')
-  - "valid_feedback" (string) (default: '')
-  - "required" (boolean) (default: false)
-  - "multiple" (boolean) (default: false)
-  - "options": (array of objects with value and label keys) (default: [])
-  - "aria_label": (string) (default: '')
-  - "clean_class": (boolean) (default: false) - removes 'form-select' class
+  - id (string) (default: '')
+  - label (string) (default: '')
+  - label_extra_classes (string) (default: '')
+  - hidden_label (boolean) (default: false)
+  - helper_text (string) (default: '')
+  - helper_text_id (string) (default: '')
+  - disabled (boolean) (default: false)
+  - invalid (boolean) (default: false)
+  - valid (boolean) (default: false)
+  - invalid_feedback (string) (default: '')
+  - valid_feedback (string) (default: '')
+  - required (boolean) (default: false)
+  - multiple (boolean) (default: false)
+  - options: (array of objects with value and label keys) (default: [])
+  - aria_label (string) (default: '')
+  - clean_class (boolean) (default: false) - removes 'form-select' class
+  - attributes (drupal attrs)
 #}
 
-{% set _classes = ['form-select'] %}
 {% set _id = id|default('') %}
 {% set _disabled = disabled|default(false) %}
 {% set _options = options|default([]) %}
@@ -38,6 +38,7 @@
 {% set _clean_class = clean_class|default(false) %}
 {% set _hidden_label = hidden_label|default(false) %}
 
+{% set _classes = ['form-select'] %}
 {% set _label_class = 'form-label' %}
 
 {% if _clean_class %}

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

@@ -7,12 +7,14 @@
   - size (string) (default: '')
     - options ['sm', 'lg']
   - assistive_text (string) (default: '')
+  - attributes (drupal attrs)
 #}
 
 {% set _type = type|default('border') %}
 {% set _variant = variant|default('') %}
 {% set _size = size|default('') %}
 {% set _assistive_text = assistive_text|default('') %}
+
 {% set _classes = ['spinner-' ~ _type] %}
 {% if _size is not empty %}
   {% set _classes = _classes|merge(['spinner-' ~ _type ~ '-' ~ _size]) %}

package/templates/bcl-subscription-block/subscription-block.html.twig

@@ -4,18 +4,20 @@
   - title: (string) (default: '')
   - content: (string) (default: '')
   - button: (button Object) (default: {})
+  - attributes (drupal attrs)
 #}
 
 {% set _title = title|default(false) %}
 {% set _content = content|default('') %}
 {% set _button = button|default({}) %}
-{% set _modal = modal|default({}) %}
+
+{% set _classes = ['bcl-subscription-block', 'bg-light', 'px-4-5', 'pt-4', 'pb-4-5'] %}
 
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
 {% endif %}
 
-{% set attributes = attributes.addClass(['bg-light', 'px-4-5', 'pt-4', 'pb-4-5']) %}
+{% set attributes = attributes.addClass(_classes) %}
 
 <div
   {{ attributes }}

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

@@ -10,7 +10,7 @@
   - small (boolean) (default: false)
   - alignment (string) (default: '')
     - options ['bottom', 'middle', 'top']
-  - caption (string) (default: "")
+  - caption (string) (default: '')
   - caption_top (boolean) (default: false)
   - border (string) (default: '')
     - options ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']
@@ -43,6 +43,7 @@
           ]
         }
     ]
+  - attributes (drupal attrs)
 #}
 
 {% set _striped = striped|default(false) %}
@@ -58,6 +59,7 @@
 {% set _table_footer = table_footer|default({}) %}
 {% set _table_head = table_head|default({}) %}
 {% set _rows = rows|default([]) %}
+
 {% set _classes = ['table'] %}
 {% if _striped %}
   {% set _classes = _classes|merge(['table-striped']) %}

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

@@ -2,23 +2,25 @@
 
 {#
   Parameters:
-  - "id" (string) (default: '')
-  - "label" (string) (default: '')
-  - "disabled" (boolean) (default: false)
-  - "valid" (boolean) (default: false)
-  - "invalid" (boolean) (default: false)
-  - "invalid_feedback" (string) (default: '')
-  - "valid_feedback" (string) (default: '')
-  - "required" (boolean) (default: false)
-  - "readonly" (boolean) (default: false)
-  - "rows" (int) (default: 4)
-  - "helper_text" (string) (default: '')
-  - "helper_text_id" (string) (default: '')
-  - "hidden_label" (boolean) (default: false)
-  - "text" (string) (default: '')
-  - "floating" (boolean) (default: false)
-  - "horizontal" (boolean) (default: false)
-  - "horizontal_class" (string) (default: col-sm-10)
+  - id (string) (default: '')
+  - label (string) (default: '')
+  - required (boolean) (default: false)
+  - disabled (boolean) (default: false)
+  - readonly (boolean) (default: false)
+  - valid (boolean) (default: false)
+  - invalid (boolean) (default: false)
+  - invalid_feedback (string) (default: '')
+  - valid_feedback (string) (default: '')
+  - helper_text (string) (default: '')
+  - helper_text_id (string) (default: '')
+  - hidden_label (boolean) (default: false)
+  - text (string) (default: '')
+  - rows (int) (default: 4)
+  - floating (boolean) (default: false)
+  - horizontal (boolean) (default: false)
+  - horizontal_class (string) (default: col-sm-10)
+  - horizontal_label_class (string) (default: col-sm-2)
+  - attributes (drupal attrs)
 #}
 
 {% set _id = id|default('') %}
@@ -30,19 +32,20 @@
 {% set _valid = valid|default(false) %}
 {% set _invalid_feedback = invalid_feedback|default('') %}
 {% set _valid_feedback = valid_feedback|default('') %}
-{% set _floating = floating|default(false) %}
 {% set _helper_text = helper_text|default('') %}
 {% set _helper_text_id = helper_text_id|default('') %}
 {% set _hidden_label = hidden_label|default(false) %}
 {% set _text = text|default('') %}
+{% set _rows = rows|default('4') %}
+{% set _floating = floating|default(false) %}
 {% set _horizontal = horizontal|default(false) %}
 {% set _horizontal_class = horizontal_class|default('col-sm-10') %}
 {% set _horizontal_label_class = horizontal_label_class|default('col-sm-2') %}
+
 {% set _label_block = false %}
 {% set _label_class = 'form-label' %}
 {% set _classes = ['form-control'] %}
 
-{% set _rows = rows|default('4') %}
 {% if _invalid is not empty %}
   {% set _classes = _classes|merge(['is-invalid']) %}
 {% endif %}

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

@@ -2,35 +2,38 @@
 
 {#
 Parameters:
-  - "id": (integer) (default: random(1000))
-  - "toggle_collapsed": (string) (default: '')
-  - "toggle_expanded": (string) (default: '')
-  - "hide" (object): (default: undefined)
-    - "from": (integer) (default: items.length) Item index after which to start hiding timeline items
-    - "to": (integer) (default: items.length) Item index after which to resume displaying timeline items
-  - title: (string) (default: "")
-  - title_tag: (string) (default: "h2")
+  - id: (integer) (default: random(1000))
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h2')
+  - title_link: (link object) (default: {})
   - title_attributes (drupal attrs)
-  - "items" (array) (default: []):
-    - "id": (string) (default: '')
-    - "label": (string) (default: '')
-    - "title": (string) (default: '')
-    - "content": (block) (default: '')
-  - "icon_path" (string) (default: ''): file containing the svg icons
+  - toggle_collapsed: (string) (default: '')
+  - toggle_expanded: (string) (default: '')
+  - items (array) (default: []): [
+    {
+      id: (string) (default: '')
+      label: (string) (default: '')
+      title: (string) (default: '')
+      content: (block) (default: '')
+    }
+  ]
+  - hide_from (integer) (default: items.length) Item index after which to start hiding timeline items
+  - hide_to (integer) (default: items.length) Item index after which to resume displaying timeline items
+  - icon_path (string) (default: ''): file containing the svg icons
 #}
 
-{# Internal properties #}
-
 {% set _id = id|default(random(1000)) %}
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('h2') %}
+{% set _title_link = title_link|default({}) %}
 {% set _title_attributes = title_attributes ?: create_attribute() %}
-{% set _items = items|default([]) %}
-{% set _icon_path = icon_path|default('') %}
 {% set _toggle_collapsed = toggle_collapsed|default('') %}
 {% set _toggle_expanded = toggle_expanded|default('') %}
+{% set _items = items|default([]) %}
 {% set _hide_from = hide.from|default(items|length) %}
 {% set _hide_to = hide.to|default(items|length) %}
+{% set _icon_path = icon_path|default('') %}
+
 {% set _toggler = false %}
 
 {% if attributes is empty %}
@@ -62,6 +65,7 @@ Parameters:
   {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
     title: _title,
     title_tag: _title_tag,
+    title_link: _title_link,
     attributes: _title_attributes,
   } only %}
 {% endif %}
@@ -79,9 +83,9 @@ Parameters:
         {% if _item.id is defined and _item.id is not empty %}
           id="{{ _item.id }}"
         {% endif %}>
-          <h5>{{ _item.label }}</h5>
+          <p class="fs-5 mb-1 fw-medium">{{ _item.label }}</p>
           {% if _item.title is defined and _item.title is not empty %}
-          <h6>{{ _item.title }}</h6>
+          <p class="fs-6 mb-1 fw-medium">{{ _item.title }}</p>
           {% endif %}
           {% if _item.content is defined and _item.content is not empty %}
           <div>{{ _item.content }}</div>

package/templates/bcl-toast/toasts.html.twig

@@ -2,23 +2,23 @@
 
 {#
   Parameters:
-  - "with_wrapper" (boolean) (default: false)
-  - "wrapper_classes" (string) (default: '')
-  - "wrapper_aria_live" (string) (default: '')
-  - "with_container" (boolean) (default: false)
-  - "container_classes" (string) (default: '')
-  - "toasts" (array of objects) format: [
+  - with_wrapper (boolean) (default: false)
+  - wrapper_classes (string) (default: '')
+  - wrapper_aria_live (string) (default: '')
+  - with_container (boolean) (default: false)
+  - container_classes (string) (default: '')
+  - toasts (array of objects) format: [
     {
-      - "body" (string) (default: '')
-      - "role" (string) (default: 'alert')
-      - "with_close" (boolean) (default: true)
-      - "autohide" (boolean) (default: false)
-      - "with_body_wrapper" (boolean) (default: false)
-      - "body_wrapper_classes" (string) (default: '')
-      - "attributes" (drupal object) (default: undefined)
-    },
-    ...
+      - body (string) (default: '')
+      - role (string) (default: 'alert')
+      - with_close (boolean) (default: true)
+      - autohide (boolean) (default: false)
+      - with_body_wrapper (boolean) (default: false)
+      - body_wrapper_classes (string) (default: '')
+      - attributes (drupal object) (default: undefined)
+    }
   ]
+  - attributes (drupal attrs)
 #}
 
 {% set _toasts = toasts|default([]) %}

package/templates/bcl-user/{user-view-compact.html.twig → user-compact.html.twig}

@@ -13,13 +13,14 @@
   - infos (array of strings) (default: [])
 #}
 
-{% set _picture_classes = "rounded-pill" %}
+{% set _picture_classes = 'rounded-pill' %}
+{% set _classes = ['bcl-user-compact', 'd-flex', 'mb-3'] %}
 
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
 {% endif %}
 
-{% set attributes = attributes.addClass(["d-flex", "mb-3"]) %}
+{% set attributes = attributes.addClass(_classes) %}
 
 {% if picture is not empty and picture.classes is not empty %}
   {% set _picture_classes = _picture_classes ~ ' ' ~ picture.classes %}

package/templates/bcl-user/user-terms.html.twig

@@ -0,0 +1,11 @@
+{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
+
+{% block content %}
+  {{ get_dummy_text(4, true) }}
+  <ul class="mb-4-5">
+    <li>{{ get_dummy_text() }}</li>
+    <li>{{ get_dummy_text() }}</li>
+    <li>{{ get_dummy_text() }}</li>
+  </ul>
+  {% include '@oe-bcl/bcl-form/form.html.twig' with terms_form only %}
+{% endblock %}

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

@@ -0,0 +1,137 @@
+{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
+
+{% block content %}
+  {% include "@oe-bcl/bcl-navigation/navigation.html.twig" with navigation only %}
+  <div class="tab-content">
+    <div class="tab-pane fade show active" id="view" role="tabpanel" aria-labelledby="view-tab">
+      {% include '@oe-bcl/bcl-content-banner/content-banner.html.twig' with view.banner only %}
+      <div class="mt-3 mt-md-4-75 pt-4-75 mb-3">
+        {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+          title: 'Personal information',
+          title_tag: 'h2',
+          attributes: create_attribute().addClass(['mb-4']),
+        } only %}
+        <div class="row">
+          <div class="col-12 col-md-6">
+            <div class="row">
+              <div class="col-12 col-md-4">
+                <p class="mb-0">Gender:</p>
+              </div>
+              <div class="col-12 col-md-8">
+                <p>Male</p>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 col-md-4">
+                <p class="mb-0">Nationality:</p>
+              </div>
+              <div class="col-12 col-md-8">
+                <p>German</p>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 col-md-4">
+                <p class="mb-0">Date of birth:</p>
+              </div>
+              <div class="col-12 col-md-8">
+                <p>22/01/1972</p>
+              </div>
+            </div>
+          </div>
+          <div class="col-12 col-md-6">
+            <div class="row">
+              <div class="col-12 col-md-4">
+                <p class="mb-0">Country:</p>
+              </div>
+              <div class="col-12 col-md-8">
+                <p>Germany</p>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 col-md-4">
+                <p class="mb-0">City:</p>
+              </div>
+              <div class="col-12 col-md-8">
+                <p>Düsseldorf</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="my-3">
+        {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+          title: 'Professional information',
+          title_tag: 'h2',
+          attributes: create_attribute().addClass(['mb-4']),
+        } only %}
+        <div class="row">
+          <div class="col-12 col-md-6">
+            <div class="row">
+              <div class="col-12 col-md-4">
+                <p class="mb-0">Organisation:</p>
+              </div>
+              <div class="col-12 col-md-8">
+                <p>DG Test</p>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 col-md-4">
+                <p class="mb-0">Position:</p>
+              </div>
+              <div class="col-12 col-md-8">
+                <p>Director</p>
+              </div>
+            </div>
+          </div>
+          <div class="col-12 col-md-6">
+            <div class="row">
+              <div class="col-12 col-md-4">
+                <p class="mb-0">Working languages:</p>
+              </div>
+              <div class="col-12 col-md-8">
+                <p>English, German</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tab-pane fade" id="edit" role="tabpanel" aria-labelledby="edit-tab">
+      <h1 class="my-4-5">Edit my profile</h1>
+      <h2 class="mb-4-5">Profile image</h2>
+      <div class="row">
+        <div class="bcl-card-start-col bcl-size-large mx-auto ms-md-2-5">
+          <img src="https://picsum.photos/seed/1002/400/400" class="img-fluid" alt="profile-image">
+        </div>
+        <div class="col-12 col-md align-self-center">
+          <div class="mt-3 text-center text-md-start">
+            {% include '@oe-bcl/bcl-form-input/form-input.html.twig' with edit.image_upload_input only %}
+            <div class="d-md-inline-block">
+              {% include '@oe-bcl/bcl-button/button.html.twig' with edit.remove_image_button only %}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-12">
+          {% include '@oe-bcl/bcl-form/form.html.twig' with edit.profile_information only %}
+        </div>
+      </div>
+    </div>
+    <div class="tab-pane fade" id="privacy" role="tabpanel" aria-labelledby="privacy-tab">
+      <h1 class="my-4-5">Privacy settings</h1>
+      <p>Who can consult my data</p>
+      {% include '@oe-bcl/bcl-form/form.html.twig' with privacy.settings only %}
+    </div>
+    <div class="tab-pane fade" id="visibility" role="tabpanel" aria-labelledby="visibility-tab">
+      <h1 class="my-4-5">Visibility settings</h1>
+      <p class="mb-3">Select what information should be displayed to your profile.</p>
+      {% include '@oe-bcl/bcl-form/form.html.twig' with privacy.public_profile_content only %}
+    </div>
+    <div class="tab-pane fade" id="cancel" role="tabpanel" aria-labelledby="cancel-tab">
+      <h1 class="my-4-5">Are you sure you want to cancel your account?</h1>
+      <p class="mb-3">When cancelling your account</p>
+      {% include '@oe-bcl/bcl-form/form.html.twig' with cancel.form only %}
+    </div>
+  </div>
+{% endblock %}