<div class="mx-auto max-w-md py-16">
    <div class="rounded-lg border border-line bg-surface p-8 shadow-xs animate-rise">
        <span class="grid size-12 place-items-center rounded-lg bg-accent-subtle text-accent-text">
            <x-ui.icon name="mail" class="size-6" />
        </span>

        <h1 class="mt-5 text-2xl font-bold tracking-tight text-ink">{{ __('verify_email.notice_title') }}</h1>
        <p class="mt-2 text-sm text-body">{{ __('verify_email.notice_body', ['email' => $email]) }}</p>
        <p class="mt-3 text-sm text-muted">{{ __('verify_email.notice_hint') }}</p>

        <div class="mt-6 flex flex-wrap gap-3">
            <x-ui.button variant="primary" wire:click="resend" wire:loading.attr="disabled" wire:target="resend">
                <x-ui.icon name="refresh" class="size-4" />
                {{ __('verify_email.notice_resend') }}
            </x-ui.button>
            {{-- R23: confirmed in a modal. Deleting an account is not a thing
                 to do on one click, even an account that is five minutes old. --}}
            <x-ui.button variant="secondary"
                         x-on:click="$dispatch('openModal', { component: 'confirm-delete-own-account' })">
                {{ __('verify_email.notice_delete') }}
            </x-ui.button>
        </div>

        {{-- Said here, not only in the mail: somebody who never got the mail is
             looking at THIS page, and the deadline is the reason they do not
             have to do anything about an attempt they abandon. --}}
        {{-- Both deadlines, because reading only the first one ("deleted after
             five days") leaves somebody thinking a confirmed account goes the
             same way. It does not: the five days are about a registration nobody
             confirmed. --}}
        <p class="mt-5 border-t border-line pt-4 text-xs text-muted">{{ __('verify_email.notice_wrong_address') }}</p>
        <p class="mt-2 text-xs text-muted">{{ __('verify_email.notice_after_confirm') }}</p>
    </div>
</div>
