@extends('layouts.account')

@section('title', __('Viewings'))
@section('heading', __('Viewings'))
@section('subheading', __('Appointments you have asked for, and ones asked of you.'))

@section('account')
    @if (session('error'))
        <x-alert type="error" class="mb-6">{{ session('error') }}</x-alert>
    @endif

    @if ($upcoming->isEmpty() && $past->isEmpty())
        <x-empty-state icon="calendar"
                       :title="__('Nothing in the diary')"
                       :message="__('Ask to view a property and it will appear here, along with anything asked of you.')">
            <x-button :href="route('properties.index')" class="mt-5" arrow>{{ __('Browse properties') }}</x-button>
        </x-empty-state>
    @else
        @if ($upcoming->isNotEmpty())
            <section aria-labelledby="upcoming">
                <h2 id="upcoming" class="mb-4 font-display text-title font-bold text-text">{{ __('Coming up') }}</h2>

                <div class="space-y-4">
                    @foreach ($upcoming as $appointment)
                        @include('account.partials.appointment', ['appointment' => $appointment, 'user' => $user])
                    @endforeach
                </div>
            </section>
        @endif

        @if ($past->isNotEmpty())
            {{-- Kept visible: "did they turn up" is a question people ask
                 afterwards, and a diary that forgets is not a record. --}}
            <section class="mt-10" aria-labelledby="past">
                <h2 id="past" class="mb-4 font-display text-title font-bold text-text">{{ __('Past') }}</h2>

                <div class="space-y-4 opacity-80">
                    @foreach ($past as $appointment)
                        @include('account.partials.appointment', ['appointment' => $appointment, 'user' => $user])
                    @endforeach
                </div>
            </section>
        @endif
    @endif
@endsection