@if (have_rows('flexible_products'))
  @while (have_rows('flexible_products')) @php the_row() @endphp
  @if(get_row_layout() == 'three_components')
    <section class="row d-flex my-5">
      <div class="container">
        <div class="row col-12 p-0 m-0">
          @while (has_sub_field('column_left'))
            <div class="col-12 d-flex align-items-center col-md-6 text-left p-6 tile-secondary bg-secondary">
              <h1>
                {!!  get_sub_field('title', false) !!}
              </h1>
            </div>
          @endwhile
          @if (get_sub_field('component_image'))
            <div class="component-brand d-none d-lg-flex justify-content-around">
              <div class="component-wrapper" style="align-self: flex-end;bottom: -4rem;">
                @if(get_sub_field('url'))
                  <a href="{!! get_sub_field('url') !!}" target="_blank">
                    <img class="component-image" src="{{get_sub_field('component_image')['url']}}" data-tilt
                         data-tilt-scale="1.1" style="height: 10rem;width: 10rem; margin: 0 -5rem"/>
                  </a>
                @else
                  <img class="component-image" src="{{get_sub_field('component_image')['url']}}" data-tilt
                       data-tilt-scale="1.1" style="height: 10rem;width: 10rem; margin: 0 -5rem"/>
                @endif
              </div>
            </div>
          @endif
          @while (has_sub_field('column_right'))
            <div class="col-12 col-md-6 p-6 text-left tile bg-tile">
              <h2 class="h4">{!!  get_sub_field('title', false) !!}</h2>
              <div class="link-description">{!! get_sub_field('description', false) !!}</div>
            </div>
          @endwhile
        </div>
        <div class="row col-12 p-0 m-0">
          @while (has_sub_field('column_bottom'))
            <div class="col-12 d-flex justify-content-center text-left p-6 mt-2 tile-primary bg-primary">
              <div class="col-lg-8 pt-5 p-0">
                <h2 class="h4">{!!  get_sub_field('title', false) !!}</h2>
                <p class="link-description">{!! get_sub_field('description', false) !!}</p>
              </div>
            </div>
          @endwhile
        </div>
        @if (get_sub_field('component_image') && get_sub_field('url'))
          <div class="row col-12 p-0 m-0">
            <div
              class="component-brand col-12 d-flex d-lg-none justify-content-center text-left p-5 mt-2 tile bg-tile">
              <div class="component-wrapper" style="align-self: flex-end;">
                @if(get_sub_field('url'))
                  <a href="{!! get_sub_field('url') !!}" target="_blank">
                    <img class="component-image" src="{{get_sub_field('component_image')['url']}}" data-tilt
                         data-tilt-scale="1.1" style="height: 12rem;width: 12rem; margin: 0 -6rem"/>
                  </a>
                @endif
              </div>
            </div>
          </div>
        @endif
      </div>
    </section>
  @endif
  @if(get_row_layout() == 'product_circles')
    <section class="row d-flex my-5 m-0">
      <div class="container">
        <div class="row col-12 p-0 m-0">
          <div class="col-12 col-lg-3 d-flex justify-content-center product-element-wrapper">
            <div
              class="align-items-end bg-tile col-12 d-flex flex-column justify-content-around mb-5 pb-4 product-element tile"
              data-tilt data-tilt-scale="1.1" data-tilt-reverse="true"
              data-tilt-axis="x">
              <div class="d-block mx-auto product-icon p-2">
                <img class="img-fluid"
                     src="{!! get_the_post_thumbnail_url($post->ID, 'square_thumbnail')!!}"/>
              </div>
              <h2 class="mx-auto product-title" style="word-spacing: 0;">{!! get_the_title() !!}</h2>
            </div>
          </div>
          @while (has_sub_field('first_circle'))
            <div class="col-12 col-lg-3 d-flex justify-content-center tile">
              <div class="p-4 col-12 bg-tile my-2 my-lg-0">
                <h4 class="dark-text">{!!  get_sub_field('title', false) !!}</h4>
                <p class="link-description dark-text">{!! get_sub_field('description', false) !!}</p>
                <div class="circle-background bg-tile tile"></div>
              </div>
            </div>
          @endwhile
          @while (has_sub_field('second_circle'))
            <div class="col-12 col-lg-3 d-flex justify-content-center tile ">
              <div class="p-4 col-12 bg-tile my-2 my-lg-0">
                <h4 class="dark-text">{!!  get_sub_field('title', false) !!}</h4>
                <p class="link-description dark-text">{!! get_sub_field('description', false) !!}</p>
                <div class="circle-background bg-tile tile"></div>
              </div>
            </div>
          @endwhile
          @while (has_sub_field('third_circle'))
            <div class="col-12 col-lg-3 d-flex justify-content-center tile">
              <div class="p-4 col-12 bg-tile my-2 my-lg-0">
                <h4 class="dark-text">{!!  get_sub_field('title', false) !!}</h4>
                <p class="link-description dark-text">{!! get_sub_field('description', false) !!}</p>
                <div class="circle-background bg-tile tile"></div>
              </div>
            </div>
          @endwhile
        </div>
      </div>
    </section>
  @endif
  @if(get_row_layout() == 'product_details')
    <section class="row d-flex my-5">
      <div class="container">
        @if (get_sub_field('top_description'))
          <div
            class="col-12 d-flex align-items-center text-left p-5 tile-primary bg-primary product-feature-top-description">
            <h4 class="link-description">{!!  get_sub_field('top_description') !!}</h4>
          </div>
        @endif
        @if (have_rows('product_features'))
          @php $numrows = 0 @endphp
          @while(have_rows('product_features')) @php the_row(); $numrows++ @endphp @endwhile
          <div class="row col-12 p-0 m-0 justify-content-between">
            @while(have_rows('product_features')) @php the_row() @endphp
            <div class="col-12 col-lg-{!! 12 / $numrows !!} p-0 mt-5 m-0 bg-light-primary tile-light-primary">
              @if (get_sub_field('banner'))
                <div class="d-flex"
                     style="height:25rem;width: 100%;background-position:center center;background-size: cover;background-image: url('{!! get_sub_field('banner')['url']!!}');">
                </div>
              @endif
              @if (get_sub_field('title', false))
                <div class="col-12 d-flex align-items-center text-left p-4 tile bg-tile">
                  <h3 class="mx-auto m-0 text-uppercase">{!!  get_sub_field('title', false) !!}</h3>
                </div>
              @endif
              @if (have_rows('description_list'))
                @if($numrows == 1)
                  <div class="col-12 d-flex text-left justify-content-center p-5 product-feature-header">
                    <ul class="description-list-gap px-5">
                      @while(have_rows('description_list')) @php the_row() @endphp
                      <li>{!! the_sub_field('item', false) !!}</li>
                      @endwhile
                    </ul>
                  </div>
                @else
                  <div class="col-12 d-flex text-left justify-content-center p-5 product-feature-header">
                    <ul class="description-list p-0">
                      @while(have_rows('description_list')) @php the_row() @endphp
                      <li>{!! the_sub_field('item', false) !!}</li>
                      @endwhile
                    </ul>
                  </div>
                @endif
              @endif
            </div>
            @endwhile
          </div>
        @endif
      </div>
    </section>
  @endif
  @if(get_row_layout() == 'ipid_download')
    <section class="row d-flex my-5">
      <div class="container">
        <div class="row col-12 p-5 m-0 tile-primary bg-primary align-items-center">
          @if(get_sub_field('link'))
            <div class="col-4 d-flex flex-column align-items-center justify-content-center">
              <a href="{!! get_sub_field('link') !!}" target="_blank" title="{!! the_title() !!} IPID Download" data-tilt
                 data-tilt-scale="1.1">
                <div class="ipid-download"></div>
              </a>
            </div>
          @endif
          @if(get_sub_field('beschreibung'))
          <div class="col-8">
            {!! get_sub_field('beschreibung') !!}
          </div>
          @endif
        </div>
      </div>
    </section>
  @endif
  @if(get_row_layout() == 'two_columns_header_list')
    <section class="row d-flex my-5">
      <div class="container">
        <div class="row col-12 p-0 m-0">
          @while (has_sub_field('column_left'))
            <div class="col-12 col-md-6 justify-content-center flex-column p-6 tile-secondary bg-secondary d-flex align-items-start">
              <h2>{!!  get_sub_field('title', false) !!}</h2>
            </div>
          @endwhile
          @if (get_sub_field('component_image'))
            <div class="component-brand d-none d-lg-flex justify-content-around">
              <div class="component-wrapper" style="align-self: center;">
                <img class="component-image" src="{!! get_sub_field('component_image')['url'] !!}" data-tilt
                     data-tilt-scale="1.1"/>
              </div>
            </div>
          @endif
          @while (has_sub_field('column_right'))
            @if (have_rows('description_list'))
              <div class="col-12 col-md-6 d-flex align-items-center text-left p-6 tile bg-tile">
                <ul class="description-list p-0 pl-5">
                  @while(have_rows('description_list')) @php the_row() @endphp
                  <li>{!! the_sub_field('item') !!}</li>
                  @endwhile
                </ul>
              </div>
            @endif
          @endwhile
        </div>
      </div>
    </section>
  @endif
  @if(get_row_layout() == 'two_columns_header_description')
    <section class="row d-flex my-5">
      <div class="container">
        <div class="row col-12 p-0 m-0">
          @while (has_sub_field('column_left'))
            <div
              class="col-12 col-md-6 justify-content-center flex-column p-6 {!! \App\App::tileBackgroundColor(get_sub_field('background_color')) !!} d-flex align-items-center">
              {!!  get_sub_field('title', false) !!}
            </div>
          @endwhile
          @if (get_sub_field('component_image'))
            <div class="component-brand d-none d-lg-flex justify-content-around">
              <div class="component-wrapper" style="align-self: center;">
                <img class="component-image" src="{!! get_sub_field('component_image')['url'] !!}" data-tilt
                     data-tilt-scale="1.1"/>
              </div>
            </div>
          @endif
          @while (has_sub_field('column_right'))
            <div class="col-12 col-md-6 justify-content-start text-left p-6 {!! \App\App::tileBackgroundColor(get_sub_field('background_color')) !!} d-flex align-items-center">
              <div class="link-description">
                {!! get_sub_field('description') !!}
              </div>
            </div>
          @endwhile
        </div>
      </div>
    </section>
  @endif
  @if(get_row_layout() == 'one_column_text')
    <section class="row d-flex my-5">
      <div class="container">
        <div class="row col-12 p-0 m-0 justify-content-center p-5 d-flex align-items-center">
          <div class="col-12 px-5 flex-column text-left">
            @if (get_sub_field('title', false))
              <h4>{!! get_sub_field('title', false) !!}</h4>
            @endif
            @if (get_sub_field('description', false))
              <p class="link-description">{!! get_sub_field('description', false) !!}</p>
            @endif
          </div>
        </div>
      </div>
    </section>
  @endif
  @if(get_row_layout() == 'one_column_text_colored_bg')
    <section class="row d-flex my-5">
      <div class="container">
        <div class="row col-12 p-0 m-0 justify-content-center p-5 d-flex align-items-center bg-light-primary">
          <div class="col-6 flex-column text-left">
            @if (get_sub_field('title', false))
              <h3>{!! get_sub_field('title', false) !!}</h3>
            @endif
          </div>
        </div>
      </div>
    </section>
  @endif
  @if(get_row_layout() == 'banner')
    <section class="row d-flex my-5">
      <div class="d-flex justify-content-center align-items-end one-column-banner"
           style="margin:-7.5em 0;width: 100%;background-position:center center;background-size: cover;background-image: url('{!! get_sub_field('banner')['url']!!}');">
        <h2 class="display-2 header text-center"
            style="color:white;position: relative;bottom:8.9rem">{!! get_sub_field('title', false) !!}</h2>
      </div>
    </section>
  @endif
  @if(get_row_layout() == 'two_columns_counterpart')
    <section id="{{array_keys(get_row())[1]}}" class="container d-flex my-5">
      <div class="row col-12 p-0 m-0">
        @while (has_sub_field('column_left'))
          <div
                  class="col-12 col-md-6 text-left p-6 flex-column tile-light-primary bg-light-primary text-left d-flex justify-content-center align-items-start">
            <h2>{!!  get_sub_field('title', false) !!}</h2>
            <div class="mt-4">{!! get_sub_field('subtitle') !!}</div>
          </div>
        @endwhile
        @if (get_sub_field('component_image'))
          <div class="component-brand d-none d-lg-flex justify-content-around">
            <div class="component-wrapper" style="align-self: center;">
              <img class="component-image" src="{{get_sub_field('component_image')}}" data-tilt data-tilt-scale="1.1"/>
            </div>
          </div>
        @endif
        @while (has_sub_field('column_right'))
          <div
                  class="align-items-center bg-tile col-12 col-md-6 d-flex justify-content-center link-description p-5 text-left tile">
            <div class="ml-5">{!! get_sub_field('description', false) !!}</div>
          </div>
        @endwhile
      </div>
    </section>
  @endif
  @endwhile
@endif