@extends('layouts.front')

@section('content')

	<div id="page" data-barba="container">

        <!-- Page Content -->
        <div id="content" class="page-content">

            <!--Section-->
            <div class="section fullscreen">

                <!--Wrapper-->
                <div class="wrapper-full no-gap no-margin">

                    <!--Column-->
                    <div class="c-col-12 no-gap no-margin">

                        <!--Showcase Fullscreen Slider-->
                        <div class="portfolio-showcase showcase-slideshow" data-barba-namespace="fs-slideshow">

                            <!--Slider Elements (Don't Touch)-->
                            <div class="ss1-nav">
                                <div class="ss1-prev"><i class="icofont-thin-up"></i></div>
                                <div class="ss1-next"><i class="icofont-thin-down"></i></div>
                            </div>
                            <div class="ss1-dots"></div>
                            <div class="ss1-fraction">
                                <div class="ss1-curr">01</div>
                                <div class="ss1-tot">0{{$service->projects->count()}}</div>
                            </div>
                            <!--/Slider Elements (Don't Touch)-->

                            <!--Slider Wrapper-->
                            <div class="showcase-slideshow-wrapper">

                                @forelse($service->projects as $project)
                                <div class="ss-project">

                                    <!--Project Image-->
                                    <div class="ss1-image">

                                        <img alt="{{$project->title}}" src="{{ asset('storage/'. $project->cover_image) }}">

                                    </div>
                                    <!--/Project Image-->

                                    <!--Project Details-->
                                    <div class="ss1-details">

                                        <!--Project Category-->
                                        <div class="ss1-cat">{{ $service->name }}</div>
                                        <!--/Project Category-->

                                        <!--Project Title-->
                                        <div class="ss1-title">{{ $project->title }}</div>
                                        <!--/Project Title-->

                                        <!--Project Meta-->
                                        <div class="ss1-met-wrap">

                                            <!--Project Summary-->
                                            <div class="ss1-summary">{{ $project->top_text }}</div>
                                            <!--/Project Summary-->

                                            <!--Project URL-->
                                            <a class="ss1-url" href="{{ route('front.project', $project) }}"></a>
                                            <!--/Project URL-->

                                        </div>
                                        <!--/Project Meta-->

                                    </div>
                                    <!--/Project Details-->

                                </div>
                                @empty
                                @endforelse

                            </div>
                            <!--/Slider Wrapper-->

                            <!--Slider Images (Don't touch)-->
                            <div class="ss1-images"></div>
                            <!--Slider Images (Don't touch)-->

                            <!--Projects Button-->
                            <div class="ss1-button"><a href="">Case Study</a></div>
                            <!--/Projects Button-->

                        </div>
                        <!--/Showcase Fullscreen Slider-->

                    </div>
                    <!--/Column-->

                </div>
                <!--/Wrapper-->

            </div>
            <!--/Section -->

        </div>
        <!-- /Page Content -->

    </div>

@endsection