@extends('auth.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-4 mx-2 mx-sm-0">
                <div class="card shadow">
                    <div class="card-header text-center border-0">
                        <h1 class="fs-5 text-center text-muted mb-0">@lang('Verify Your Email Address')</h1>
                    </div>
                    <div class="card-body">

                        @if (session('resent'))
                            <div class="alert alert-success" role="alert">
                                {{ __('A fresh verification link has been sent to your email address.') }}
                            </div>
                        @endif

                        {{ __('Before proceeding, please check your email for a verification link.') }}
                        {{ __('If you did not receive the email') }},
                        @endif

                        <x-forms.form :action="route('verification.resend')" method="POST" class="d-inline">
                            <button type="submit" class="btn btn-primary btn-block"><svg xmlns="http://www.w3.org/2000/svg"
                                    width="16" height="16" fill="currentColor" class="bi bi-check"
                                    viewBox="0 0 16 16">
                                    <path
                                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                                </svg> @lang('click here to request another')</button>

                        </x-forms.form>
                    </div>

                    <div class="card-footer border-0">
                        <p class="text-muted mb-0 text-center">&copy; <a class="text-decoration-none"
                                href="{{ route('home') }}"> {{ config('app.name') }} </a> -
                            {{ trans('All Rights Reserved') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection