<template>
	<div class="no-auth-wrapper">
		<div class="noauth-container">
			<img alt="Vikunja" :src="logoUrl" width="400" height="117"/>
			<div class="message is-info" v-if="motd !== ''">
				<div class="message-header">
					<p>{{ $t('misc.info') }}</p>
				</div>
				<div class="message-body">
					{{ motd }}
				</div>
			</div>
			<slot/>
		</div>
	</div>
</template>

<script>
import logoUrl from '@/assets/logo-full.svg'
import {mapState} from 'vuex'

export default {
	name: 'no-auth-wrapper',
	data() {
		return {
			logoUrl,
		}
	},
	computed: mapState({
		motd: state => state.config.motd,
	}),
}
</script>

<style lang="scss" scoped>
.no-auth-wrapper {
	background: url('@/assets/llama.svg') no-repeat bottom left fixed $light-background;
	min-height: 100vh;
}

.noauth-container {
	max-width: 450px;
	width: 100%;
	margin: 0 auto;
	padding: 1rem;
}
</style>
