@extends('layouts.applicant')

@section('nav-links')
    @include('imports.p-nav-links',['navItem'=> 'x'])
@endsection

@section('contents')
<section class="bg-white w-7/12 mx-auto rounded-lg mt-5 dark:bg-gray-900">
    <div id="alert-admin-apperror" class="p-4 mb-4 text-red-800 border border-red-300 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800" role="alert">
        <div class="flex items-center">
            <svg class="shrink-0 w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
            </svg>
            <span class="sr-only">Info</span>
            <h3 class="text-lg font-medium">Technical error occured!</h3>
        </div>
        <div class="mt-2 mb-4 text-sm text-justify">
            There is a technical problem occurred when during the application processing - <span class="font-semibold underline">{{$error}}</span> [Context: {{$errorInfo}}]. Please contact with ICT Cell team with screenshot.
        </div>
        <div class="flex">
            <a href="{{route('contacts')}}" target="_blank" class="text-white bg-red-800 hover:bg-red-900 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-xs px-3 py-1.5 me-2 text-center inline-flex items-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800">
                <i class="fa-solid fa-headset me-2"></i>
                Contact Here!
            </a>
        </div>
    </div>
</section>
@endsection

@section('scripts')
<script>
</script>
@endsection