layoutcomponents-8.x-1.14-beta2/templates/layout--layoutcomponents-base.html.twig

{#
/**
 * @file
 * Layout Components - base template.
 *
 * Available layout variables:
 * - wrapper: Wrapper element for the layout container.
 * - attributes: Wrapper attributes for the layout container.
 * - container: Container element.
 * - attributes: Wrapper attributes.
 * - title: Wrapper title.
 * - settings: List of columns.
 *
 *
 * Each region variable contains the following properties:
 * - wrapper: The HTML element to use to wrap this region.
 * - attributes: The HTML attributes to use on the wrapper for this region.
 * - content: The content to go inside the wrapper for this region.
 */
#}


{% set section = lc_data.output.section %}
{% set title = lc_data.output.title %}
{% set regions = lc_data.output.regions %}
{% if section %}
  {% if section.styles.background.video or section.styles.background.external_video %}
    <{{ section.general.basic.section_type }}{{ section.attributes.addClass('lc-background-full') }}>
  {% else %}
    <{{ section.general.basic.section_type }}{{ section.attributes }}>
  {% endif %}
  {% if section.styles.background.image_full == 1 %}
    <img src="{{ section.styles.background.image }}">
  {% endif %}
  {% if section.styles.background.external_video %}
    <video no-controls loop autoplay muted>
      <source src="{{ section.styles.background.external_video }}" type="video/mp4" />
    </video>
  {% endif %}
  {% if section.styles.background.video %}
    <video no-controls loop autoplay muted>
      <source src=" {{ file_url(section.styles.background.video['#media'].field_media_video_file.entity.fileuri) }}" type="video/mp4" />
    </video>
  {% endif %}
  {% if title.general.title %}
    <div {{ section.title_container_attr }}>
      <div {{ title.styles.attr_class.container }} {{ title.styles.attr_styles.container }}>
        <{{ title.styles.design.title_type }} {{ title.styles.attr_class.title }} {{ title.styles.attr_styles.title }}>{{ title.general.title }}</{{ title.styles.design.title_type }}>
      <p {{ title.styles.attr_class.description }}>{{ title.general.description }}</p>
    </div>
    </div>
  {% endif %}
  <div {{ section.container }}>
    {{ title_suffix.contextual_links }}
    <div {{ section.row }}>
      {% if section.general.structure.section_carousel == 1 and lc_admin == false %}
        {{ regions.slick }}
      {% elseif section.general.structure.section_tabs == 1 %}
        <ul class="nav nav-tabs" id="myTab" role="tablist">
          {% for key, region in regions %}
            <li class="nav-item" role="presentation">
              <button class="nav-link {{ key == 'first' ? 'active' : '' }}" id="{{ region['#region'].general.tab_title }}-tab" data-bs-toggle="tab" data-bs-target="#{{ region['#region'].general.tab_title }}" type="button" role="tab" aria-controls="{{ region['#region'].general.tab_title }}" aria-selected="true">{{ region['#region'].general.tab_title }}</button>
            </li>
          {% endfor %}
        </ul>

        <div class="tab-content">
          {% for key, region in regions %}
            <div class="tab-pane  {{ key == 'first' ? 'active' : '' }}" id="{{ region['#region'].general.tab_title }}" role="tabpanel" aria-labelledby="{{ region['#region'].general.tab_title }}-tab">{{ region }}</div>
          {% endfor %}
        </div>
      {% else %}
        {% for key, region in regions %}
          {{ region }}
        {% endfor %}
      {% endif %}
    </div>
  </div>
  </{{ section.general.basic.section_type }}>
{% endif %}