@extends('layouts.master')

@section('title', "À propos du " . $project->first()['category'] . " - " . $project->first()['title'] . " à " . $project->first()['localisation'] . " de s\'Architecturer")

@section('meta_description', "Découvrez le projet de " . $project->first()['title'] . " dans le cadre du " . $project->first()['category'] . " à " . $project->first()['localisation']);

@section('content')

<!-- section start -->
<section class="masthead -type-work-1 sm:text-center js-masthead-type-work-1 js-shapes">

    <!-- masthead__content start -->
    <div class="masthead__content">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-xl-9 col-sm-10 z-3">
                    <div data-split="lines">
                        <p class="masthead__subtitle text-lg sm:text-base mb-32 sm:mb-24 js-subtitle">
                            Projet
                        </p>
                    </div>

                    <div data-split="lines">
                        <h1 class="masthead__title fw-700 js-title">
                            {{ $project->first()['title'] }}
                        </h1>
                    </div>

                    <div class="masthead__info__wrap">
                        <div class="row y-gap-32">

                            <div class="col-lg-auto  col-sm-6">
                                <div class="masthead__info">
                                    <div data-split="lines" class="masthead__item js-info-item">
                                        <h5 class="text-lg leading-sm fw-600">Catégorie</h5>
                                        <p class="text-lg leading-sm mt-12 sm:mt-8">{{ $project->first()['category'] }}</p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-auto offset-lg-1 col-sm-6">
                                <div class="masthead__info">
                                    <div data-split="lines" class="masthead__item js-info-item">
                                        <h5 class="text-lg leading-sm fw-600">Date</h5>
                                        <p class="text-lg leading-sm mt-12 sm:mt-8">{{ $project->first()['date'] }}</p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-auto offset-lg-1 col-sm-6">
                                <div class="masthead__info">
                                    <div data-split="lines" class="masthead__item js-info-item">
                                        <h5 class="text-lg leading-sm fw-600">Lieu</h5>
                                        <p class="text-lg leading-sm mt-12 sm:mt-8">{{ $project->first()['localisation'] }}</p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-auto offset-lg-1 col-sm-6">
                                <div class="masthead__info">
                                    <div data-split="lines" class="masthead__item js-info-item">
                                        <h5 class="text-lg leading-sm fw-600">Type</h5>
                                        <p class="text-lg leading-sm mt-12 sm:mt-8">{{ $project->first()['type'] }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- masthead__content end -->

    <!-- container start -->
    <div class="container-wide z-5 relative">
        <div data-parallax="0.9" class="h-lg z-5 js-image">
            <div data-parallax-target class="bg-image js-lazy" data-bg="{{ asset('img/projects/' . $imageContext['link']) }}"></div>
        </div>
    </div>
    <!-- container end -->
</section>
<!-- section end -->


<!-- section start -->
<section class="layout-pt-lg layout-pb-lg">
    <!-- container start -->
    <div class="container">
        <!-- row start -->
        <div class="row justify-content-between">

            <div class="col-auto">
                <div class="d-flex text-xs tracking-md pt-4">
                    <p class="uppercase fw-500">Raconter</p>
                </div>
            </div>


            <div class="col-xl-7 col-lg-8">
                <div class="md:mt-20">
                    {!! $project->first()['context'] !!}
                </div>
            </div>

        </div>
        <!-- row end -->
    </div>
    <!-- container end -->
</section>
<!-- section end -->


<!-- section start -->
<section class="layout-pt-lg layout-pb-lg">
    <div class="js-section-slider" data-slider-col="base-2 lg-2 md-1 sm-1" data-gap="40" data-loop data-center data-pagination>
        <div class="swiper-wrapper">
            @foreach ($project as $projectProcessing)
            @if ($projectProcessing['position'] === 'slider')
            <div class="swiper-slide slider-slide">
                <a data-gallery="gallery1" class="glightbox" href="{{ asset('img/projects/' . $projectProcessing['link']) }}">
                    <div class="ratio ratio-3:2 bg-image swiper-lazy" data-background="{{ asset('img/projects/' . $projectProcessing['link']) }}"></div>
                </a>
            </div>
            @endif
            @endforeach
        </div>

        <div class="pagination -dark pb-4 mt-48 js-pagination"></div>
    </div>
</section>
<!-- section end -->

@endsection