@extends('layout.app')
@push('css')
@endpush

@section('content')
    <section class="section-wrapper section-padding-top">
        <div class="content-wrapper narrow-content-wrapper">
            <div class="w-dyn-list">
                <div role="list" class="whats-on-list-grid w-dyn-items">
                    @foreach ($events as $event)
                        <div role="listitem" class="w-dyn-item">
                            <div class="whats-on-list-item-inner">
                                <a
                                    href="{{ route('whats-on-details',[$event->id]) }}"
                                    class="whats-on-item-image-link w-inline-block"
                                ><img
                                        alt=""
                                        loading="lazy"
                                        src="{{ Storage::url($event->logo) }}"
                                        class="whats-on-item-image"
                                    /></a>
                                <div class="whats-on-item-content-wrapper">
                                    <a
                                        href="{{ route('whats-on-details',[$event->id]) }}"
                                        class="whats-on-item-title-link w-inline-block"
                                    ><h3 class="heading-style-h5">
                                            {{ app()->getLocale() == 'ar' ? $event->title_ar : $event->title_en }}
                                        </h3></a
                                    >
                                    @if ($event->start_date || $event->end_date)
                                    <div class="event-dates-wrapper">
                                        <div class="event-dates-outer">
                                            <img
                                                src="https://cdn.prod.website-files.com/6572df803243003bb3638e4e/6572df803243003bb36390eb_event-list-calender-icon.png"
                                                loading="lazy"
                                                alt=""
                                            />
                                            <div class="event-dates-text-wrapper">
                                                @if ($event->start_date)
                                                    <div
                                                        class="event-dates-text">{{ Carbon\Carbon::parse($event->start_date)->format('m/d/Y')}}</div>
                                                    <div class="event-dates-text date-separator">-</div>
                                                @endif
                                                @if($event->end_date)
                                                    <div
                                                        class="event-dates-text">{{ Carbon\Carbon::parse($event->end_date)->format('m/d/Y')}}</div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                    <div class="event-dates-wrapper w-condition-invisible">
                                        <div class="event-dates-outer">
                                            <img
                                                src="https://cdn.prod.website-files.com/6572df803243003bb3638e4e/6582719688c080e6f48063d3_download.png"
                                                loading="lazy"
                                                alt=""
                                            />
                                            <div class="event-dates-text-wrapper">
                                                <div class="event-dates-text w-dyn-bind-empty"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <a
                                        href="{{ route('whats-on-details',[$event->id]) }}"
                                        class="button w-inline-block"
                                    >
                                        <div>{{ __('messages.know_more') }}</div>
                                    </a
                                    >
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
@endsection

@push('js')
@endpush