<div class="row">
	<div class="col-12">
		<h1 class="h4 mb-3">{{ title }}</h1>
		<form action="{{ admin_dir }}/settings/misc/" method="post" class="needs-validation" autocomplete="off" novalidate>
			<div class="row">
				<div class="col-12 col-md-6">
					<div class="form-group">
						<label for="bypass_host">Bypassed Hosts</label>
						<select multiple="multiple" id="bypass_host" name="opt[bypass_host][]" class="multi-select">
							{% for key, val in supported_sites %}
                                {% set x = val|split('|', 2) %}
                                <option value="{{ key }}" {{ key in bypassed_hosts ? 'selected' : '' }}>{{ x[0] }}</option>
                            {% endfor %}
						</select>
						<p>
							<small class="form-text text-muted">The bypassed hosts will use your VPS bandwidth to stream the video. The bypassed hosts are in the right or bottom column.</small>
						</p>
						<button type="button" class="btn btn-warning" id="resetHost" onclick="settings.resetHost()">Reset Hosts</button>
					</div>
					<div class="form-group">
						<label for="disable_resolution">Disabled Video Resolutions</label>
						<select multiple="multiple" id="disable_resolution" name="opt[disable_resolution][]" class="multi-select">
							{% for val in resolutions %}
                                {% set px = val == 'Default' or val == 'Original' ? '' : 'p+' %}
                                <option value="{{ val }}" {{ val in disable_resolutions ? 'selected' : '' }}>{{ val }}{{ px }}</option>
                            {% endfor %}
						</select>
						<small class="form-text text-muted">Does not apply to HLS/MPD videos. The disabled resolutions are in the right or bottom column.</small>
					</div>
					<div class="form-group">
						<label for="disable_host">Disabled Hosts</label>
						<select multiple="multiple" id="disable_host" name="opt[disable_host][]" class="multi-select">
							{% for key, val in supported_sites %}
                                {% set x = val|split('|', 2) %}
                                <option value="{{ key }}" {{ key in hosts ? 'selected' : '' }}>{{ x[0] }}</option>
                            {% endfor %}
						</select>
						<small class="form-text text-muted">The disabled hosts are in the right or bottom column.</small>
					</div>
					<div class="form-group">
						<div class="custom-control custom-checkbox">
							<input type="checkbox" class="custom-control-input" id="disable_proxy" name="opt[disable_proxy]" value="true" {{ disable_proxy ? 'checked' : '' }}>
							<label class="custom-control-label" for="disable_proxy">Disable Proxy</label>
						</div>
					</div>
					<div class="form-group">
						<div class="custom-control custom-checkbox">
							<input type="checkbox" class="custom-control-input" id="free_proxy" name="opt[free_proxy]" value="true" {{ free_proxy ? 'checked' : '' }}>
							<label class="custom-control-label" for="free_proxy">Disable Free Proxy</label>
						</div>
					</div>
					<div class="form-group">
						<label for="proxy_list">Active Proxy List</label>
						<textarea name="opt[proxy_list]" id="proxy_list" cols="30" rows="5" class="form-control" placeholder="Active proxy list">{{ proxy_list }}</textarea>
						<small class="form-text text-muted">
							<strong class="text-success">Proxy Format:</strong><br>
							IP<strong>:</strong>PORT<br>
							IP<strong>:</strong>PORT<strong>,</strong>TYPE<br>
							IP<strong>:</strong>PORT<strong>,</strong>USERNAME<strong>:</strong>PASSWORD<br>
							IP<strong>:</strong>PORT<strong>,</strong>USERNAME<strong>:</strong>PASSWORD<strong>,</strong>TYPE<br>
							<strong class="text-success">Type:</strong>
							socks4, socks4a, socks5, https
						</small>
					</div>
					<div class="form-group">
						<button type="button" class="btn btn-primary" onclick="settings.checkProxy()" id="checkProxy">Proxy Checker</button>
					</div>
				</div>
				<div class="col-12 col-md-6">
					<div class="form-group">
						<label for="reduce_bandwidth">Reduce HLS/MPD Video Bandwidth</label>
						<div class="input-group">
							<input type="number" min="0" max="70" class="form-control" name="opt[reduce_bandwidth]" id="reduce_bandwidth" placeholder="Insert the bandwidth reduction amount" value="{{ reduce_bandwidth }}" onblur="if($(this).val() > 70)$(this).val(70);else if($(this).val() < 0)$(this).val(0)">
							<div class="input-group-append">
								<div class="input-group-text">%</div>
							</div>
						</div>
						<small class="form-text text-muted">This option will reduce bandwidth usage on HLS/MPD video. Impact on bypassed hosts. Impact on master file only. Min. 0%, Max. 70%</small>
					</div>
					<div class="form-group">
						<label for="word_blacklisted">Blacklisted Words</label>
						<textarea name="opt[word_blacklisted]" id="word_blacklisted" cols="30" rows="5" class="form-control" placeholder="Enter the words you blacklisted (per line). Example: porn">{{ word_blacklisted }}</textarea>
						<small class="form-text text-muted">Disable videos with titles that contain blacklisted words.</small>
						<button type="button" class="btn btn-danger mt-2" onclick="settings.disableBlacklistedVideos($(this))">Disable Videos</button>
					</div>
					<div class="form-group">
						<label for="domain_whitelisted">Whitelisted Domains/IP Addesses</label>
						<textarea name="opt[domain_whitelisted]" id="domain_whitelisted" cols="30" rows="5" class="form-control" placeholder="Enter a domain / ip you trust (per line). Example: userweb.com">{{ domain_whitelisted }}</textarea>
						<small class="form-text text-muted">Only whitelisted websites can access this tool. If the whitelist is left blank, all websites can access this tool.</small>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-12">
					<div class="toolbar d-flex flex-wrap">
						<button type="submit" class="btn btn-success">
							<em class="fas fa-save mr-2"></em>Update
						</button>
						&nbsp;
						<div class="btn-group dropup">
							<button type="button" id="clearCache" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
								<em class="fas fa-trash-alt mr-2"></em>Clear Cache
							</button>
							<div class="dropdown-menu dropdown-menu-right shadow border-0">
								<a class="dropdown-item" href="javascript:void(0)" onclick="settings.clearCache.hlsmpd()">Clear HLS/MPD File Cache</a>
								<a class="dropdown-item" href="javascript:void(0)" onclick="settings.clearCache.videos()">Clear Video Cache</a>
								<a class="dropdown-item" href="javascript:void(0)" onclick="settings.clearCache.settings()">Clear Setting Cache</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="javascript:void(0)" onclick="settings.clearCache.all()">Clear All</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>
