<script setup="setup">

const { getRandomUUID } = useCrypto()

const { etherpadApiUrl } = useEtherpadApi()
const route = useRoute()

const revisionId = ref(null)
const obrazec = ref(null)

revisionId.value = route.params.guid ? route.params.guid : getRandomUUID()

// Ustvari nov, prazen pad
// @TODO parameter za seranje linka?
const padId = revisionId.value
const resp = await $fetch(`${etherpadApiUrl}/createPad?padID=${padId}`)

const onZapri = () => { console.log('zapiram'); navigateTo('/manifest') }

onMounted(() => {
  setTimeout(() => {
    console.log('element?', obrazec.value)
    debugger
    obrazec.value.scrollIntoView({ behavior: 'smooth' })
  }, 50)
})

</script>

<template>
  <section class="okvir" ref="obrazec">
    <PojemForm
      :pojem="{ nov: true }"
      :revisionId="revisionId"
      zapriLabel="Nazaj"
      :onZapri="onZapri" />
  </section>
</template>

<style scoped>
section.okvir {
  max-width: 608px;
}
form.pojem {
  width: 100%;
}
</style>
