﻿<template>
  <div class="w-full h-full">
    <div v-if="creatorIsCurrentUser" class="flex space-x-4">
      <publish-content-button></publish-content-button>
      <v-btn icon @click="createHtmlContent">
        <v-icon>mdi-pencil</v-icon>
      </v-btn>
    </div>
    <div v-if="brandingStore.value.loading">
      <v-progress-linear indeterminate></v-progress-linear>
    </div>
    <div v-else>
      <content-list :creator-id="brandingStore.value.id"
      ></content-list>
    </div>    
  </div>
</template>

<script async setup>
import {useBrandingStore} from "@/stores/brandingStore.js";
import ContentList from "@/views/contents/ContentList.vue";
import {useRouter} from "vue-router";
import PublishContentButton from "@/views/contents/PublishContentButton.vue";
import {computed} from "vue";
import {useAuthStore} from "@/stores/authStore.js";
const brandingStore = useBrandingStore()
const authStore = useAuthStore();
const router = useRouter();

const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId === brandingStore.value.id);

const createHtmlContent = () => {
  router.push('/content/editor');
}

const createContent = () => {
  router.push('/content/post');
}

</script>
