@extends('layouts.auth')

@section('title')
    Email  Verification
@endsection

@section('content')

<div class="my-auto" style="margin-top: 100px !important;">

    <div>
        <div class="mx-auto mt-5 mb-3 text-center rounded-full">
        <a href="{{ url('/') }}"><img src="{{ asset('images/logo-dark.png') }}" style="height: 40px;" alt="" class="mx-auto mb-6"></a>
        </div>
    </div>

    <div class="text-center">
        <h5 class="text-lg font-bold text-gray-600 dark:text-gray-100 montserrat">Verify Your <span class="text-orange-500">Email Address</span></h5>
    </div>

    <!-- card body -->
    <div class="p-6 text-center text-gray-600 border-b border-gray-200 dark:text-gray-100">
            
    @if (session()->has('message'))
    <div class="relative px-4 py-3 m-4 text-green-700 bg-green-100 border border-green-400 rounded alert alert-success" role="alert">
        <span class="block sm:inline"><small>{{ session()->get('message') }}</small></span>
    </div>
    @endif
        <!-- content goes here -->
        {{ __('Well done 👏, now the next step is to verify your email address.') }}<br>
        {{ __('Do check your mailbox as a verification link has been sent to you.') }}<br><br>
        {{ __('If you did not see the mail in your mailbox, please check 
            your spam or junk folder.') }}<br></br>

        <b class="my-3 text-red-600">Note: After clicking on the link in your email, you'd first have to login on the same device you clicked the link before you're fully authenticated!</b>
        
        <form align="center" class="d-inline" method="POST" action="{{ route('verification.resend') }}">
            @csrf
            Didn't receive an email? <button type="submit" class="mt-12 text-orange-500">{{ __('Resend') }}</button>
        </form>
    </div>

    <!-- card footer -->
    <div class="p-6 text-center border-gray-200">
        <!-- button link -->
        <a class="w-full px-3 py-3 mt-4 mb-2 font-semibold text-white bg-orange-500 rounded-md" 
        href="{{ route('home') }}">I've verified my email</a>
    </div>

</div>


@endsection
