<form id="frmCreatePlayer" method="post" enctype="multipart/form-data">
	<div class="form-group">
		<div class="input-group">
			<input tabindex="0" type="url" id="id" name="id" class="form-control" placeholder="Main Video URL" required>
			<div class="input-group-append">
				<button type="button" class="btn btn-info" data-toggle="tooltip" title="Example URL" aria-label="Example URL" onclick="videos.scrollToHosts()">
					<em class="fas fa-info-circle"></em>
				</button>
			</div>
		</div>
	</div>
	<div class="form-group">
		<div class="input-group">
			<input type="url" id="aid" name="aid" class="form-control" placeholder="Alternative Video URL">
			<div class="input-group-append">
				<button onclick="player.alternative.add()" type="button" class="btn btn-custom" data-toggle="tooltip" title="Add More Alternative Video URL" aria-label="Add Alternative Video URL">
					<em class="fas fa-plus"></em>
				</button>
			</div>
		</div>
	</div>
	<div class="form-group">
		<div id="posterURL" class="input-group">
			<input type="url" id="poster" name="poster" class="form-control" placeholder="Poster URL (.jpg, .jpeg, .png, .webp, .gif)">
			<div class="input-group-append">
				<button type="button" onclick="$('#posterUpload').toggleClass('d-none');$('#posterURL').toggleClass('d-none')" class="btn btn-primary btn-toggle-upload" data-toggle="tooltip" title="Upload Poster" aria-label="Upload Poster">
					<em class="fas fa-upload"></em>
				</button>
			</div>
		</div>
		<div id="posterUpload" class="input-group d-none">
			<div class="custom-file">
				<input type="file" class="custom-file-input form-control" id="poster-file" name="poster-file" accept=".jpg, .jpeg, .png, .webp, .gif">
				<label class="custom-file-label" for="poster-file">Choose file (.jpg, .jpeg, .png, .webp, .gif)</label>
			</div>
			<div class="input-group-append">
				<button type="button" onclick="$('#posterUpload').toggleClass('d-none');$('#posterURL').toggleClass('d-none')" class="btn btn-primary btn-toggle-upload" data-toggle="tooltip" title="Insert Poster URL" aria-label="Insert Poster URL">
					<em class="fas fa-link"></em>
				</button>
			</div>
		</div>
	</div>
	<div class="form-group">
		<div class="alert alert-success">
			<strong class="mr-2">NEW!</strong>Now we support subscene.com link. Example: https://subscene.com/subtitles/spider-man-no-way-home/indonesian/2656183
		</div>
	</div>
	<div id="subsWrapper">
		<div class="form-group" data-index="0">
			<div class="input-group">
				<div class="input-group-prepend">
					<select id="lang-0" name="lang[]" class="form-control">
						{% for val in subtitle_list %}
							<option value="{{ val }}">{{ val }}</option>
						{% endfor %}
					</select>
					<input type="hidden" id="sub-type-0" name="sub-type[]" value="url">
				</div>
				<input type="text" name="sub-url[]" class="form-control subtitle" placeholder="Subtitle URL (.srt, .vtt, .ass, .sub, .stl, .dfxp, .ttml, .sbv, .txt)">
				<div class="input-group-append">
					<button type="button" class="btn btn-outline-primary" data-toggle="tooltip" title="Upload Subtitle" aria-label="Upload Subtitle" onclick="player.subtitle.upload($(this))" data-index="0">
						<em class="fas fa-upload"></em>
					</button>
					<button type="button" class="btn btn-outline-success" data-toggle="tooltip" title="Add Subtitle" aria-label="Add Subtitle" onclick="player.subtitle.add()">
						<em class="fas fa-plus"></em>
					</button>
				</div>
			</div>
		</div>
	</div>
	<div class="form-group text-center mb-0">
        {% if recaptcha_site_key %}
            <div id="g-recaptcha" class="g-recaptcha" data-sitekey="{{ recaptcha_site_key }}" data-size="invisible" data-callback="gCallback"></div>
            <input type="hidden" id="captcha" name="captcha">
        {% endif %}
		<button id="submit" type="submit" class="btn btn-custom btn-block">
			<em class="fas fa-cog mr-2"></em>Create Player
		</button>
	</div>
</form>
