@extends('web.layouts.layout')

@section('content')

    <main>
        <!-- Start section -->
        <section class="profile_pg section">
            <div class="container">
                <div class="tab_wrapper noti_tab col-lg-10 mx-auto">
                    <h2 class="title_w_shape w-fit mx-auto mb-5"><span> {{ $title }} </span></h2>
                    <div class="">
                        @if($notifications?->count())
                            @foreach($notifications as $notification)
                                <div
                                    class="noti_card d-flex align-items-center {{ !$notification->was_seen ? 'unread' : '' }}">
                                    <p class="date mb-0">
                                        <i class="fal fa-calendar-alt color-primary me-2"></i>
                                        {{ $notification->translated_date_format }}
                                        {{-- $notification->created_time_formatted --}}
                                    </p>
                                    <div class="icon_box">
                                        <i class="fa-solid fa-bell"></i>
                                    </div>
                                    <div class="content">
                                        <h5 class="title color-dark mb-0">
                                            {{ $notification->descriptions[0]->title ?? $notification->title ?? null }}
                                        </h5>
                                        <p class="p mb-0">
                                            {{ $notification->descriptions[0]->message ?? $notification->message ?? null }}
                                        </p>
                                    </div>
                                </div>
                            @endforeach
                        @else
                            <div class="col-lg-12">
                                <div class="alert alert-info text-center">{{ __('general.no_results') }}</div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </section>
    </main>

@endsection

@push('stack_scripts')

@endpush