@extends('auth.layout.app')

@section('title', config('app.name') . ' - ' . __('auth.verify_email.title'))

@section('content')

<div class="kt-card max-w-md w-full">
    <div class="kt-card-content flex flex-col gap-5 p-10">

        <div class="flex justify-center py-10">
            <img alt="image" class="max-h-[130px]" src="{{asset('assets/media/illustrations/30.svg')}}">
        </div>

        <div class="text-center mb-2.5">
            <h3 class="text-lg font-medium text-mono text-center mb-3">
                {{ __('auth.verify_email.title') }}
            </h3>
            <p class="text-sm text-center text-secondary-foreground ">
                {{ __('auth.verify_email.description') }}
            </p>
        </div>
        @if (session('status') === 'verification-link-sent')
            <div class="kt-alert kt-alert-light kt-alert-success">
                {{ __('auth.verify_email.resent') }}
            </div>
        @endif

        <div class="flex flex-col gap-3">
            {{-- Resend --}}
            <form method="POST" action="{{ route('verification.send') }}">
                @csrf
                <button type="submit" class="kt-btn kt-btn-primary flex justify-center grow w-full">
                    {{ __('auth.verify_email.resend_action') }}
                </button>
            </form>

            {{-- Logout --}}
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button
                    type="submit"
                    class="kt-btn kt-btn-ghost w-full justify-center"
                    data-test="logout-button"
                >
                    {{ __('auth.logout') }}
                </button>
            </form>
        </div>
    </div>
</div>

@endsection