@extends('index')

@section('content')

    <div class="main-home">
        <div class="menu-left">
            <ul>
                @foreach($categories as $cate)
                    <li>
                        <a href="{{ route('sexPage',[ 'sex' =>request()->route('sex'),'cate' => $cate->name,]) }}">{{ $cate->display_name }}</a>
                    </li>
                @endforeach
            </ul>
        </div>
        <div class="main-content">
            <div class="al-txt">In the meantime here are some models online waiting for you...</div>
            <div class="grid">
                @foreach($data as $key => $model)
                    @include('components.view-model')
{{--                        <div class="grid-item">--}}
{{--                            <a href="{{  route('detailPage',['id' => $model->id ] ) }}" class="item-model">--}}
{{--                                <div class="img-cover" style="background-image:url('{{ $model["image"] }}')">--}}
{{--                                    <img src='{{ $model['image'] }}'>--}}
{{--                                </div>--}}
{{--                                <div class="txt-model favourite" data-url="{{ route('attachFavourite',$model['id']) }}" data-model-id="{{ $model['id'] }}">--}}
{{--                                    <h3 class="status  {{ ($model['is_online']) ? 'online' : 'offline' }}">{{ $model['display_name'] }}</h3>--}}
{{--                                    <div class="fav-model  {{ ($model['favourite'] ? 'active' : '') }}">--}}
{{--                                        <span>90%</span>--}}
{{--                                        <i class="fas fa-heart"></i>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </a>--}}
{{--                        </div>--}}
                @endforeach
            </div>

            <nav aria-label="Page navigation example" class="sub-page">
                {{ $data->appends(request()->query())->links() }}
                {{--<ul class="pagination justify-content-center">--}}
                    {{--<li class="page-item disabled">--}}
                        {{--<a class="page-link" href="#" tabindex="-1">Previous</a>--}}
                    {{--</li>--}}
                    {{--<li class="page-item"><a class="page-link" href="#">1</a></li>--}}
                    {{--<li class="page-item"><a class="page-link" href="#">2</a></li>--}}
                    {{--<li class="page-item"><a class="page-link" href="#">3</a></li>--}}
                    {{--<li class="page-item">--}}
                        {{--<a class="page-link" href="#">Next</a>--}}
                    {{--</li>--}}
                {{--</ul>--}}
            </nav>

        </div>
    </div>

@endsection