@extends('layouts.main-layout')
@section('header', true)
@section('footer', true)
@section('title')
    {{ config('app.name') }} - @yield('reference-title')
@endsection

@section('header-logo')
    {{asset('img/logos/titus-trust.svg')}}
@stop
@section('footer-logo')
    {{asset('img/logos/titus-trust-footer.svg')}}
@stop

@section('content')
    @yield('before_content')
    <div class="container mx-auto px-4 p-8 sm:p-20">
        <div class="container max-w-[524px] mx-auto">
            @if($__env->hasSection('back-button-form-url'))
                <form action="{{$__env->yieldContent('back-button-form-url')}}" method="post" class="mb-12">
                    @csrf

                    <button type="submit" class="inline-flex gap-4 items-center font-medium text-lg text-primary-600 hover:underline">
                        <svg class="w-4" fill="none" stroke="currentColor" stroke-width="4" viewBox="0 0 24 24"
                            xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"></path>
                        </svg>
                        <span>Back</span>
                    </button>
                </form>
            @endif
            @yield('back-button-form')

            @if($__env->hasSection('step'))
                <h3 class="text-blue-900 text-2xl">@yield('reference-header')</h3>
                <x-forms.form-progress.progress :steps="$__env->yieldContent('max-steps')" :active-step="$__env->yieldContent('step')"/>
            @endif
            @yield('reference-form-content')
            
        </div>
    </div>
    @yield('after_content')
@endsection