<script setup="setup">

import { stripHtml } from 'string-strip-html'

const { etherFetch } = useEtherpadApi()

const store = usePojmiStore()

const props = defineProps({
  naslov: String
})

const pojem = computed(() => store.pojmi[props.naslov])
const revisionId = computed(() => pojem.value.id)

await store.naloziPojme()

const urejanje = ref(false)

const urediPojem = async () => {
  // Ustvari pad s tekstom pojma, ce se ne obstaja
  const tekstPojma = stripHtml(pojem.value.tekst).result
  const resp = await etherFetch('/createPad', {
    padID: revisionId.value,
    text: tekstPojma
  })
  urejanje.value = true
}

</script>

<template>
  <section class="pojem">
    <div>
      <h2>{{ pojem.naslov }}</h2>
      <div class="tekst" v-html="pojem.tekst" />
    </div>
    <PojemForm v-if="urejanje" :revisionId="revisionId" :pojem="pojem" :urejanje="urejanje" />
    <div v-if="!urejanje" class="gumb" @click="urediPojem">Uredi</div>
  </section>
</template>

<style scoped>
  .pojem {
    position: relative;
    background: var(--bela);
    margin: 2rem;
    border-radius: 3rem;
    padding: 2rem;
  }
  @media screen and (min-width: 768px) {
    PojemForm {
      width: 50%;
      float: left;
    }
  }
  .gumb {
    float: right;
    margin-right: 1rem;
  }
</style>
