﻿<script async setup>
import {useBrandingStore} from "@/stores/brandingStore.js";
import {onMounted} from "vue";
import Banner from "@/views/creators/Banner.vue";
import Footer from "@/views/main/Footer.vue";

const brandingStore = useBrandingStore();
const creatorName = window.location.pathname.split('/@').pop();

onMounted(async () => {
  await brandingStore.updateBrand(creatorName);
});

</script>

<template>

  <div class="min-h-screen max-w-[1024px] bg-hSurface text-hOnSurface">

    <div v-if="brandingStore.loading">
      <v-progress-linear indeterminate></v-progress-linear>
    </div>
    <div v-else>
      <div v-if="brandingStore.value.isDeleted" 
          class="bg-red-500 p-2 m-4 text-center font-semibold">
        This Creator page is pending deletion. You can revert the action in your profile.
      </div>
      <banner></banner>
      <router-view></router-view>
      <Footer></Footer>
    </div>

  </div>

</template>
