@extends('front.app')
@section('content')
    <section class="wrapper bg-light">
        <div class="container pt-10 pt-md-14">
            <div class="row">
                <div class="col-md-8 col-lg-7 col-xl-6 col-xxl-5">
                    <h1 class="display-1 mb-3">{{ trans('module.events_title') }}</h1>
                    <p class="lead fs-lg pe-lg-15 pe-xxl-12">{{ trans('module.events_text') }}</p>
                </div>
                <!-- /column -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>
    <section class="wrapper bg-light">
        <div class="container py-14 py-md-16">
            <div class="grid grid-view projects-masonry">
                <div class="isotope-filter filter mb-10">
                    <p>{{ trans('module.events_filter_text') }}</p>
                    <ul>
                        <li><a class="filter-item active" data-filter="*">{{ trans('module.events_filter_all') }}</a></li>
                        @foreach ($eventsCategories as $category)
                            <li><a class="filter-item" data-filter=".{{ $category->domain_name }}">{{ $category->name }}</a></li>
                        @endforeach
                    </ul>
                </div>
                <div class="row gx-md-8 gy-10 gy-md-13 isotope">
                    @foreach ($events as $event)
                        <div class="project item col-md-6 col-xl-3 {{ $event->category->domain_name }}">
                            <div class="project-details d-flex justify-content-center flex-column">
                                <div class="post-header" style="display: flex">
                                    @if ($event->link)
                                        <h2 class="post-title h3"><a class="link-dark"
                                                href="{{ $event->link }}">{{ $event->title }}</a></h2>
                                    @else
                                        <h2 class="post-title h3">{{ $event->title }}</h2>
                                    @endif

                                    @if ($event->featured)
                                        <i class="uil uil-star ml-2 mt-1"></i>
                                    @endif
                                </div>
                                <!-- /.post-header -->
                                <div class="post-content">
                                    @if (@$event->images[0])
                                        <figure class="card-img-top overlay overlay-1 hover-scale"><img
                                                class="img-fluid imgRatio" src="{{ @$event->images[0]->original }}" />
                                        </figure>
                                    @else
                                        <figure class="card-img-top overlay overlay-1 hover-scale"><img
                                                class="img-fluid imgRatio" src="{{ url('img/no_image.jpg') }}" />
                                        </figure>
                                    @endif
                                </div>
                            </div>
                            <div class="post-category text-line mb-3 text-purple">{{ $event->category->name }}</div>
                            <div class="post category">
                                <show-event :payload="{{ $event }}"></show-event>
                            </div>
                            <p>{{ \Illuminate\Support\Str::limit($event->description, 150, $end = '...') }}</p>
                            <ul class="post-meta d-flex mb-5">
                                <li class="post-date"><i
                                        class="uil uil-calendar-alt"></i><span>{{ explode(' ', $event->start_date)[0] }}</span>
                                </li>
                                <li class="post-date"><i
                                        class="uil uil-calendar-alt"></i><span>{{ explode(' ', $event->end_date)[0] }}</span>
                                </li>
                            </ul>
                            <!-- /.project-details -->
                        </div>
                    @endforeach
                </div>
                <!-- /.row -->
            </div>
            <!-- /.grid -->
        </div>
        <!-- /.container -->
    </section>
@endsection