@extends('layouts.vpm-mobile-app', ['active' => 'notifications', 'area' => 'user'])

@section('title', 'Notifications')

@section('content')
<div class="vpm-notifications-page">
    <div class="vpm-notifications-page__intro">
        <h2 class="vpm-notifications-page__title">Notifications</h2>
        <p class="vpm-notifications-page__desc">
            View and manage your notifications to stay informed of important updates.
        </p>
    </div>

    @if ($notifications->isEmpty())
        <p class="vpm-notifications-page__empty">You have no notifications yet.</p>
    @else
        <ul class="vpm-notifications-page__list">
            @foreach ($notifications as $notification)
                <li>
                    @if ($notification['url'])
                        <a href="{{ $notification['url'] }}" class="vpm-notifications-page__item">
                    @else
                        <button type="button" class="vpm-notifications-page__item">
                    @endif
                        <span class="vpm-notifications-page__icon" aria-hidden="true">
                            <span class="material-icons notranslate">{{ $notification['icon'] }}</span>
                        </span>
                        <span class="vpm-notifications-page__content">
                            <span class="vpm-notifications-page__item-title">{{ $notification['label'] }}</span>
                            <span class="vpm-notifications-page__item-body">{{ $notification['body'] }}</span>
                            <time datetime="{{ $notification['at']->toIso8601String() }}" class="vpm-notifications-page__item-time">
                                {{ $notification['at']->format('M j') }} at
                                <span class="vpm-notifications-page__item-time-ampm">{{ $notification['at']->format('g:i A') }}</span>
                            </time>
                        </span>
                        @if ($notification['unread'])
                            <span class="vpm-notifications-page__unread" aria-label="Unread"></span>
                        @endif
                    @if ($notification['url'])
                        </a>
                    @else
                        </button>
                    @endif
                </li>
            @endforeach
        </ul>
    @endif
</div>
@endsection