<template>
    <div class="article" v-if="article">
      <SideBarNaviSlider link="/wissenswertes">
        {{ $t('artikel.artikelUebersicht') /* Beispiel für i18n */ }}
      </SideBarNaviSlider>
  
      <section class="teaserBox topSpace">
        <div class="container-10">
            <p class="articleInfo">
          <b>{{ $t('artikel.autor') }}</b> {{ author }} | 
          <b>{{ $t('artikel.aktualisiert') }}</b> {{ formattedDate }}
        </p>
  
        <NuxtImg
          v-if="article.image?.url"
          :src="article.image.url"
          :alt="article.image.alternativeText || article.header"
          class="img_detail"
          width="350"
          height="auto"
          priority
          provider="strapi"
          :sizes="'(max-width: 600px) 90vw, 350px'"
          role="img"
        />
  
        <h1>{{ article.header }}</h1>
  
        <p class="teaser">{{ article.teaser }}</p>  
        </div>        
      </section>
  
      <section class="articleBox container">
        <div v-html="htmlContent(article.content)" class="content"></div>  
        <button
          @click.prevent="toggleContactBubble"
          class="pinkBtn"
          role="button"
          aria-label="Kontakt aufnehmen"
        >
          {{ $t('kontakt.kontaktieren') }}
        </button>
      </section>
    </div>
  
    <div v-else class="container topSpace">
      <p>{{ $t('artikel.ladenOderNichtGefunden') }}</p>
    </div>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  import { useRoute } from 'vue-router'
  import { useMainStore } from '@/stores/main'
  import { storeToRefs } from 'pinia'
  import { useHtmlConverter } from '@/composables/useHTMLConverter'
  import SideBarNaviSlider from '@/components/SideBarNaviSlider.vue'
  import { useI18n } from 'vue-i18n'
  
  const route = useRoute()
  const slug = route.params.link
  console.log(slug)
  
  const mainStore = useMainStore()
  const { articles } = storeToRefs(mainStore)
  
  const { t } = useI18n()
  
  // Artikel suchen
  const article = computed(() => {
  if (!articles.value) return null
  return articles.value.find(item => item.slug === slug) ?? null
})


  
  const { convertToHTML } = useHtmlConverter()
  const htmlContent = (content) => convertToHTML(content)
  
  const toggleContactBubble = () => mainStore.toggleContactBubble()
  
  
  // Beispiel Autor und formatierte Datum (kannst du anpassen)
  const author = 'Sabrina Hennrich'
  const formattedDate = computed(() => {
    if (!article.value?.dateModified) return ''
    const d = new Date(article.value.dateModified)
    return d.toLocaleDateString('de-DE')
  })
  </script>
  
  <style scoped lang="sass">
  .article
    margin-top: 2rem
    .teaserBox
      margin-bottom: 1.5rem !important
      .teaser
        font-family: 'Mainfont-Bold'
    .articleInfo
      font-size: 0.8rem
      color: lighten(#333, 50%)
      b
        color: #e91e63
    h1
      font-size: 1.6rem
      font-family: 'Mainfont-Bold'
      margin-bottom: 1.5rem
      line-height: 2.2rem
    .img_detail
      width: 100%
      max-width: 350px
      float: right
      margin: 0 0 2rem 2rem
      border-radius: 1rem
      filter: grayscale(100%)
    .articleBox
      display: flex
      flex-direction: column
      align-items: flex-start
  
      .pinkBtn
        clear: both
        display: block
        width: max-content
  </style>
  