@extends('website.layouts.master')

@section('title')
    {{__('website-trans.Projects')}}
@endsection

@section('content')
    <div style="height: 120px;"></div>

    <!-- ============================================================== -->
    <!-- Services Page -->
    <!-- ============================================================== -->
    <div class="container services-page">
        <div class="text-center my-5">
            <div class="site-header">
                <h2 class="site-blue-text">{{__('website-trans.Projects')}}</h2>
                <div class="her-line"></div>
                <div class="ver-line"></div>
            </div>
        </div>
        @foreach($projects as $index=>$project)
            <div class="blog-card {{$index % 2 == 0 ? 'alt' : null}}">
                <div class="meta">
                    <div class="photo"
                         style="background-image: url('{{asset('dashboard/assets/img/uploads/projects/'.$project->image)}}')">
                    </div>
                </div>
                <div class="description">
                    <h1>{{App::getLocale() == 'ar'? $project->name_ar : $project->name_en}}</h1>
                    <h2>{{$project->created_at->format('d/m/Y')}}</h2>
                    <p>{!!Str::limit(App::getLocale() == 'ar'? $project->description_ar : $project->description_en, 300)!!}</p>
                    <p class="read-more">
                        <a href="{{route('projectDetails', $project->id)}}">{{__('website-trans.more')}}</a>
                    </p>
                </div>
            </div>
        @endforeach

        {{--        <div class="blog-card alt">--}}
        {{--            <div class="meta">--}}
        {{--                <div class="photo"--}}
        {{--                     style="background-image: url(https://storage.googleapis.com/chydlx/codepen/blog-cards/image-2.jpg)">--}}
        {{--                </div>--}}
        {{--            </div>--}}
        {{--            <div class="description">--}}
        {{--                <h1>Mastering the Language</h1>--}}
        {{--                <h2>Java is not the same as JavaScript</h2>--}}
        {{--                <p>Phasellus faucibus facilisis sapien, sed interdum sapien placerat in. Aenean magna sapien,--}}
        {{--                    condimentum ut--}}
        {{--                    mattis ac, congue tempor eros. Integer vel sem a diam pretium pulvinar. Quisque diam erat, consequat--}}
        {{--                    at nunc--}}
        {{--                    nec, luctus hendrerit ex. Maecenas egestas libero felis, ac interdum ante gravida vitae. Donec--}}
        {{--                    efficitur--}}
        {{--                    lacus placerat, porttitor enim eu, mattis turpis. Etiam sed mollis nunc.</p>--}}
        {{--                <p class="read-more">--}}
        {{--                    <a href="#">Read More</a>--}}
        {{--                </p>--}}
        {{--            </div>--}}
        {{--        </div>--}}
        {{--        <div class="blog-card">--}}
        {{--            <div class="meta">--}}
        {{--                <div class="photo"--}}
        {{--                     style="background-image: url(https://storage.googleapis.com/chydlx/codepen/blog-cards/image-1.jpg)">--}}
        {{--                </div>--}}
        {{--            </div>--}}
        {{--            <div class="description">--}}
        {{--                <h1>Learning to Code</h1>--}}
        {{--                <h2>Opening a door to the future</h2>--}}
        {{--                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac mattis mi. Lorem ipsum dolor sit--}}
        {{--                    amet,--}}
        {{--                    consectetur adipiscing elit. Maecenas sollicitudin semper nisi, vestibulum egestas mauris malesuada--}}
        {{--                    ac.--}}
        {{--                    Quisque ac aliquam mauris, at porttitor neque. Sed sit amet laoreet mauris. Aliquam laoreet interdum--}}
        {{--                    ante--}}
        {{--                    vitae rutrum. </p>--}}
        {{--                <p class="read-more">--}}
        {{--                    <a href="#">Read More</a>--}}
        {{--                </p>--}}
        {{--            </div>--}}
        {{--        </div>--}}
        {{--        <div class="blog-card alt">--}}
        {{--            <div class="meta">--}}
        {{--                <div class="photo"--}}
        {{--                     style="background-image: url(https://storage.googleapis.com/chydlx/codepen/blog-cards/image-2.jpg)">--}}
        {{--                </div>--}}
        {{--            </div>--}}
        {{--            <div class="description">--}}
        {{--                <h1>Mastering the Language</h1>--}}
        {{--                <h2>Java is not the same as JavaScript</h2>--}}
        {{--                <p>Phasellus faucibus facilisis sapien, sed interdum sapien placerat in. Aenean magna sapien,--}}
        {{--                    condimentum ut--}}
        {{--                    mattis ac, congue tempor eros. Integer vel sem a diam pretium pulvinar. Quisque diam erat, consequat--}}
        {{--                    at nunc--}}
        {{--                    nec, luctus hendrerit ex. Maecenas egestas libero felis, ac interdum ante gravida vitae. Donec--}}
        {{--                    efficitur--}}
        {{--                    lacus placerat, porttitor enim eu, mattis turpis. Etiam sed mollis nunc.</p>--}}
        {{--                <p class="read-more">--}}
        {{--                    <a href="#">Read More</a>--}}
        {{--                </p>--}}
        {{--            </div>--}}
        {{--        </div>--}}
    </div>
    <!-- ============================================================== -->
    <!-- Services Page End -->
    <!-- ============================================================== -->

    <div style="height: 120px;"></div>
@endsection

@section('js')
@endsection