<div>
    <form wire:submit="save">
        <x-card>
            <h2 class="text-base font-semibold text-slate-900">Declaration</h2>

            <div class="mt-5 rounded-lg border border-slate-200 bg-slate-50 p-5 text-sm leading-relaxed text-slate-700">
                <p class="font-medium text-slate-900">{{ $declaration }}</p>

                <p class="mt-4">By accepting this declaration I confirm that:</p>

                <ul class="mt-2 list-disc space-y-1.5 pl-5">
                    <li>All information and documents I have provided are genuine, accurate and complete.</li>
                    <li>I understand that giving false information may lead to my application being rejected, or my admission being withdrawn at any stage.</li>
                    <li>I authorise {{ setting('university_name') }} to verify my qualifications with the awarding institutions and with UNEB.</li>
                    <li>I have read and accept the University's admissions policies and the terms governing the processing of my personal data.</li>
                </ul>

                <p class="mt-4 text-xs text-slate-500">Declaration version {{ $version }}</p>
            </div>

            <label class="mt-6 flex items-start gap-3 rounded-lg border border-slate-200 p-4 transition hover:bg-slate-50">
                <input type="checkbox" wire:model.live="accepted"
                       class="mt-0.5 h-5 w-5 shrink-0 rounded border-slate-300 text-brand-700 focus:ring-brand-700">
                <span class="text-sm text-slate-800">
                    I declare that the information provided is true and complete.
                </span>
            </label>

            @error('accepted')
                <p class="mt-2 text-xs text-red-600">{{ $message }}</p>
            @enderror

            @if ($application->declaration_accepted_at)
                <p class="mt-4 text-xs text-slate-500">
                    Previously accepted on
                    {{ $application->declaration_accepted_at->format('j F Y \a\t g:i A') }}.
                </p>
            @endif
        </x-card>

        <div class="mt-6 flex flex-wrap items-center justify-between gap-3">
            <x-button type="button" wire:click="previousStep" variant="outline">Back</x-button>
            <x-button type="submit" size="lg" wire:loading.attr="disabled">Accept &amp; Continue</x-button>
        </div>
    </form>
</div>
