<section class="container-fluid BlockProductFormats py-5 <% if BlockThemeMode == 'Dark' %>bg-dark text-white<% end_if %>">
  <div class="container">
    <% if $ShowTitle %>
      <div class="d-inline d-md-none text-center">
        <h2 class="scroll-toggle line-anim">$Title</h2>
        <% if SubTitle %><p class="h2 title">$SubTitle</p><% end_if %>
      </div>
    <% end_if %>
    <div class="row mt-3 mt-md-0">
      <div class="<% if CustomClassLeft %>$CustomClassLeft<% else %>col-md-{$LeftColSize} <% if ContentOrder == 'imageLeft' %>order-2 offset-md-{$OffsetWidth} <% else %>order-2 order-md-1<% end_if %><% end_if %>">
        <% if $ShowTitle %>
          <div class="d-none d-md-inline">
            <h2 class="scroll-toggle line-anim mt-5">$Title</h2>
            <% if SubTitle %><p class="h2 title">$SubTitle</p><% end_if %>
          </div>
        <% end_if %>
        $HTMLContent
      </div>
      <div class="<% if CustomClassRight %>$CustomClassRight<% else %>mb-3 col-md-{$RightColSize} <% if ContentOrder == 'imageLeft' %>order-1<% else %>order-1 order-md-2 offset-md-{$OffsetWidth}<% end_if %><% end_if %>">
        <!-- Tabs -->
        <ul class="nav nav-tabs formate-tabs" id="formateTab" role="tablist">
          <% if ImageFile %>
          <li class="nav-item" role="presentation">
              <button class="nav-link active text-uppercase" id="formate-tab" data-bs-toggle="tab" data-bs-target="#formate-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true"><i class="las la-copy"></i> <%t Template.Formate "Formate" %></button>
          </li>
          <% end_if %>
          <% if ProductFamily.ProductShapes %>
          <li class="nav-item" role="presentation">
              <button class="nav-link text-uppercase <% if not ImageFile %>active<% end_if %>" id="produkte-tab" data-bs-toggle="tab" data-bs-target="#produkte-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false"><i class="las la-plus-square"></i> <% if Top.ProductCategory == 'Home Collection' %><%t Template.Sortiment "Sortiment" %><% else %><%t Template.ZusaetzlicheProdukte "Zusätzliche Produkte" %><% end_if %></button>
          </li>
          <% end_if %>
        </ul>
        <div class="tab-content formate-tabs-content" id="formateTabContent">
          <!-- Formate -->
          <% if ImageFile %>
          <div class="tab-pane fade show active" id="formate-tab-pane" role="tabpanel" aria-labelledby="formate-tab" tabindex="0">
            <div class="p-3 p-md-3 p-lg-4">
              $ImageFile.ResponsiveStandard
              $HTMLFormatContent
            </div>
          </div>
          <% end_if %>
          <!-- Zusätzliche Produkte -->
          <% if ProductFamily.ProductShapes %>
          <div class="tab-pane fade <% if not ImageFile %>show active<% end_if %>" id="produkte-tab-pane" role="tabpanel" aria-labelledby="produkte-tab" tabindex="0">
              <div class="row p-3 p-md-3 p-lg-4 secondary-products">
                  <% loop ProductFamily.ProductShapes.Sort(Sortierung, ASC) %>
                  <div class="col-6 col-md-4 col-lg-3">
                      <img class="img-fluid" src="$MainImage.ScaleWidth(576).URL" alt="$MainImage.Title" />
                      <h6>$ShapeName</h6>
                      <% if ShapeFormat %><p class="mt-0">$ShapeFormat</p><% end_if %>
                  </div>
                  <% end_loop %>
              </div>
          </div>
          <% end_if %>
        </div>
      </div>
    </div>
  </div>
</section>