<template>
	<div class="no-auth-wrapper">
		<Logo class="logo" width="200" height="58"/>
		<div class="noauth-container">
			<section class="image">
				<div class="overlay">
					<message v-if="motd !== ''">
						{{ motd }}
					</message>
					<h2 class="title">
						{{ $t('misc.welcomeBack') }}
					</h2>
				</div>
			</section>
			<section class="content">
				<slot/>

				<legal/>
			</section>
		</div>
	</div>
</template>

<script setup>
import Logo from '@/components/home/Logo.vue'
import Message from '@/components/misc/message'
import Legal from '../../components/misc/legal'
import {useStore} from 'vuex'
import {computed} from 'vue'

const store = useStore()
const motd = computed(() => store.state.config.motd)
</script>

<style lang="scss" scoped>
.no-auth-wrapper {
	background: url('@/assets/llama.svg') no-repeat bottom left fixed var(--site-background);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.noauth-container {
	max-width: $desktop;
	width: 100%;
	min-height: 60vh;
	display: flex;
	background: var(--white);
	border-radius: $radius;
	box-shadow: var(--shadow-md);
	overflow: hidden;
}

.image {
	width: 60%;
	background: url('@/assets/no-auth-image.jpg') no-repeat bottom;
	background-size: cover;
	position: relative;
}

.overlay {
	padding: 1rem;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .2);
}

.content {
	width: 50%;
	padding: 2rem 2rem 1.5rem;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}

.logo {
	color: var(--logo-text-color);
	max-width: 100%;
	margin-bottom: 1rem;
}

.message {
	margin: 1rem;
}

.title {
	color: var(--white);
	font-size: 2.5rem;
}
</style>
