﻿<template>
  <!-- PC -->
  <div v-if="!isMobile">
    <div class="shadow-lg rounded-2xl mt-2">
      <div class="relative z-20">
        <div class="min-h-8 rounded-t-2xl shadow-lg" :style="{ backgroundColor: branding.colors.primary }"></div>
        <!-- Banner -->
        <div class="relative">
          <div>
            <img
                class="w-full drop-shadow-[0_10px_6px_rgba(0,0,0,0.25)]"
                :src="branding.value.images.banner ? branding.value.images.banner : '/images/placeholders/banner.png'"
                alt="Profile Banner"
                style="max-height: 425px"
            >
          </div>
        </div>
      </div>
      <banner-actions></banner-actions>
    </div>
  </div>

  <!-- Mobile -->
  <div v-if="isMobile">
    <div class="shadow-lg rounded-2xl ">
      <div class="relative z-20">
        <div class="shadow-2xl flex items-center px-2 py-2"
             :style="{ backgroundColor: branding.colors.primary, color: branding.colors.onPrimary }">
  
          <router-link to="/@Hutopy">
            <div class="flex items-center">
              <HutopySvg></HutopySvg>          
              <div class="text-xl font-bold -ml-2 ">Hutopy</div>
            </div>
          </router-link>
         
          <div class="flex-1"></div>
         
          <router-link to="/login">
            <button class="lg:hidden flex items-center justify-center mr-4">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                   :stroke="branding.colors.onPrimary" class="w-8 h-8">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
              </svg>
            </button>
          </router-link>
        </div>

        <!-- Banner -->
        <div class="relative">
          <div>
            <img
                class="w-full drop-shadow-[0_10px_6px_rgba(0,0,0,0.25)]"
                :src="branding.value.images.banner ? branding.value.images.banner : '/images/placeholders/banner.png'"
                alt="Profile Banner"
                style="max-height: 425px"
            >
          </div>
        </div>
      </div>    
      <banner-actions></banner-actions>
    </div>
  </div>
</template>


<script setup>
import {ref, onMounted, onBeforeUnmount} from "vue";
import BannerActions from "@/views/creators/BannerActions.vue";
import {useBrandingStore} from "@/stores/brandingStore.js";
import HutopySvg from "@/views/svg/HutopySvg.vue";


const branding = useBrandingStore();
const isMobile = ref(false);

function updateIsMobile() {
  isMobile.value = window.innerWidth <= 640;
}

onMounted(() => {
  updateIsMobile();
  window.addEventListener("resize", updateIsMobile);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", updateIsMobile);
});

</script>

<style>

</style>