@extends('portal.portal-layout')

@section('pages-content')

    <div class="max-w-[654px]">

        <a class="flex w-max font-medium gap-4 items-center text-lg text-primary-600" href="{{ route('portal.account.invite') }}">
            <svg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7.38802 12.7714L1.55469 6.93807L7.38802 1.10474" stroke="#0284C7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span>Home</span>
        </a>

        <h1 class="text-5xl mt-8 text-titus-primary">Volunteer applications</h1>
        <h3 class="mt-8 leading-tight text-2xl font-bold">{{ $term_volunteer_application->term->full_name }}</h3>

        <div class="flex flex-col gap-2 mt-4">
            @foreach($term_volunteer_application->term->eventOptions as $event_option)
                <div class="flex flex-col">
                    <span class="text-gray-700 leading-tight text-sm font-semibold">{{ $event_option->full_name }} {{ $event_option->start->year }}</span>
                    <span class="text-gray-500 leading-tight text-xs font-normal">{{ $event_option->getStartEndLabel() }}</span>
                </div>
            @endforeach
        </div>

        <article class="flex-1 h-max mt-16 px-3 py-4 sm:p-6 border border-gray-200">
            <header>
                <div class="flex items-center gap-4 text-blue-900">
                    @svg('img/icons/document')
                    <span class="text-2xl font-bold">Volunteer applications forms</span>
                </div>
            </header>

            <x-term-volunteer-application-form-topics :application="$term_volunteer_application" show-complete-value="true" />

            <div class="mt-6">
                @include('term-volunteer-application-forms.partials.due-forms-date-message', ['application' => $term_volunteer_application])
            </div>

            @if(!$term_volunteer_application->isCompleted())
                <div class="mt-6">
                    <a href="{{ route('portal.account.term-volunteer-application.personal-and-contact-details', compact('term_volunteer_application')) }}"
                       class="flex gap-2 items-center text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-3 w-fit">
                        <span>Check and submit</span>
                    </a>
                </div>
            @endif
        </article>
    </div>

@endsection