<template>
  <div>
    <h1>Page Agenda</h1>


    <div>
      <p>Lien interne</p>
      <div>
        <NuxtLink to="/" class="btn btn--primary">Voir l'accueil</NuxtLink>
      </div>
      <div>
        <NuxtLink to="/" class="btn btn--primary">Voir l'accueil</NuxtLink>
      </div>
      <div>
        <NuxtLink to="/" class="btn btn--secondary">Voir l'accueil</NuxtLink>
      </div>
      <div>
        <NuxtLink to="/" class="btn btn--outline">Voir l'accueil</NuxtLink>
      </div>
    </div>

    <div v-if="errorApi1">Erreur : {{ errorApi1.message }}</div>
    <div v-else-if="!api1">Chargement en cours...</div>
    <div v-else>
      <h2 v-if="api1">{{ api1.message }}</h2>
      <h2 v-if="api1">api1 = {{ api1 }}</h2>
    </div>

    
    <testcomponentpage />

    <div v-if="errorTotos">Erreur : {{ errorTotos.message }}</div>
    <div v-else-if="!totos">Chargement en cours...</div>
    <div v-else>
      <pre v-if="totos">
        {{ totos }}
      </pre>
      <div v-if="totos">
        <article v-for="toto in totos" :key="toto.id">
            <h2>{{ toto.title }}</h2>
            <p>{{ toto.body.slice(0, 1000) }}</p>
            <p>
              <NuxtLink :to="`/concerts/concert-${toto.id}`">Lire la suite</NuxtLink>
            </p>
        </article>
      </div>
    </div>

  </div>
</template>

<script setup>

  const {data: totos, error: errorTotos} = await useFetch(() => 'https://jsonplaceholder.typicode.com/posts?_limit=20')
  const {data: api1, error: errorApi1} = await useFetch('/api/hello')
  const config = useAppConfig()
  useSeoMeta({
    title: config.title
  })
  const appConfig = useAppConfig()
  console.log("test 4 : ",appConfig.title) // "Mon site Nuxt"
</script>

<style lang="scss">

</style>
