<template>
	<div v-if="isRouteBootstrapped">
		<nav class="breadcrumb">
			<ul>
				<li>
					<router-link :to="{ name: 'dash.games.manage.game.packages.list' }">
						<span class="breadcrumb-tag">&nbsp;</span>
						<translate>Packages</translate>
					</router-link>
					<app-jolticon icon="chevron-right" class="breadcrumb-separator" />
				</li>
				<li>
					<span class="active">
						<span class="breadcrumb-tag">
							<translate>dash.games.releases.manage.breadcrumb_package</translate>
						</span>
						{{ package.title || game.title }}
					</span>
				</li>
			</ul>
		</nav>

		<hr />

		<app-nav-tab-list>
			<ul>
				<app-game-perms required="builds,sales" :either="true" tag="li">
					<router-link
						:to="{
							name: 'dash.games.manage.game.packages.edit',
						}"
						active-class="active"
						exact
					>
						<translate>Edit Package</translate>
					</router-link>
				</app-game-perms>
				<li>
					<router-link
						:to="{
							name: 'dash.games.manage.game.packages.edit.widget',
						}"
						active-class="active"
					>
						<translate>Widget</translate>
					</router-link>
				</li>
			</ul>
		</app-nav-tab-list>

		<br />

		<template v-if="$route.name === 'dash.games.manage.game.packages.edit'">
			<div class="row">
				<div class="col-sm-8">
					<div
						class="alert alert-notice"
						v-if="game._is_devlog && package.visibility === GamePackage.VISIBILITY_PUBLIC"
					>
						<app-jolticon icon="notice" />
						<span v-translate>
							<strong>This package won't show up on your devlog-only game page.</strong>
							Switch your game page to early access or complete from the Overview/Setup page for it
							to show.
						</span>
						<router-link
							:to="{
								name: 'dash.games.manage.game.overview',
								params: {
									id: game.id,
								},
							}"
						>
							<translate>Go to Overview/Setup page</translate>
						</router-link>
					</div>

					<h3
						:class="{
							'section-header': !(
								game._is_devlog && package.visibility === GamePackage.VISIBILITY_PUBLIC
							),
						}"
					>
						<translate>Package Preview</translate>
					</h3>

					<app-game-perms tag="div" required="sales">
						<app-button primary block @click="editPackage()">
							Edit Package Details
						</app-button>
						<br />
					</app-game-perms>

					<app-loading v-if="isLoadingPreview" />
					<template v-else>
						<app-game-package-card
							v-if="previewPackage"
							:game="game"
							:sellable="previewSellable"
							:package="previewPackage"
							:releases="previewPackage ? previewPackage._releases : null"
							:builds="previewPackage ? previewPackage._builds : null"
						/>

						<template v-if="buildsProcessingCount > 0">
							<app-progress-poller
								:url="
									`/web/dash/developer/games/packages/poll-processing-builds/${game.id}/${package.id}/${buildsProcessingCount}`
								"
								@complete="onBuildsProcessed($event)"
							/>

							<div class="alert">
								<app-jolticon icon="notice" />
								<translate>
									This package has builds that are still processing. They will be available in the
									package as soon as they're finished processing.
								</translate>
							</div>
						</template>
					</template>
				</div>
			</div>

			<h3>
				<translate>dash.games.packages.manage.releases.heading</translate>
			</h3>

			<div class="row">
				<div class="col-sm-4 col-sm-push-8">
					<div class="page-help">
						<p>
							<translate>
								Releases represent new versions of your package. If you update a package, you should
								add a release. You can group all of the new builds for different platforms into a
								single new release.
							</translate>
						</p>
						<p>
							<app-link-help page="dev-packages" class="link-help">
								<translate>dash.games.packages.manage.releases.page_help_link</translate>
							</app-link-help>
						</p>
					</div>
				</div>

				<div class="col-sm-8 col-sm-pull-4">
					<div class="alert alert-notice" v-if="!releases.length">
						<p><translate>There are no releases in this package yet.</translate></p>
						<p>
							<translate>
								Add a release to this package in order to upload builds/files to it.
							</translate>
						</p>
					</div>

					<app-game-perms tag="div" required="builds">
						<app-button primary block @click="newRelease" :disabled="isAddingRelease">
							<translate>New Release</translate>
						</app-button>
						<br />
					</app-game-perms>

					<div v-if="releases.length">
						<app-card v-for="release of releases" :key="release.id">
							<app-game-perms required="builds">
								<a class="card-remove" @click="removeRelease(release)">
									<app-jolticon icon="remove" />
								</a>
							</app-game-perms>

							<div class="card-title">
								<h4>
									<template v-if="hasBuildsPerms">
										<router-link
											:to="{
												name: 'dash.games.manage.game.packages.release.edit',
												params: {
													packageId: package.id,
													releaseId: release.id,
												},
											}"
										>
											{{ release.version_number }}
										</router-link>
									</template>
									<template v-else>
										{{ release.version_number }}
									</template>
								</h4>
							</div>

							<div class="card-meta">
								<template v-if="release.status === GameRelease.STATUS_HIDDEN">
									<span
										class="tag"
										v-if="!release.isScheduled"
										v-app-tooltip="$gettext(`dash.games.packages.manage.releases.hidden_tooltip`)"
									>
										<app-jolticon icon="inactive" />
										<translate>Draft</translate>
									</span>
									<template v-else>
										<span
											class="tag tag-notice"
											v-app-tooltip="
												$gettext(
													`This release is scheduled and will be published to your game page in the future.`
												)
											"
										>
											<app-jolticon icon="calendar-grid" />
											<translate>Scheduled</translate>
										</span>

										<app-time-ago :date="release.scheduled_for" without-suffix />
									</template>
								</template>

								<span
									class="tag tag-highlight"
									v-if="release.status === GameRelease.STATUS_PUBLISHED"
									v-app-tooltip="$gettext(`dash.games.packages.manage.releases.published_tooltip`)"
								>
									<app-jolticon icon="active" />
									<translate>dash.games.packages.manage.releases.published_tag</translate>
								</span>

								<span class="dot-separator"></span>

								<template v-if="!release.build_count">
									<translate>dash.games.packages.manage.releases.builds_count_none</translate>
								</template>
								<template v-else>
									<translate
										:translate-params="{
											count: number(release.build_count),
										}"
										:translate-n="release.build_count"
										translate-plural="%{ count } builds"
									>
										%{ count } build
									</translate>
								</template>
							</div>

							<div class="card-controls" v-if="hasBuildsPerms || hasAnalyticsPerms">
								<app-game-perms required="builds">
									<app-button
										primary
										:to="{
											name: 'dash.games.manage.game.packages.release.edit',
											params: { packageId: package.id, releaseId: release.id },
										}"
									>
										<translate>Edit Release</translate>
									</app-button>
								</app-game-perms>

								<app-game-perms required="analytics">
									<app-button
										trans
										:to="{
											name: 'dash.analytics',
											params: { resource: 'Game_Release', resourceId: release.id },
										}"
									>
										<translate>Analytics</translate>
									</app-button>
								</app-game-perms>
							</div>
						</app-card>
					</div>

					<app-dash-game-wizard-controls :disabled="!game._is_devlog && !game.has_active_builds" />
				</div>
			</div>
		</template>

		<router-view />
	</div>
</template>

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