<div class="projects-slider {{ isset($center_title) ? 'projects-slider--fix-margin' : '' }} block-margin-top--{{ $block->margin_type_top }} block-margin-bottom--{{$block->margin_type_bottom}}" data-controller="blocks/projects-slider">
    @if ($block->anchor_id )
        <div id="{{ $block->anchor_id }}" class="anchor-offset"></div>
    @endif
    <div class="projects-slider__divider" data-aos="growline" data-aos-delay="500" data-aos-once="true"></div>
    @if (isset($block->block_title))
        <div class="projects-slider__container-title {{ isset($center_title) ? 'projects-slider--center' : '' }}" data-aos="fade-up" data-aos-once="true" data-aos-delay="1000">
            <h2>
                @title($block->block_title)
            </h2>
            <p>
                @title($block->block_subtitle)
            </p>
        </div>
    @endif
    <div class="projects-slider__wrapper" data-aos="fade-up" data-aos-delay="500" data-aos-once="true">
        {{-- START SLIDER DESKTOP --}}
        <div class="projects-slider__container projects-slider__desktop" data-role="slider">
            @php
                $projects = $block->projects()
                    ->full()
                    ->where('status', 'published')
                    ->where('lang_status', 'published')
                    ->orderBy('block_project.position')
                    ->get();
                $auxProject = null;
                $slideCount = 0;
            @endphp
            @foreach($projects as $i => $project)
                @if(($i + 1) % 2 == 0)
                    @include(
                        'frontend.templates.blocks.project-slide',
                        array(
                            'projectOne' => $auxProject,
                            'projectTwo' => $project,
                            'container_class' => 'project-slide--slider',
                            'id' => (($i - 1) / 2),
                            'invert' => (($i - 1) / 2) % 2 == 1
                        ))
                    <?php
                        $auxProject =  null;
                        $slideCount++;
                    ?>
                @else
                    <?php $auxProject =  $project; ?>
                @endif
            @endforeach
            @if($auxProject)
                @include(
                    'frontend.templates.blocks.project-slide',
                    array(
                        'projectOne' => $auxProject,
                        'projectTwo' => null,
                        'container_class' => 'project-slide--slider',
                        'id' => ($projects->count() - 1) / 2,
                        'invert' => false
                    ))
                <?php $slideCount++; ?>
            @endif
        </div>
        <div class="projects-slider__navigation projects-slider__desktop" data-role="nav">
            <div class="projects-slider__prev" data-action="prev">
                @include('frontend.svg.icon-arrow-blue-down')
            </div>

            @for($i = 0; $i < $slideCount; $i++)
                <div class="projects-slider__dot" data-action="dot" data-index="{{ $i }}"></div>
            @endfor
            <div class="projects-slider__next" data-action="next">
                @include('frontend.svg.icon-arrow-blue-down')
            </div>
        </div>
        {{-- END SLIDER DESKTOP --}}

        {{-- START SLIDER MOBILE --}}
        <div class="projects-slider__container projects-slider__mobile" data-role="slider-mobile">
            @foreach($projects as $i => $project)
                @include(
                    'frontend.templates.blocks.project-slide-mobile',
                    array(
                        'project' => $project,
                        'id' => $i
                    ))
            @endforeach
        </div>
        <div class="projects-slider__navigation projects-slider__mobile" data-role="nav-mobile">
            <div class="projects-slider__prev" data-action="prev-mobile">
                @include('frontend.svg.icon-arrow-blue-down')
            </div>
            @foreach($projects as $i => $project)
                <div class="projects-slider__dot" data-action="dot-mobile" data-index-mobile="{{ $i }}"></div>
            @endforeach
            <div class="projects-slider__next" data-action="next-mobile">
                @include('frontend.svg.icon-arrow-blue-down')
            </div>
        </div>
        {{-- END SLIDER MOBILE --}}
    </div>
    @if($block->cta1)
        {!! generateLink($block->cta1, 'square-button square-button--arrow projects-slider__container-button') !!}
    @endif
</div>
