<script setup lang="ts">
interface LoginNotificationProps {
  userName?: string
  city?: string
  country?: string
  appName?: string
  baseUrl?: string
  appDescription?: string
  logoUrl?: string
}

withDefaults(defineProps<LoginNotificationProps>(), {
  userName: '',
  city: '',
  country: '',
  appName: 'Harmonic SaaS',
  baseUrl: '',
  appDescription: '',
  logoUrl: ''
})

const main = {
  backgroundColor: '#ffffff'
}

const container = {
  paddingLeft: '12px',
  paddingRight: '12px',
  margin: '0 auto'
}

const h1 = {
  color: '#333',
  fontFamily:
    '-apple-system, BlinkMacSystemFont, \'Segoe UI\', \'Roboto\', \'Oxygen\', \'Ubuntu\', \'Cantarell\', \'Fira Sans\', \'Droid Sans\', \'Helvetica Neue\', sans-serif',
  fontSize: '24px',
  fontWeight: 'bold',
  margin: '40px 0',
  padding: '0'
}

const link = {
  color: '#2754C5',
  fontFamily:
    '-apple-system, BlinkMacSystemFont, \'Segoe UI\', \'Roboto\', \'Oxygen\', \'Ubuntu\', \'Cantarell\', \'Fira Sans\', \'Droid Sans\', \'Helvetica Neue\', sans-serif',
  fontSize: '14px',
  textDecoration: 'underline'
}

const text = {
  color: '#333',
  fontFamily:
    '-apple-system, BlinkMacSystemFont, \'Segoe UI\', \'Roboto\', \'Oxygen\', \'Ubuntu\', \'Cantarell\', \'Fira Sans\', \'Droid Sans\', \'Helvetica Neue\', sans-serif',
  fontSize: '14px',
  margin: '24px 0'
}

const footer = {
  color: '#898989',
  fontFamily:
    '-apple-system, BlinkMacSystemFont, \'Segoe UI\', \'Roboto\', \'Oxygen\', \'Ubuntu\', \'Cantarell\', \'Fira Sans\', \'Droid Sans\', \'Helvetica Neue\', sans-serif',
  fontSize: '12px',
  lineHeight: '22px',
  marginTop: '12px',
  marginBottom: '24px'
}
</script>

<template>
  <EHtml>
    <EHead />
    <EPreview>Login from a new location</EPreview>
    <EBody :style="main">
      <EContainer :style="container">
        <EHeading :style="h1">
          Login from a new location
        </EHeading>
        <EText :style="text">
          Hello {{ userName }},
        </EText>
        <EText :style="text">
          We noticed a login to your {{ appName }} account from a new
          location.
        </EText>
        <EText
          v-if="city && country"
          :style="text"
        >
          Location: {{ city }}, {{ country }}
        </EText>
        <EText :style="text">
          If this was you, you may disregard this email.
        </EText>
        <EText :style="text">
          If this wasn't you, you should immediately
          <ELink
            :href="`${baseUrl}`"
            target="_blank"
            :style="link"
          >
            change your {{ appName }} account password
          </ELink>
        </EText>
        <EText :style="text">
          Thanks,<br>
          {{ appName }} team
        </EText>
        <EImg
          :src="logoUrl"
          width="32"
          alt="Logo"
        />
        <EText :style="footer">
          <ELink
            :href="baseUrl"
            target="_blank"
            :style="{ ...link, color: '#898989' }"
          >
            {{ appName }}
          </ELink>, {{ appDescription }}
        </EText>
      </EContainer>
    </EBody>
  </EHtml>
</template>
