<template>
	<div class="box ma7 p-5">
		<h2
			v-if="page"
			v-html="page.name"
		/>
		<div
			v-if="page"
			v-html="page.content"
		/>

		<router-link
			:to="editTarget"
			variant="outline"
		>
			<button>
				<i class="fa fa-2x fa-fw fa-edit"/>
			</button>
		</router-link>
		<hr>
	</div>
</template>

<script setup>
import { reactive, watchEffect, computed } from 'vue'
import axios from 'axios'
//import h from 'highlightjs'
//import hi from 'highlightjs-line-numbers.js'

//hi.highlightAll()
//hi.initLineNumbersOnLoad()

const props = defineProps({
	slug: {
		type: String,
		required: true
	}
})

let page = reactive({ name: '', slug: '' })

const editTarget = computed(() => {
	if (page) {
		return `/pages/edit/${page.slug}`
	}
	return ''
})

const getPagesDetails = async (slug) => {
	console.log('get page details')
	await axios.get(`/api/pages?slug=${slug}`)
		.then((response) => {
			page = response.data['hydra:member']
			console.log(page)
		})
}

// watch fpr slug
watchEffect(() => getPagesDetails(props.slug))
</script>
