<script setup lang="ts">
definePageMeta({
  public: true,
  pageId: 'index'
})
    const authStore = useAuthStore();
    const localePath = useLocalePath()

</script>

<template>
  <h1>{{ $t('index.title') }}</h1>
  <h2 class="title">{{ $t('index.subtitle1')}}</h2>
  <div class="index-main-text" v-html="$t('index.mainText')"></div>
  
  <div v-if="!authStore.isLoggedIn">
  <div class="index-main-text-last">
    <i18n-t keypath="index.lastSentenceUnconnect" tag="p">
      <template #login>
        <NuxtLink :to="localePath('/login')">
          {{ $t('index.login') }}
        </NuxtLink>
      </template>
    
        <template #signup>
          <NuxtLink :to="localePath('/signup')">
            {{ $t('index.signup') }}
          </NuxtLink>
        </template>
      </i18n-t>
      <ButtonGoogle/>
    </div>
  </div>
  <div v-else>
    <p>{{ $t('index.lastSentenceConnected') }} <NuxtLink :to="localePath('lists')">{{ $t('index.seeLists') }}.</NuxtLink>
      </p>
  </div>

</template>

<style>
.button {
  background: none;
  border: none;
  padding: 0;
  color: #06c;
  text-decoration: underline;
  cursor: pointer;
}</style>