<div class="row">
	<div class="col-12">
		<h1 class="h4 mb-3">{{ title }}</h1>
		<form action="{{ admin_dir }}/settings/web/" method="post" enctype="multipart/form-data" class="needs-validation" autocomplete="off" novalidate>
			<div class="row">
				<div class="col-12 col-md-6">
					<div class="card form-group">
						<h6 class="card-header">General</h6>
						<div class="card-body">
							<div class="form-group">
								<label for="site_name">Site Name</label>
								<input type="text" name="opt[site_name]" id="site_name" placeholder="Insert site name" class="form-control" value="{{ site_name ? site_name : 'GDPlayer' }}" required>
							</div>
							<div class="form-group">
								<label for="site_slogan">Slogan</label>
								<input type="text" name="opt[site_slogan]" id="site_slogan" placeholder="Insert site slogan" class="form-control" value="{{ site_slogan ? site_slogan : 'Google Drive Video Player' }}" required>
							</div>
							<div class="form-group">
								<label for="site_description">Site Description</label>
								<textarea name="opt[site_description]" id="site_description" placeholder="Insert site description" class="form-control" required>{{ site_description ? site_description : 'Google Drive Video Player' }}</textarea>
							</div>
							<div class="form-group form-row">
								<label for="favicon">Logo</label>
								<div class="custom-file">
									<input type="file" class="custom-file-input" id="favicon" name="favicon" accept=".png">
									<label class="custom-file-label" for="favicon">Choose file</label>
								</div>
								<small class="form-text text-muted">Upload a favicon image as your website identity. Image format must be PNG. The dimensions should be 512x512px.</small>
							</div>
							{% if imgURL %}
                                <div class="form-group"><img src="{{ imgURL }}" class="rounded" data-toggle="tooltip" title="Logo"></div>
                            {% endif %}
							<div class="form-group form-row mb-0">
								<div class="col-6">
									<label for="custom_color">Color 1</label>
									<input type="text" name="opt[custom_color]" id="custom_color" placeholder="Example: 673ab7" class="form-control" value="{{ custom_color ? custom_color : '673ab7' }}" data-wheelcolorpicker>
								</div>
								<div class="col-6">
									<label for="custom_color2">Color 2</label>
									<input type="text" name="opt[custom_color2]" id="custom_color2" placeholder="Example: 673ab7" class="form-control" value="{{ custom_color2 ? custom_color2 : '3f51b5' }}" data-wheelcolorpicker>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-12 col-md-6">
					<div class="card form-group">
						<h6 class="card-header">PWA</h6>
						<div class="card-body">
							<div class="form-group">
								<label for="pwa_shortname">Short Name</label>
								<input type="text" name="opt[pwa_shortname]" id="pwa_shortname" placeholder="Insert short name" class="form-control" value="{{ pwa_shortname ? pwa_shortname : 'GDPlayer' }}" required>
							</div>
							<div class="form-group">
								<label for="pwa_themecolor">Theme Color</label>
								<input type="text" name="opt[pwa_themecolor]" id="pwa_themecolor" placeholder="Example: 673ab7" class="form-control" value="{{ pwa_themecolor ? pwa_themecolor : '673ab7' }}" data-wheelcolorpicker>
							</div>
							<div class="form-group">
								<label for="pwa_backgroundcolor">Background Color</label>
								<input type="text" name="opt[pwa_backgroundcolor]" id="pwa_backgroundcolor" placeholder="Example: ffffff" class="form-control" value="{{pwa_backgroundcolor ? pwa_backgroundcolor : 'ffffff' }}" data-wheelcolorpicker>
							</div>
							<div class="form-group mb-0">
								<label for="pwa_display">Display UI</label>
								<select name="opt[pwa_display]" id="pwa_display" class="custom-select">
									<option value="standalone">Standalone (Default)</option>
									<option value="fullscreen" {{ pwa_display == 'fullscreen' ? 'selected' : '' }}>Fullscreen</option>
									<option value="minimal-ui" {{ pwa_display == 'minimal-ui' ? 'selected' : '' }}>Minimal</option>
								</select>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col">
					<button type="submit" class="btn btn-success">
						<em class="fas fa-save mr-2"></em>Update
					</button>
				</div>
			</div>
		</form>
	</div>
</div>
