@extends('front.layouts.main')
@section('title'){{ @trans('movement.seo_browse_mover_title') }}@endsection
@section('description'){{ @trans('movement.seo_browse_mover_desc') }}@endsection

@section('content')
<main class="movement-dashboard-page bg-white">  
        <section class="section">
            <div class="container infinite-scroll">
                <div class="row">
                    <div class="col-12">
                        <div class="title-wrapper border-0">
                            <h2 class="box-title large-font-size">{{$title}}</h2>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-center mt-4 mt-md-0">
                    <div class="col-12">
                        @if(isset($movers) && count($movers) > 0)
                        <div class="row infinite-scroll-div">
                            @foreach($movers as $mover)
                            <div class="col-lg-2 col-md-4 col-sm-6">
                                <a href="{{route('front.movement.moverdetails',['slug' => $mover->slug])}}">
                                <img src="{{profileimage($mover->profile_image, 'medium', $mover->mover_user_id)}}" alt="{{$mover->first_name. ' '.$mover->last_name}}" class="rounded-lg d-block fit-img w-100 mt-4" style="height: 238px;" /></a>

                                <a href="{{route('front.movement.moverdetails',['slug' => $mover->slug])}}" class="medium-font-size bold d-block mt-3 mb-2">{{$mover->first_name. ' '.$mover->last_name}}</a>
                                <a href="javascript:void(0)" class="xs-font-size d-flex align-items-center gray semibold"><span class="material-icons mr-2 gray">supervised_user_circle</span> {{$mover->count_follower}} {{@trans('movement.followers')}}</a>
                            </div>
                            @endforeach
                            {{ $movers->links() }}
                        </div>
                        @else
                        <div class="col-sm-12 col-lg-12 vertical-card-view d-flex flex-column mt-4" style="text-align: center;">  
                            {{ @trans('movement.no_mover_found') }}
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </section>
</main>
@endsection

@push('pageJs')
<script>
    $(document).ready(function() {
        $('ul.pagination').hide();
        $(function() {
            $('.infinite-scroll').jscroll({
                autoTrigger: true,
                loadingHtml: '<div class="loader" style="display:block"></div>',
                padding: 20,
                nextSelector: '.pagination li.active + li a',
                contentSelector: 'div.infinite-scroll-div',
                callback: function() {
                    $('ul.pagination').remove();
                }
            });
        });
    });
</script>
@endpush