<script setup lang="ts">
// Home redirects straight to the search experience.
import type { ButtonProps } from '@nuxt/ui'

const nuxtApp = useNuxtApp()
const { $i18n } = useNuxtApp()
const t = $i18n.t

const release = releases[0]

const links = ref<ButtonProps[]>([
  {
    label: t('nav.tour'),
    icon: 'ph-student',
    color: 'error',
    class: 'hidden sm:flex',
    onClick: () => nuxtApp.callHook('tour',11)
  },
  {
    label: t('nav.bible_studies'),
    to: `/${$i18n.locale.value}/estudios-biblicos`,
    icon: 'ph-books',
    color: 'primary'
  },
  {
    label: t('nav.conferences'),
    to: `/${$i18n.locale.value}/conferencias`,
    icon: 'ph-books',
    color: 'secondary'
  },
])

</script>

<template>

  <UDashboardPanel id="changelog-panel" grow>
    <UDashboardNavbar :title="t('nav.home')">
      <template #leading>
        <UDashboardSidebarCollapse />
      </template>
    </UDashboardNavbar>

    <UPage>
      <UPageHero title="Buscador Carpa"
        :description="$t('home.instructions')"
        :headline="`${release?.date}`" orientation="horizontal"
        :links="links"
        >

        <div id="index_changelog">
          <UPageCard variant="soft" icon="ph-git-branch" :title="release?.title" :description="release?.description">

          <template #header>
            v{{ release?.version }}
          </template>

          <!-- Lista de cambios -->
          <ul class="space-y-2">
            <li v-for="(change, i) in release?.changes" :key="i" class="flex items-start gap-2 text-sm">
              <UBadge :color="typeConfig[change.type].color as any" variant="subtle" size="xs" class="mt-0.5 shrink-0">
                {{ typeConfig[change.type].label }}
              </UBadge>
              <span class="text-default">{{ change.text }}</span>
            </li>
          </ul>
        </UPageCard>
        </div>
      </UPageHero>

    </UPage>
  </UDashboardPanel>
</template>
