@extends('layouts.front')

@section('content')

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

        <!-- Page Header -->
        <div data-anim="true" class="page-header">

            <div class="page-header-wrap wrapper-small">

                <!-- Page Title -->
                <div class="page-title">
                    <h1 class="big-title">Projects</h1>
                </div>
                <!-- /Page Title -->

            </div>

        </div>
        <!-- /Page Header -->

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

            <!--Section-->
            <div class="section no-margin">

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

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

                        <!--Alioth Works-->
                        <div class="alioth-works masonry column_2 portfolio-showcase" data-animate="true">

                            <!--Work Categories-->
                            <div class="aw-categories">

                                <ul class="aw-cats">

                                    <!--Work Category-->
                                    <li data-cat="all">All</li>
                                    <!--/Work Category-->

                                    @foreach($services as $service)
                                    	<li data-cat="{{ $service->slug }}">{{ $service->name }}</li>
                                    @endforeach

                                </ul>

                            </div>
                            <!--/Work Categories-->

                            <!--Works Wrapper-->
                            <div class="aw-works-wrapper">

                                <!--Works Wrapper Pres (Don't Touch)-->
                                <div class="aw-works-sizer"></div>
                                <div class="aw-works-gutter"></div>
                                <div class="aw-works-stamp"></div>
                                <!--/Works Wrapper Pres (Don't Touch)-->

                                @foreach($projects as $project)
                                <!--Single Project-->
                                <div class="aw-project @forelse($project->services as $project_service) {{ 'cat_'.$project_service->slug }} @empty @endforelse">

                                    <a href="{{ route('front.project', $project->slug) }}">

                                        <!--Project Image-->
                                        <div class="aw-project-image">
                                            <img alt="{{ $project->title }} Image" src="{{ asset('storage/'. $project->cover_image ) }}">
                                        </div>
                                        <!--/Project Image-->

                                        <!--Project Metas-->
                                        <div class="aw-project-meta">

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

                                            <!--Project Category-->
                                            <div class="aw-project-cat">
                                            	{{ $project->year }}
                                            </div>
                                            <!--/Project Category-->

                                        </div>
                                        <!--/Project Metas-->

                                    </a>

                                </div>
                                <!--/Single Project-->
                                @endforeach

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

                        </div>
                        <!--/Alioth Works-->

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

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

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

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

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

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

                        <!-- Page Nav -->
                        <div class="alioth-page-nav" style="background-color: #f1f1f1">

                            <!--Page URL-->
                            <a href="{{ route('front.about') }}">

                                <!-- Page Title -->
                                <div class="page-title">@lang('About Us')</div>
                                <!-- /Page Title -->

                                <!-- Page Sub-Title -->
                                <div class="page-sub-title">Something more about the agency.</div>
                                <!-- /Page Sub-Title -->

                            </a>

                        </div>
                        <!-- /Page Nav -->


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

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

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

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

    </div>

@endsection