<!-- Vue to show when user does not have an account -->
<script setup lang="ts">
import { inject } from 'vue';
import useBgImage from '../composables/useBgImage';
import Button from '../components/base/Button.vue';
import { AppConfigType } from '../types';
import usePopupWindow from '../composables/usePopupWindow';
import { useRouter } from 'vue-router';
import useSetPageTitle from '../composables/useSetPageTitle';
import { useGettext } from 'vue3-gettext';

// Translations
const { $gettext } = useGettext();

// Set page title
useSetPageTitle($gettext('Create account'));

// Get plugin config
const config: AppConfigType = inject('pluginConfig');

// Router
const router = useRouter();

// Set backgroud image on body
useBgImage(config.plugin_url);

// Show popup with login
const openAuthorizationPopup = () => {
    // Construct url
    const url = `https://boostsite.com/wp?url=${config.home_url}&screen_hint=signup`;

    // Show window
    usePopupWindow(url, 500, 700, () => {
        // Refresh the page
        router.go(0);
    });
};
</script>

<template>
    <div class="grid size-full place-items-center text-center">
        <div class="flex flex-col py-20">
            <img width="143px" class="mx-auto mb-8" :src="`${config.plugin_url}/public/images/boostsite-logo.png`" />
            <h1 class="mb-8 text-[22px] font-bold leading-none">{{ $gettext('Create account') }}</h1>
            <Button
                class="w-[320px]"
                :text="$gettext('Sign up')"
                size="large"
                @click.prevent="openAuthorizationPopup"
            />
        </div>
    </div>
</template>

<style lang="scss" scoped></style>
