<template>
    <div>
        <p style="font-size: 19px; font-variant: small-caps;">Bienvenue sur d[any], <span style="">{{ username }}</span>.</p>
        <p>Nous vous invitons à valider votre compte afin de profiter de toutes les fonctionnalités de d[any].</p>
        <div style="display: flex; justify-content: center; align-items: center; padding: 1em 0;">
            <a :href="`https://obsidian.peaceultime.com/user/mail-validation?u=${id}&t=${timestamp}&h=${0}`" target="_blank" style="border: 1px solid #999; padding: 1px 4px; background-color: #eee; font-weight: lighter; font-size: large">Je valide mon compte</a>
        </div>
        <div>
            <span>Vous pouvez egalement copier le lien suivant pour valider votre compte: </span>
            <pre style="border-bottom: 1px solid #999; font-size: small; display: inline-block; user-select: all">{{ `https://obsidian.peaceultime.com/user/mail-validation?u=${id}&t=${timestamp}&h=${0}` }}</pre>
        </div>
        <span style="font-size: small; padding-left: 8px;">Ce lien est valable 1 heure.</span>
    </div>
</template>

<script setup lang="ts">
const { id, username, timestamp } = defineProps<{
    id: number
    username: string
    timestamp: number
}>();
</script>