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

@section('content')
    <header class="inner-page-wrapper">
        <div class="page-header-v2">
            <div class="page-hero">
                <img
                    loading="lazy"
                    src="{{ Storage::url($event->banner) }}"
                    alt=""
                    class="page-hero-image"
                /><img
                    loading="eager"
                    src="{{ Storage::url($event->banner) }}"
                    alt=""
                    class="page-hero-image-mobile"
                />
            </div>
            <div class="whatson-page-header-text-wrapper">
                <div>
                    <div class="text-align-center">
                        @if ($event->start_date || $event->end_date)
                            <div class="page_1_portfolio-item-header_tag-list">
                                @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>
                        @endif
                        <div class="margin-bottom margin-small">
                            <h1 class="medium-heading">
                                {{ app()->getLocale() == 'ar' ? $event->title_ar : $event->title_en }}
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <section class="section-wrapper">
        <div class="content-wrapper narrow-content-wrapper">
            <div class="whatson-content">
                <div class="whatson-rich-text w-richtext">
                    {!! app()->getLocale() == 'ar' ? $event->description_ar : $event->description_en !!}
                </div>
            </div>
        </div>
    </section>
@endsection

@push('js')
@endpush