<template>
	<app-form name="keyGroupForm">
		<app-form-group name="type" :label="$gettext(`Key Type`)" v-if="method === 'add'">
			<div class="radio">
				<label>
					<app-form-control-radio :value="KeyGroup.TYPE_USER" />
					<translate>User</translate>
					&mdash;
					<translate class="help-inline">
						Only the Game Jolt users you specify will be able to access and claim your game. Useful
						for testers, friends, etc.
					</translate>
				</label>
			</div>
			<div class="radio">
				<label>
					<app-form-control-radio :value="KeyGroup.TYPE_ANONYMOUS_CLAIM" />
					<translate>Claim-Only</translate>
					&mdash;
					<translate class="help-inline">
						Game can only be accessed once the key is claimed by a Game Jolt user. Useful for key
						giveaways where you'd like only one person to be able to claim per key, but you don't
						care who claims it.
					</translate>
				</label>
			</div>
			<div class="radio">
				<label>
					<app-form-control-radio :value="KeyGroup.TYPE_ANONYMOUS" />
					<translate>Unrestricted (Anonymous)</translate>
					&mdash;
					<translate class="help-inline">
						Anyone can access the game through the key page until the key has been claimed by a Game
						Jolt user. Useful for press keys, bundles, or any time you need to anonymously give out
						keys and see which have been claimed.
					</translate>
				</label>
			</div>
			<div class="radio">
				<label>
					<app-form-control-radio :value="KeyGroup.TYPE_EMAIL" />
					<translate>Unrestricted (Email)</translate>
					&mdash;
					<translate class="help-inline">
						Behaves exactly like Unrestricted keys, except they can be retrieved at any time through
						a retrieval page by entering their email address. Useful for assigning keys for
						Kickstarter rewards, etc
					</translate>
				</label>
			</div>
			<app-form-control-errors />
		</app-form-group>

		<app-form-group name="name" :label="$gettext(`Label`)" v-if="!!formModel.type">
			<p class="help-block">
				<translate>
					This is just so you can keep track of your groups. It won't be shown to users.
				</translate>
			</p>
			<app-form-control
				type="text"
				:rules="{
					max: 150,
				}"
			/>
		</app-form-group>

		<!-- Turning off for now -->
		<!--<app-form-group name="message"
		:label="$gettext( `Message` )" optional="true"
		v-if="!!formModel.type"
		>
		<p class="help-block" translate>
			You can write a custom message for the key/claim page here. A nice greeting, instructions for testers, etc.
		</p>
		<textarea form-control rows="2" ng-maxlength="750"></textarea>
		<app-form-control-errors />
	</app-form-group>-->

		<app-form-group
			name="amount"
			:label="$gettext(`# of Keys to Generate`)"
			v-if="
				!!formModel.type &&
					method === 'add' &&
					(formModel.type === KeyGroup.TYPE_ANONYMOUS ||
						formModel.type === KeyGroup.TYPE_ANONYMOUS_CLAIM)
			"
		>
			<app-form-control
				type="number"
				step="1"
				min="1"
				max="20000"
				:rules="{
					min_value: 1,
					max_value: 20000,
				}"
			/>
			<app-form-control-errors />
		</app-form-group>

		<app-form-group
			name="emails"
			:label="$gettext(`Email Addresses`)"
			v-if="!!formModel.type && method === 'add' && formModel.type === KeyGroup.TYPE_EMAIL"
		>
			<p class="help-block">
				<translate>Paste one email address per line, or separate them by commas.</translate>
			</p>
			<app-form-control-textarea
				rows="10"
				:rules="{
					max: 25000,
				}"
			/>
			<app-form-control-errors />
		</app-form-group>

		<app-form-group
			name="users"
			:label="$gettext(`Usernames`)"
			v-if="!!formModel.type && method === 'add' && formModel.type === KeyGroup.TYPE_USER"
		>
			<p class="help-block">
				<translate>Paste one username per line, or separate them by commas.</translate>
			</p>
			<app-form-control-textarea
				rows="10"
				:rules="{
					max: 25000,
				}"
			/>
			<app-form-control-errors />
		</app-form-group>

		<app-form-group
			name="package_ids"
			v-if="!!formModel.type"
			:label="$gettext(`Access Permissions`)"
		>
			<p class="help-block">
				<translate>The packages for your game that this key group will give access to.</translate>
			</p>

			<div class="checkbox" v-for="pkg of packages" :key="pkg.id">
				<label>
					<app-form-control-checkbox :value="pkg.id" />
					<span
						v-if="pkg.visibility === GamePackage.VISIBILITY_PRIVATE"
						class="tag tag-notice"
						v-app-tooltip="
							$gettext(
								`This package is private, but will be accessible in this key group if you assign it.`
							)
						"
					>
						<translate>Private</translate>
					</span>
					{{ pkg.title || game.title }}
				</label>
			</div>
		</app-form-group>

		<app-expand :when="serverErrors['num-keys']">
			<div class="alert alert-notice">
				<translate
					:translate-params="{
						max: number(20000),
					}"
				>
					You can only have a max of %{ max } keys in a single key group.
				</translate>
			</div>
		</app-expand>

		<app-form-button v-if="!!formModel.type && changed && arePackagesChosen">
			<translate>Save Key Group</translate>
		</app-form-button>
	</app-form>
</template>

<script lang="ts" src="./key-group"></script>
