<script setup lang="ts">
import { computed, ref } from 'vue'

const emailText = ref('')
const emailCorrect = computed(() => {
  const testStr = atob('bWVAYW5kcmV3bGFsaXMuY29t')
  return emailText.value.trim().toLowerCase() === testStr
})
</script>
<template>
  <main>
    <p>
      My preferred method of communication is email, which I usually check daily. Send to
      <code>me at &gt;this website&lt;</code>.
    </p>
    <p>
      See if you can figure it out:
      <input class="contactEmailInput" type="text" v-model="emailText" />
      <span v-if="emailCorrect">
        <br />
        <small style="color: var(--success-color)"><em>You got it!</em></small>
      </span>
      <br />
      <small><em>I write it like that to avoid getting spammed by bots.</em></small>
    </p>
  </main>
</template>
<style>
.contactEmailInput {
  font-family: OpenSans, sans-serif;
  font-size: 14px;
  width: calc(min(30ch, 100%));
}
</style>
