<template>
  <Transition>
    <div v-if="etape.etape_number">
      <header>
        <h1>{{etape.adresse.locality}}, {{ etape.adresse.postal_code }}</h1>
        <h2>{{etape.title}}</h2>
        <div>
          <p>Étape n°{{etape.etape_number}}</p>
          <p>Du {{etape.dates.value}} au {{ etape.dates.end_value }}</p>
        </div>
        <img :src="etape.vignette.url" :alt="etape.vignette.alt">
      </header>
      <main>
        <div v-for="partie in etape.parties">
          <h3 v-html="partie.title"></h3>
          <p v-html="partie.text"></p>
        </div>
      </main>
  
  
  
  
  <!--     
      <div v-if="loading">Loading...</div>
      <div v-if="error">{{ error }}</div>
   -->
  
      <div><pre>{{href}}</pre></div>
  
      
      <div><pre><b>GEOFIELD</b>{{etape.geofield}}</pre></div>
      <div><pre><b>GALERIES</b>{{etape.galeries}}</pre></div>
      <div><pre><b>PARTIES</b>{{etape.parties}}</pre></div>
      <div><pre><b>SAISON</b>{{etape.saison}}</pre></div>
      <div><pre><b>THEMATIQUES</b>{{etape.thematiques}}</pre></div>
  
  
      <div>
      </div>
    </div>
  </Transition>
  <Transition>
    <div v-if="page.title">
      <header>
        <h1>{{ page.title }}</h1>
      </header>
      <main>
        <div v-html="page.text"></div>
      </main>
    </div>
  </Transition>
</template>

<script setup>
  import { watch } from 'vue';
  import { storeToRefs } from 'pinia';
  import { useContentStore } from '../stores/content';

  const store = useContentStore();

  const { 
    loading, error,
    href,
    etape,
    page,

  } = storeToRefs(store);

  watch(() => href.value, (newHref) => {
    if (newHref) {
      history.pushState(null, '', newHref);
    }
  });
</script>

<style>
.v-enter-active,
.v-leave-active {
  transition: all 0.3s ease;
}

.v-enter-from,
.v-leave-to {
  transform: translateY(100%);
  opacity: 0;
}

.v-leave-from {
  transform: translateY(0%);
  opacity: 1;
}
</style>