@extends('website.layouts.default')
@section('content')

<main class="bg-gray-100 flex items-center justify-center min-h-fit">
    <div class="w-full max-w-fit p-4">
        <div class="bg-white shadow-md rounded-lg py-6">
            <div class="px-8">
                @if (session('status') == 'verification-link-sent')
                <div
                    class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative text-center mb-4">
                    A new email verification link has been emailed to you!
                </div>
                @endif
                <div class="text-center mb-6">
                    <h3 class="text-2xl font-semibold">Verify e-mail address</h3>
                    <p class="text-gray-600">You must verify your email address to access this page.</p>
                </div>
                <form method="POST" action="{{ route('verification.send') }}" class="text-center"
                    onsubmit="showLoader()">
                    @csrf
                    <button type="submit"
                        class="bg-blue-500 text-white font-semibold py-2 px-4 rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                        Resend verification email
                    </button>
                    <div id="loader" class="loader hidden mt-4"></div>
                </form>
            </div>
            <p class="mt-4 text-center text-sm text-gray-600">
                Issues with the verification process or entered the wrong email?
                <br>Please sign up with <a href="{{route('register')}}"
                    class="text-blue-500 hover:underline">another</a> email address.
            </p>
        </div>
    </div>
</main>
<style>
    .loader,
    .loader:before,
    .loader:after {
        border-radius: 50%;
    }
    .loader {
        color: #3490dc;
        font-size: 11px;
        text-indent: -9999em;
        margin: 55px auto;
        position: relative;
        width: 10em;
        height: 10em;
        box-shadow: inset 0 0 0 1em;
        transform: translateZ(0);
    }
    .loader:before,
    .loader:after {
        position: absolute;
        content: '';
    }
    .loader:before {
        width: 5.2em;
        height: 10.2em;
        background: #f3f3f3;
        border-radius: 10.2em 0 0 10.2em;
        top: -0.1em;
        left: -0.1em;
        transform-origin: 5.1em 5.1em;
        animation: load2 2s infinite ease 1.5s;
    }
    .loader:after {
        width: 5.2em;
        height: 10.2em;
        background: #f3f3f3;
        border-radius: 0 10.2em 10.2em 0;
        top: -0.1em;
        left: 5.1em;
        transform-origin: 0.1em 5.1em;
        animation: load2 2s infinite ease;
    }
    @keyframes load2 {
        0%, 100% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(180deg);
        }
    }
</style>
<script defer>
    function showLoader() {
        document.getElementById('loader').classList.remove('hidden');
    }
</script>
@endsection