<template>
	<section class="section" v-if="isRouteBootstrapped">
		<div class="container">
			<template v-if="!game.path">
				<div class="alert">
					<p>
						<translate>
							In order to set up a custom site for your game, you first have to set a URL path in
							your game details page.
						</translate>
					</p>
					<div class="alert-actions">
						<app-button
							primary
							:to="{
								name: 'dash.games.manage.game.details',
								params: { id: game.id },
							}"
						>
							<translate>Edit Game Details</translate>
						</app-button>
					</div>
				</div>
				<br />
				<br />
			</template>

			<div class="row">
				<div class="col-lg-8">
					<div :class="{ '-disabled': !game.path }">
						<app-sites-manage-page :site="site" :game="game" />
					</div>
				</div>
				<div class="col-lg-4">
					<br class="hidden-lg" />

					<p class="page-help">
						<strong>
							<translate>
								Game Jolt Sites are customizable external sites for your portfolio and games!
							</translate>
						</strong>
						<translate>
							You can use a customizable template, or simply upload your own static site.
						</translate>
					</p>

					<p class="page-help">
						<translate>
							Sites don't replace your Game Jolt game page. You can use your Site URL to share your
							site with others.
						</translate>
					</p>

					<p class="page-help">
						<router-link :to="{ name: 'dash.account.site' }">
							<translate>You can also create a user portfolio site.</translate>
						</router-link>
					</p>

					<hr />

					<app-sites-link-card v-if="game.path" :site="site" />
				</div>
			</div>
		</div>
	</section>
</template>

<style lang="stylus" scoped>
.-disabled
	opacity: 0.5
	pointer-events: none
	user-select: none
</style>

<script lang="ts" src="./site"></script>
