<template>
	<app-modal>
		<div class="modal-controls">
			<app-button @click="modal.dismiss()">
				<translate>Close</translate>
			</app-button>
		</div>

		<div class="modal-body">
			<app-nav-tab-list>
				<ul>
					<li>
						<a @click="tab = 'image'" :class="{ active: tab === 'image' }">
							<translate>Images</translate>
						</a>
					</li>
					<li>
						<a @click="tab = 'video'" :class="{ active: tab === 'video' }">
							<translate>Videos</translate>
						</a>
					</li>
				</ul>
			</app-nav-tab-list>

			<br />

			<template v-if="tab === 'image'">
				<div class="alert full-bleed-xs">
					<p>
						<translate>
							Add screenshots, concept drawings, photos of little clay models, fake box covers, or
							any other original art created for the game. Yes, even if it's a text-based game!
						</translate>
					</p>
					<br />
					<div>
						<app-link-help page="dev-media-images" class="link-help">
							<translate>dash.games.media.add.image.page_help_link</translate>
						</app-link-help>
					</div>
				</div>

				<form-game-image :game="game" @submit="onImagesAdd" />
			</template>
			<template v-else-if="tab === 'video'">
				<div class="alert full-bleed-xs">
					<p>
						<translate>
							Add videos you've created, such as trailers, gameplay footage, walkthroughs, etc.
						</translate>
					</p>
					<p>
						<translate>
							Please don't add Let's Plays or reviews. Let the content owners do that themselves in
							the comments.
						</translate>
					</p>
					<br />
					<div>
						<app-link-help page="dev-media-videos" class="link-help">
							<translate>dash.games.media.add.video.page_help_link</translate>
						</app-link-help>
					</div>
				</div>

				<form-game-video :game="game" @submit="onVideoAdd" />
			</template>
		</div>
	</app-modal>
</template>

<script lang="ts" src="./add-modal"></script>
