﻿<template>
  <div class="creator-home">
    
    <!-- Content sections container -->
    <div class="content-sections">

      <!-- Donation Section -->
      <div class="section sm:hidden">
        <DonationButton
            v-if="brandingStore.value?.acceptDonation"
            :creator-id="brandingStore.value?.id"
            :creator-name="brandingStore.value?.name"
            :on-cancelled-url="baseURL + '/paymentfailed/' + brandingStore.value?.id"
            :on-success-url="baseURL + '/paymentcompleted/' + brandingStore.value?.id"
        />
      </div>
      
      <!-- About Creator Section -->
      <div class="section">
        <AboutCreator />
      </div>

    </div>
  </div>
</template>

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

const brandingStore = useBrandingStore();
const baseURL = window.location.origin;

</script>

<style scoped>
.creator-home {
  @apply w-full;
  @apply p-5;
}

.content-sections {
  @apply flex flex-col;
  @apply gap-5;
}

.section {
  @apply rounded-2xl;
  @apply shadow-2xl;
  @apply relative;
}

.section::before {
  content: '';
  @apply absolute inset-0;
  @apply rounded-2xl;
  @apply p-[1px];
  background: linear-gradient(135deg, rgba(64, 64, 64, 1) 0%, rgba(64, 64, 64, 0) 20%, rgba(64, 64, 64, 0.5) 100%);
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

</style>

<i18n>
{
  "en": {
    "creator": {
      "home": {
        "title": "Creator Home"
      }
    }
  },
  "fr": {
    "creator": {
      "home": {
        "title": "Accueil du Créateur"
      }
    }
  },
  "es": {
    "creator": {
      "home": {
        "title": "Inicio del Creador"
      }
    }
  }
}
</i18n>