﻿<template>
  <div>
    <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>
      <!--actions - Lowerpart-->
      <banner-actions></banner-actions>
    </div>
  </div>
</template>

<script setup>
import BannerActions from "@/views/creators/BannerActions.vue";
import {useBrandingStore} from "@/stores/brandingStore.js";

const branding = useBrandingStore()

</script>