@php($col_elements = $col_elements ?? ($colElements ?? []))
@php($no_wave = $no_wave ?? ($noWave ?? false))
@php($img_position = $img_position ?? ($imgPosition ?? 'img-left'))
@php($title_class = $title_class ?? ($titleClass ?? null))
@php($btn_1_class = $btn_1_class ?? ($btnOneClass ?? ($btn1Class ?? null)))
@php($btn_2_class = $btn_2_class ?? ($btnTwoClass ?? ($btn2Class ?? null)))

@push('vite-head')
  @vite(['resources/css/components/_columns.scss'])
@endpush

<div class="columns {{ $img_position }}">
  <div class="column column-img">
    @if (! empty($col_elements['img']))
      <img
        src="{{ $col_elements['img']['url'] ?? '' }}"
        alt="{{ $col_elements['img']['alt'] ?? '' }}"
        @unless($no_wave) class="wave-img" @endunless
      />
    @endif
  </div>
  @php($boutons = $col_elements['boutons'] ?? null)
  @php($has_single_btn = ! empty($col_elements['bouton']['url'] ?? null) && ! empty($col_elements['bouton']['title'] ?? null))
  @php($has_repeater_btn = ! empty($boutons) && is_iterable($boutons))
  @php($has_buttons = $has_single_btn || $has_repeater_btn)

  <div class="column column-content">
    @if (! empty($col_elements['titre']))
      <h2 class="{{ $title_class }}">{{ $col_elements['titre'] }}</h2>
    @endif

    <div class="text {{ $has_buttons ? 'mb' : '' }}">
      @if (! empty($col_elements['texte']))
        {!! $col_elements['texte'] !!}
      @endif
    </div>
    @if ($has_buttons)
      <div class="button-container">
        @if ($has_repeater_btn)
          @php($index = 0)
          @foreach ($boutons as $item)
            @php($index++)
            @php($btn = $item['bouton'] ?? null)
            @php($btn_target = $btn['target'] ?? null)
            @php($btn_classes = match (true) {
              $index === 1 && ! empty($btn_1_class) => 'btn ' . $btn_1_class,
              $index === 2 && ! empty($btn_2_class) => 'btn ' . $btn_2_class,
              default => 'btn',
            })
            @if (! empty($btn['url']) && ! empty($btn['title']))
              <p>
                <a
                  href="{{ $btn['url'] }}"
                  class="{{ $btn_classes }}"
                  @if (! empty($btn_target)) target="{{ $btn_target }}" @endif
                >
                  {{ $btn['title'] }}
                </a>
              </p>
            @endif
          @endforeach
        @else
          @php($btn_classes = ! empty($btn_1_class) ? 'btn ' . $btn_1_class : 'btn arrow-secondary')
          @php($btn = $col_elements['bouton'] ?? null)
          @php($btn_target = $btn['target'] ?? null)
          <p>
            <a
              href="{{ $col_elements['bouton']['url'] }}"
              class="{{ $btn_classes }}"
              @if (! empty($btn_target)) target="{{ $btn_target }}" @endif
            >
              {{ $col_elements['bouton']['title'] }}
            </a>
          </p>
        @endif
      </div>
    @endif
  </div>
</div>