@extends('layouts.term-volunteer-forms-layout')

@section('header')

    <div>
        <form action="{{ route('portal.account.logout') }}" method="post">
            @csrf
            <button type="submit" class="flex gap-4 leading-tight text-primary-600 font-bold hover:underline" href="#">
                <span class="whitespace-nowrap">Log out</span>
                @svg('img/icons/logout')
            </button>
        </form>
    </div>

@stop

@section('footer', true)

@section('header-logo')
    @if(auth()->user()->campGroupIsAmbiguous())
        {{asset('img/logos/titus-trust.svg')}}
    @else
        {{ auth()->user()->campGroups->first()->getLogo() }}
    @endif
@stop

@section('footer-logo')
    @if(auth()->user()->campGroupIsAmbiguous())
        {{asset('img/logos/titus-trust-footer.svg')}}
    @else
        {{ auth()->user()->campGroups->first()->getLogo(white: true) }}
    @endif
@stop
@section('before_content')
    <div class="additional-header flex justify-between p-4 sm:px-11 sticky top-0 transition-all"
         x-data="{
            border: false,
            showBorder() {
                this.border = this.$el.getBoundingClientRect().top == 0
                    && window.scrollY > 0
            }
         }"
         x-init="showBorder()"
         :class="{'bg-white border-b border-gray-200': border}"
         @scroll.window="showBorder()"
    >
        <div class="flex flex-wrap items-center gap-4 font-medium text-gray-600">
            <a class="flex flex-shrink-0 gap-3 items-center hover:underline" href="{{ route('portal.account') }}">
                @svg('img/icons/home')
                Home
            </a>
            @svg('img/icons/breadcrumb-delimiter')

            <a class="flex flex-shrink-0 gap-3 items-center hover:underline" href="{{ route('portal.account.term-volunteer-application.show', ['term_volunteer_application' => $term_volunteer_application->id]) }}">
                {{  $term_volunteer_application->term->full_name }}
            </a>
        </div>

        @if(!$term_volunteer_application->isSubmitted())
            <div>
                <button form="term_volunteer_application_form" type="submit" name="save-draft-submit" class="flex gap-2 items-center whitespace-nowrap text-primary-600 hover:text-white hover:bg-primary-600 border border-primary-600 font-medium rounded-lg text-sm px-5 py-3">
                    <span>Save and leave</span>
                </button>
            </div>
        @endif
    </div>

@endsection
@section('content')
    <div class="px-4 p-8 sm:p-20">
        <div class="m-auto max-w-[524px]">
            @if($__env->hasSection('back-button-url'))
                <a class="flex w-max mt-8 font-medium gap-4 items-center text-lg text-primary-600" href="{{ $__env->yieldContent('back-button-url') }}">
                    <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>Back</span>
                </a>

            @endif

            @if($__env->hasSection('step'))
                <h3 class="mt-8 text-blue-900 text-2xl">Application form for {{ $term_volunteer_application->term->full_name }}</h3>
                <x-forms.form-progress.progress steps="9" :active-step="$__env->yieldContent('step')"/>
            @endif

            @yield('pages-content')
        </div>
    </div>

    {{--    <x-useful-section :questions="[--}}
    {{--        [--}}
    {{--            'Question about payments?' => 'We value the security of your information and will store it safely. Your data will be used to ensure our holidays run smoothly a',--}}

    {{--            'When do I pay for a booking?' => 'Due to demand for space, we will need to get back to you to confirm whether or not your application has been successful and to arrange payment.',--}}
    {{--        ],--}}
    {{--        [--}}
    {{--            'Question about return forms?' => 'We work in partnership with teachers from schools and because of limited space priority will be given to',--}}

    {{--            'Can I book for only part of the event?' => new \Illuminate\Support\HtmlString('Bookings are usually only accepted for the whole of a holiday/event. If otherwise, please <a href=\'#\' class=\'text-base font-bold text-primary-600 hover:underline\'>contact the office</a> to discuss your application before proceeding.'),--}}
    {{--        ]--}}
    {{--    ]" />--}}
@endsection