@extends('website.layout.main')

@section('content')
    <!--Page Header Start-->
    <x-website-page-header title="Our Projects" bgImage="assets/images/backgrounds/page-header-bg.png" homeLink="{{ url('/') }}" />
    <!--Page Header End-->

    <!--Projects Page Start -->
    <section class="events-page">
        <div class="container">
            <div class="row">
                @forelse($projects as $project)
                <!--Project One Single Start-->
                <div class="col-xl-4 col-lg-4 wow fadeInLeft" data-wow-delay="100ms">
                    <div class="event-one__single">
                        <div class="event-one__img-box">
                            <div class="event-one__img">
                                <img src="@if ($project->cover_photo ==null) {{ asset('assets/images/placeholder.webp')}} @else {{ Storage::url($project->cover_photo) }}@endif" alt="{{ $project->title }}">
                            </div>
                            @if($project->partner)
                            <div class="event-one__date">
                                <p><span class="icon-handshake"></span>{{ $project->partner }}</p>
                            </div>
                            @endif
                        </div>
                        <div class="event-one__content">
                            <h4 class="event-one__title"><a href="{{route('projects.details', $project->slug)}}">{{$project->title}}</a></h4>
                            @if($project->introduction)
                            <p class="event-one__text">{!! Str::limit($project->introduction, 150) !!}</p>
                            @endif
                            @if($project->phase)
                            <p class="event-one__location"><span class="icon-pin"></span>{{ $project->phase }}</p>
                            @endif
                            <div class="event-one__btn-box">
                                <a href="{{route('projects.details', $project->slug)}}" class="event-one__btn thm-btn">Learn more <span><i
                                            class="icon-arrow-right"></i></span></a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Project One Single End-->
                @empty
                <div class="col-12">
                    <p class="text-center">No projects available at the moment.</p>
                </div>
                @endforelse
               
            </div>
        </div>
    </section>
    <!--Projects Page End -->
@endsection