@extends('layouts.app')

@section('title', __('email_verification.title'))
@section('meta_description', __('email_verification.subtitle'))
@section('body_class', 'mc-email-verify')

@push('styles')
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@300;400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    @include('partials.email-verification.styles')
@endpush

@section('content')
    @include('partials.welcome.topbar', ['homeTheme' => 'red'])

    <main
        class="mc-verify"
        data-verify-endpoint="{{ route('bridge.auth.email.verify') }}"
        data-message-verified="{{ __('email_verification.verified_message') }}"
        data-message-network-error="{{ __('email_verification.network_error') }}"
        data-message-error-title="{{ __('email_verification.error_title') }}"
    >
        <section class="mc-verify__hero" aria-labelledby="verify-title">
            <div class="mc-verify__copy">
                <span class="mc-eyebrow">{{ __('email_verification.pretitle') }}</span>
                <h1 id="verify-title" class="mc-display">{{ __('email_verification.title') }}</h1>
                <p class="mc-lead">{{ __('email_verification.subtitle') }}</p>
            </div>

            @include('partials.email-verification.card', [
                'email' => $email,
                'code' => $code,
            ])
        </section>

        <div class="mc-verify__back">
            <a href="{{ route('index') }}" class="mc-btn mc-btn--ghost">
                <span class="material-symbols-outlined" aria-hidden="true">arrow_back</span>
                {{ __('email_verification.back_home') }}
            </a>
        </div>
    </main>
@endsection

@push('scripts')
    <script src="{{ asset('js/email-verification.js') }}?v={{ filemtime(public_path('js/email-verification.js')) }}" defer></script>
@endpush