@extends('partials.components.section', ['align' => 'center'])

@section('section')
    @if ($section['section_fields_team_members'] ?? false)
        <div class="{{ count($section['section_fields_team_members']) > 4 ? 'js-swiper md:-mx-5' : '' }} -mx-2.5 my-5 !gap-8 overflow-hidden first:mt-0 last:mb-0"
            data-grid="true" data-itemsperpage="4" data-pagination="true" data-spacebetween="0">
            <div
                class="swiper-wrapper {{ count($section['section_fields_team_members']) > 4 ? 'grid-rows-2 grid-flow-col !grid' : 'flex justify-center' }}">
                @foreach ($section['section_fields_team_members'] as $member)
                    <div
                        class="swiper-slide {{ count($section['section_fields_team_members']) > 4 ? '' : '!w-auto max-w-[320px] basis-0 grow' }} !h-full p-2 md:p-5">
                        <div class="h-full overflow-hidden rounded-bl-lg rounded-tr-lg bg-white shadow-sm md:shadow">
                            @if ($member['image'] ?? false)
                                <div
                                    class="{{ $loop->index % 3 == 1 ? 'bg-primary/80' : 'bg-accent/80' }} relative mx-auto w-full pb-[85%]">
                                    {!! ResponsivePics::get_image(
                                        $member['image'],
                                        'xs:200',
                                        1,
                                        'w-full h-full object-cover absolute top-0 h-full w-full ',
                                        false,
                                        true,
                                    ) !!}
                                </div>
                            @else
                                <div
                                    class="{{ $loop->index % 3 == 1 ? 'bg-primary/50' : 'bg-accent/50' }} relative mx-auto flex w-full items-center justify-center overflow-hidden rounded-tr-lg pb-[85%]">
                                    @include('partials.svg.user-placeholder', [
                                        'class' => 'absolute top-0 h-full w-full p-4 md:p-8 lg:p-10',
                                    ])

                                </div>
                            @endif
                            <div class="p-5">
                                @if ($member['name'] ?? false)
                                    @include('partials.components.medium-title', [
                                        'title' => $member['name'],
                                        'class' => '!m-0',
                                    ])
                                @endif

                                @if ($member['position'] ?? false)
                                    <p class="text-base">{{ $member['position'] }}</p>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            {{-- Slider Navigation --}}
            @if (count($section['section_fields_team_members']) > 4)
                <div class="mt-8 flex items-center justify-center gap-4">
                    @include('partials.components.swiper-nav')
                </div>
            @endif
        </div>
    @endif
@overwrite