@php
    use Itineris\SageFLBuilder\AbstractHelper;
    use function App\sage;

    /** @var AbstractHelper $helper */
    /** @var \App\Plugins\FLBuilder\Modules\CondeNastTeamSection\CondeNastTeamSection $module */
    $helper = sage(AbstractHelper::class);
    if ('1' === $settings->get_from_staff) {
        $settings->items = $helper->getStaffList();
    }
$show_popup = (bool) $settings->show_popup;
@endphp
<section class="team-section">
    @if(!empty($settings->title))
        <header class="title">
            <h2>{{ $settings->title }}</h2>
        </header><!-- title -->
    @endif
    @if(!empty($settings->items))
        <div class="row slider-sm">
            @foreach($settings->items as $item)
                @php
                    $rand_ids = 'hidden' . random_int('0', '10000');
                    $different_ids = (bool) $settings->different_ids ? $rand_ids : 'fancyhidden';
                @endphp
                <div class="col-xl-3 d-flex slide">
                    <figure class="team-box">
                        @if(!empty($item->picture))
                            @php $picture = $helper->getAttachmentImg($item->picture, $size = 'medium-crop') @endphp
                            @if($picture)
                                <div class="img bg-img">
                                    <img src="{{ $picture['src'] }}" alt="{!! esc_html($item->name) !!}">
                                </div>
                            @endif
                        @endif
                        <figcaption>
                            @if ($show_popup)
                                <a {!! ! empty($item->description) ? 'data-fancybox ' . 'data-src="#'.esc_attr($different_ids).'"' : ''!!}
                                   class="holder">
                                    @if(!empty($item->name))
                                        <h3>{!! esc_html($item->name) !!}@if (! empty($item->title) && $item->bold_title)<strong>{!! esc_html($item->title) !!}</strong>@endif</h3>
                                        @if (! $item->bold_title && ! empty($item->title))
                                            {!! esc_html($item->title) !!}
                                        @endif
                                    @endif
                                    @if (! empty($item->description))
                                        <div class="content">
                                            {!! wpautop(wp_kses_post(wp_trim_words($item->description, 20, '...'))) !!}
                                        </div>
                                        <div class="container" style="display:none;"
                                             id="{{ esc_attr($different_ids) }}">
                                            <div class="row">
                                                @if($picture)
                                                    <div class="col-md-4">
                                                        <div class="text-center">
                                                            <img src="{{ $picture['src'] }}" alt="{!! esc_html($item->name) !!}">
                                                        </div>
                                                    </div>
                                                @endif
                                                <div class="col-md-8">
                                                    @if(!empty($item->name))
                                                        <h3>{!! esc_html($item->name) !!}</h3>
                                                            @if (! empty($item->title) && $item->bold_title)<strong>{!! esc_html($item->title) !!}</strong>@endif
                                                        @if (! $item->bold_title && ! empty($item->title))
                                                            {!! esc_html($item->title) !!}
                                                        @endif
                                                    @endif
                                                    {!! wpautop(wp_kses_post($item->description)) !!}
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    @if (! empty($item->description))
                                        <footer class="text-center">
                                            <span class="btn btn-outline-secondary">Read more</span>
                                        </footer>
                                    @endif
                                </a>
                            @else
                                @if (! empty($item->link))
                                    <a href="{{ esc_url($item->link) }}" class="holder">
                                        @else
                                            <span class="holder">
                                @endif
                                                @if(!empty($item->name))
                                                    <h3>{!! esc_html($item->name) !!}@if (! empty($item->title) && $item->bold_title)<strong>{!! esc_html($item->title) !!}</strong>@endif</h3>
                                                    @if (! $item->bold_title && ! empty($item->title))
                                                        {!! esc_html($item->title) !!}
                                                    @endif
                                                @endif
                                                @if (! empty($item->description))
                                                    <div class="content">
                                            {!! wpautop(wp_kses_post(wp_trim_words($item->description, 20, '...'))) !!}
                                        </div>
                                                @endif
                                                @if (! empty($item->description) && ! empty($item->link))
                                                    <footer class="text-center">
                                                         <span class="btn btn-outline-secondary">Read more</span>
                                                    </footer>
                                        @endif
                                        @if (! empty($item->link))
                                    </a>
                                    @else
                                    </span>
                                @endif
                            @endif
                        </figcaption>
                    </figure>
                </div>
            @endforeach
        </div>
    @endif
    <div class="row">
        <div class="col-md-10 col-lg-11 col-xl-10 mx-auto">
            <div class="text-block">
                @if(!empty($item->text_block))
                    {!! wpautop(wp_kses_post($item->text_block)) !!}
                @endif
            </div><!-- text-block -->
        </div><!-- / col -->
    </div>
</section><!-- team-section -->