<div class="row">
	<div class="col-12">
		<h1 class="h4 mb-3">{{ title }}</h1>
		<form action="{{ admin_dir }}/settings/video/" method="post" class="needs-validation" autocomplete="off" novalidate>
			<div class="row">
				<div class="col-12 col-md-6">
					<div class="card form-group">
						<div class="card-body">
							<div class="row">
								<div class="form-group col-12 col-md-6">
									<label for="player">Video Player</label>
									<select name="opt[player]" id="player" class="form-control">
										{% for key, val in player_list %}
											<option value="{{ key }}" {{ key == player ? 'selected' : '' }}>{{ val }}</option>
										{% endfor %}
									</select>
								</div>
								<div class="form-group col-12 col-md-6">
									<label for="player_skin">Video Player Skin</label>
									<select name="opt[player_skin]" id="player_skin" class="form-control">
										<option value="">Default</option>
										{% for key, val in skin_list %}
											<option value="{{ key }}" {{ key == current_skin ? 'selected' : '' }}>{{ val }}</option>
										{% endfor %}
									</select>
								</div>
							</div>
							<div class="row">
								<div class="form-group col-12 col-md-6">
									<label for="player_color">Video Player Color</label>
									<input type="text" name="opt[player_color]" id="player_color" class="form-control" placeholder="Video Player Color" value="{{ player_color ? player_color : '673ab7' }}" data-wheelcolorpicker>
								</div>
								<div class="form-group col-12 col-md-6">
									<label for="stretching">Video Position</label>
									<select name="opt[stretching]" id="stretching" class="form-control">
										<option value="uniform">Uniform</option>
										<option value="exactfit" {{ stretching == 'exactfit' ? 'selected' : '' }}>Exact Fit</option>
										<option value="fill" {{ stretching == 'fill' ? 'selected' : '' }}>Fill</option>
										<option value="none" {{ stretching == 'none' ? 'selected' : '' }}>None</option>
									</select>
								</div>
							</div>
							<div class="row">
								<div class="form-group col-12 col-md-6">
									<label for="preload">Video Preload</label>
									<select name="opt[preload]" id="preload" class="form-control">
										<option value="auto">Auto</option>
										<option value="metadata" {{ preload == 'metadata' ? 'selected' : '' }}>Metadata</option>
										<option value="none" {{ preload == 'none' ? 'selected' : '' }}>None</option>
									</select>
								</div>
								<div class="form-group col-12 col-md-6">
									<label for="default_resolution">Default Video Resolution</label>
									<select id="default_resolution" name="opt[default_resolution]" class="form-control">
										{% for val in resolutions %}
											{% set px = val == 'Default' or val == 'Original' ? '' : 'p+' %}
											<option value="{{ val }}" {{ val in default_resolution ? 'selected' : '' }}>{{ val }}{{ px }}</option>
										{% endfor %}
									</select>
								</div>
							</div>
							<div class="row">
								<div class="form-group col-12 col-md-6">
									<label for="default_subtitle">Default Subtitle</label>
									<select id="default_subtitle" name="opt[default_subtitle]" class="form-control select2">
										{% for val in subtitles %}
											<option value="{{ val }}" {{ val == default_subtitle ? 'selected' : '' }}>{{ val }}</option>
										{% endfor %}
									</select>
								</div>
								<div class="form-group col-12 col-md-6">
									<label for="subtitle_color">Subtitle Font Color</label>
									<input type="text" name="opt[subtitle_color]" id="subtitle_color" class="form-control" placeholder="Video Player Color" value="{{ subtitle_color ? subtitle_color : 'ffff00' }}" data-wheelcolorpicker>
								</div>
							</div>
							<div class="form-group">
								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input" id="autoplay" name="opt[autoplay]" value="true" {{ autoplay ? 'checked' : '' }}>
									<label class="custom-control-label" for="autoplay">Autoplay</label>
								</div>
							</div>
							<div class="form-group">
								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input" id="mute" name="opt[mute]" value="true" {{ mute ? 'checked' : '' }}>
									<label class="custom-control-label" for="mute">Mute</label>
								</div>
							</div>
							<div class="form-group">
								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input" id="repeat" name="opt[repeat]" value="true" {{ repeat ? 'checked' : '' }}>
									<label class="custom-control-label" for="repeat">Repeat</label>
								</div>
							</div>
							<div class="form-group">
								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input" id="display_title" name="opt[display_title]" value="true" {{ display_title ? 'checked' : '' }}>
									<label class="custom-control-label" for="display_title">Show Title</label>
								</div>
							</div>
							<div class="form-group">
								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input" id="playback_rate" name="opt[playback_rate]" value="true" {{ playback_rate ? 'checked' : '' }}>
									<label class="custom-control-label" for="playback_rate">Show Playback Rate Controls</label>
								</div>
							</div>
							<div class="form-group">
								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input" id="enable_share_button" name="opt[enable_share_button]" value="true" {{ enable_share_button ? 'checked' : '' }}>
									<label class="custom-control-label" for="enable_share_button">Show Share Button</label>
								</div>
							</div>
							<div class="form-group">
								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input" id="enable_download_button" name="opt[enable_download_button]" value="true" {{ enable_download_button ? 'checked' : '' }}>
									<label class="custom-control-label" for="enable_download_button">Show Download Button</label>
								</div>
							</div>
							<div class="form-group">
								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input" id="continue_watching" name="opt[continue_watching]" value="true" {{ continue_watching ? 'checked' : '' }}>
									<label class="custom-control-label" for="continue_watching">Enable Continue Watching Dialog</label>
								</div>
								<small class="form-text text-muted">If you enable this option, a continue watching video dialog will be displayed to remind you that you have watched the video for a certain period of time.</small>
							</div>
							<div class="form-group mb-0">
								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input" id="pause_on_left" name="opt[pause_on_left]" value="true" {{ pause_on_left ? 'checked' : '' }}>
									<label class="custom-control-label" for="pause_on_left">Pause Video when Embed Page is Left <small class="badge badge-success">New!</small></label>
								</div>
							</div>
						</div>
					</div>
					<div class="card form-group">
						<div class="card-body">
							<div class="form-group">
								<label for="poster">Default Poster Image URL</label>
								<input type="url" name="opt[poster]" id="poster" class="form-control" placeholder="Insert Poster image url (.jpg/.jpeg/.png/.webp)" value="{{ poster }}">
							</div>
							<div class="form-group">
								<label for="small_logo_file">Small Logo URL</label>
								<input type="url" name="opt[small_logo_file]" id="small_logo_file" class="form-control" placeholder="The small logo will be displayed on the video player control" value="{{ small_logo_file }}">
							</div>
							<div class="form-group mb-0">
								<label for="small_logo_link">Visited URL</label>
								<input type="url" name="opt[small_logo_link]" id="small_logo_link" class="form-control" placeholder="Insert a link that will be visited each time the small logo is clicked" value="{{ small_logo_link }}">
							</div>
						</div>
					</div>
					<div class="card form-group">
						<div class="card-body">
							<div class="form-group">
								<label for="logo_file">Image URL</label>
								<input type="url" name="opt[logo_file]" id="logo_file" class="form-control" placeholder="Insert the watermark image link" value="{{ logo_file }}">
							</div>
							<div class="form-group">
								<label for="logo_open_link">Visited URL</label>
								<input type="url" name="opt[logo_open_link]" id="logo_open_link" class="form-control" placeholder="Insert a link that will be visited each time the watermark image is clicked" value="{{ logo_open_link }}">
							</div>
							<div class="form-group">
								<label for="logo_position">Position</label>
								<select name="opt[logo_position]" id="logo_position" class="form-control">
									<option value="top-right" {{ logo_position == 'top-right' ? 'selected' : '' }}>Top-right</option>
									<option value="bottom-right" {{ logo_position == 'bottom-right' ? 'selected' : '' }}>Bottom-right</option>
									<option value="bottom-left" {{ logo_position == 'bottom-left' ? 'selected' : '' }}>Bottom-left</option>
									<option value="top-left" {{ logo_position == 'top-left' ? 'selected' : '' }}>Top-left</option>
								</select>
							</div>
							<div class="form-group">
								<label for="logo_margin">Margin</label>
								<input type="number" name="opt[logo_margin]" id="logo_margin" class="form-control" placeholder="Enter the distance between the logo and the edge of the screen (px)" value="{{ logo_margin }}">
							</div>
							<div class="form-group mb-0">
								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input" id="logo_hide" name="opt[logo_hide]" value="true" {{ logo_hide ? 'checked' : '' }}>
									<label class="custom-control-label" for="logo_hide">Hide</label>
								</div>
								<small class="form-text text-muted">When this option is checked, the logo will automatically show and hide along with the other player controls
								</small>
							</div>
						</div>
					</div>
				</div>
				<div class="col-12 col-md-6">
					<div class="card form-group">
						<div class="card-body">
							<div class="form-group">
								<p class="alert alert-warning">Using the p2p feature will remove some parts of the HLS/MPEG DASH, such as audio and/or subtitle options. <strong>Use Plyr for best results</strong>.</p>
								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input" id="p2p" name="opt[p2p]" value="true" {{ p2p ? 'checked' : '' }}>
									<label class="custom-control-label" for="p2p">Enable P2P</label>
								</div>
								<small class="form-text text-muted">If you enable this option, bandwidth usage will be reduced especially when many visitors are playing videos at the same time but may slow down video playback.</small>
							</div>
							<div class="form-group mb-0">
								<label for="torrent_tracker">Torrent Trackers</label>
								<textarea name="opt[torrent_tracker]" id="torrent_tracker" cols="30" rows="5" class="form-control mb-0">{{ torrent_tracker ? torrent_tracker : torrent_default }}</textarea>
							</div>
						</div>
					</div>
					<div class="card form-group">
						<div class="card-body">
							<div class="form-group">
								<small class="form-text text-muted">{title} = Your Video Title<br>{siteName} = Your Site Name</small>
							</div>
							<div class="form-group">
								<label for="text_title">Embed Page Title Text</label>
								<input type="text" name="opt[text_title]" id="text_title" class="form-control" placeholder="Watch {title} - {siteName}" value="{{ text_title ? text_title : 'Watch {title} - {siteName}' }}">
							</div>
							<div class="form-group">
								<label for="text_loading">Loading Text</label>
								<input type="text" name="opt[text_loading]" id="text_loading" class="form-control" placeholder="Please wait..." value="{{ text_loading ? text_loading : 'Please wait...' }}">
							</div>
							<div class="form-group">
								<label for="text_download">Download Button Text</label>
								<input type="text" name="opt[text_download]" id="text_download" class="form-control" placeholder="Download {title}" value="{{ text_download ? text_download : 'Download {title}' }}">
							</div>
							<div class="form-group">
								<label for="text_resume">Resume Dialog Text</label>
								<textarea name="opt[text_resume]" id="text_resume" class="form-control">{{ text_resume ? text_resume : 'Welcome back! You left off at hh:mm:ss. Would you like to resume watching?' }}</textarea>
							</div>
							<div class="form-group">
								<label for="text_resume_yes">Resume Confirm Button Text</label>
								<input type="text" name="opt[text_resume_yes]" id="text_resume_yes" class="form-control" placeholder="Yes, Please" value="{{ text_resume_yes ? text_resume_yes : 'Yes, Please' }}">
							</div>
							<div class="form-group">
								<label for="text_resume_no">Resume Cancel Button Text</label>
								<input type="text" name="opt[text_resume_no]" id="text_resume_no" class="form-control" placeholder="No, Thanks" value="{{ text_resume_no ? text_resume_no : 'No, Thanks' }}">
							</div>
							<div class="form-group">
								<label for="text_rewind">JW Player Rewind Button Text</label>
								<input type="text" name="opt[text_rewind]" id="text_rewind" class="form-control" placeholder="Rewind 10 Seconds" value="{{ text_rewind ? text_rewind : 'Rewind 10 Seconds' }}">
							</div>
							<div class="form-group">
								<label for="text_forward">JW Player Forward Button Text</label>
								<input type="text" name="opt[text_forward]" id="text_forward" class="form-control" placeholder="Forward 10 Seconds" value="{{ text_forward ? text_forward : 'Forward 10 Seconds' }}">
							</div>
							<div class="form-group mb-0">
								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input" id="hide_hostname" name="opt[hide_hostname]" value="true" {{ hide_hostname ? 'checked' : '' }}>
									<label class="custom-control-label" for="hide_hostname">Hide Multi Hostname <small class="badge badge-success">New!</small></label>
								</div>
								<small class="form-text text-muted">If this option is checked, the original hostname is hidden and shows the "Main" and "Alternative" labels</small>
							</div>
						</div>
					</div>
					<div class="card form-group">
						<div class="card-body">
							<div class="form-group">
								<label for="slug_embed">Embed Page Slug</label>
								<input type="text" name="opt[slug_embed]" id="slug_embed" class="form-control" placeholder="Insert embed page slug. Default: embed" value="{{ slug_embed ? slug_embed : 'embed' }}">
							</div>
							<div class="form-group">
								<label for="slug_download">Download Page Slug</label>
								<input type="text" name="opt[slug_download]" id="slug_download" class="form-control" placeholder="Insert download page slug. Default: download" value="{{ slug_download ? slug_download : 'download' }}">
							</div>
							<div class="form-group mb-0">
								<label for="slug_request">Request Page Slug</label>
								<input type="text" name="opt[slug_request]" id="slug_request" class="form-control" placeholder="Insert request page slug. Default: embed2" value="{{ slug_request ? slug_request : 'embed2' }}">
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-12">
					<button type="submit" class="btn btn-success">
						<em class="fas fa-save mr-2"></em>Update
					</button>
				</div>
			</div>
		</form>
	</div>
</div>
