<script setup="setup">

const store = usePojmiStore()

const { poskrolaj } = useUi()
const { getRandomUUID } = useCrypto()

await store.naloziPojme()

const navodila = ref(null)

onMounted(() => {
  if (location && location.hash == '#skrol') {
    poskrolaj(navodila.value)
  }
})

</script>

<template>
  <h3 class="navodila" ref="navodila">{{ $t('Vsak lahko prispeva k vsebinam manifesta. Predlaga lahko nov pojem ali ureja, dopolni ali predela obstoječe.') }}</h3>
  <NuxtLink class="gumb" :to="localePath({ name: 'pojem_dodaj', params: { guid: getRandomUUID() }})">
    {{ $t('Dodaj nov pojem') }}
  </NuxtLink>
  <NuxtLink
    v-for="pojem in Object.keys(store.pojmi)"
    :naslov="pojem"
    :to="localePath({ name: 'pojem_poglej', params: { naslov: encodeURIComponent(pojem) }})"
    class="okvir">
    <h2>{{ pojem }}</h2>
  </NuxtLink>
</template>

<style scoped>
  a {
    clear: both;
  }
  h2 {
    margin-bottom: 0;
  }

  .navodila {
    padding-left: 2rem;
    padding-right: 2rem;
    text-align: center;
  }
</style>
