<template>
	<w-app :class="appClass" class="shade-1--bg">
		<Maintenance
			v-if="hasMaintenance"
		/>
		<section
			v-else
			class="auth-layout"
		>
			<div class="auth-layout__header shade-0--bg" />
			<div class="auth-layout__curve shade-0">
				<svg
					width="100%"
					viewBox="0 0 800 47"
					version="1.1"
					xml:space="preserve"
					xmlns="http://www.w3.org/2000/svg"
					xmlns:xlink="http://www.w3.org/1999/xlink"
				>
					<g transform="matrix(1,0,0,1,5.68434e-14,-203.925)">
						<path
							d="M-0,203.925L800,203.925L799.708,203.925C719.824,226.345 607.386,250 400,250L400,250L399.995,250L399.995,250C192.612,250 80.175,226.345 0.292,203.925L-0,203.925Z"
						/>
					</g>
				</svg>
			</div>
			<div class="auth-layout__logo">
				<Logo
					height="4rem"
				/>
			</div>
			<div
				v-if="renderBoardName"
				class="auth-layout__name shade4"
			>
				{{ boardName }}
			</div>
			<section class="auth-box">
				<Nuxt />
			</section>
		</section>
	</w-app>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
	computed: {
		logoUrl(): boolean {
			return this.$store.state.isDark
				? require("~/assets/img/vindigo-white.svg")
				: require("~/assets/img/vindigo-black.svg");
		},
		boardName(): string {
			return this.$store.state.config.instanceName;
		},
		renderBoardName(): boolean {
			return this.boardName.toLowerCase() != 'vindigo';
		},
		appClass(): any {
			return this.$store.state.isDark ? 'w-app--dark' : 'w-app--light';
		},
		hasMaintenance(): boolean {
			return this.$store.state.config.maintenance && this.$store.state.profile?.role != 'admin';
		}
	},
});
</script>

<style lang="scss">
.auth-layout {

	&__header {
		height: 18rem;
	}

	&__curve {
		position: relative;
		z-index: 0;

		svg {
			fill: currentColor;
			position: absolute;
		}
	}

	&__logo {
		@include padding(8, x);
		@include margin(-44, t);

		@include breakpoint(lg) {
			@include margin(-32, t);
		}

		position: relative;
		z-index: 10;
		height: 68px;

		.vindigo-logo {
			margin: 0 auto;
			display: block;
		}
	}

	&__name {
		@include font-weight(semibold);
		@include font-size('2xl');
		@include margin(2, t);

		text-align: center;
	}
}

.auth-box {
	width: 100%;
	margin: 0 auto;
	max-width: 780px;
	position: relative;

	@include padding(7, x);
	@include margin(9, t);

	.w-input__input-wrap, .w-select__selection-wrap, .w-textarea__textarea-wrap {
		@include ring(rgba(255, 255, 255, 0.4), 4);

		border: none;
		height: 32px;
		font-size: 0.85rem;
		border-radius: 12px;
		background-color: white;
		color: black;

		&--round, &--round input {
			border-radius: 100px;
		}

		&::after {
			display: none;
		}
	}
}
</style>