<div class="row">
	<div class="col-12">
		<h1 class="h4 mb-3">{{ title }}</h1>
		<p>List of videos found in your Google Drive account. If you add video files to your Google Drive account directly and from the anti-limit feature they will be displayed here.</p>
		<div id="toolbar" class="d-flex flex-wrap mb-3 toolbar">
			{% if folder_id %}
				<a href="javascript:void(0)" onclick="history.back()" class="btn btn-secondary btn-sm">
					<em class="fas fa-arrow-left mr-2"></em>Go Back
				</a>
			{% endif %}
			<select name="email" id="email" class="form-control form-control-sm" onchange="gdrive_files.changeEmail($(this))">
				<option value="">-- Select Account --</option>
				<optgroup label="Accounts">
					{% for dt in email_list %}
						<option value="{{ dt }}" {{ dt == email ? 'selected' : '' }}>{{ dt }}</option>
					{% endfor %}
				</optgroup>
			</select>
			{% if email %}
				<select name="drives" id="drives" class="form-control form-control-sm" onchange="var url=location.href.split('&amp;folder_id=');location.href=url[0]+'&amp;folder_id='+$(this).val()">
					<option value="">-- Select Shared Drive --</option>
					<optgroup label="Shared Drives"></optgroup>
				</select>
				<button type="button" class="btn btn-primary btn-sm" onclick="gdrive_files.newFolder()">
					<em class="fas fa-folder-plus mr-2"></em>New Folder
				</button>
				<button type="button" class="btn btn-success btn-hidden d-none btn-sm" onclick="gdrive_files.import.multi()">
					<em class="fas fa-download mr-2"></em>Import Selected Videos
				</button>
				<div class="dropdown btn-hidden d-none">
					<button class="btn btn-secondary dropdown-toggle btn-sm" type="button" id="changeStatus" data-toggle="dropdown" aria-expanded="false">
						<em class="fas fa-eye mr-2"></em>Change Status to
					</button>
					<div class="dropdown-menu" aria-labelledby="changeStatus">
						<button class="dropdown-item" type="button" onclick="gdrive_files.update_status.multi('public')">
							<em class="fas fa-eye mr-2"></em>Public
						</button>
						<button class="dropdown-item" type="button" onclick="gdrive_files.update_status.multi('private')">
							<em class="fas fa-eye-slash mr-2"></em>Private
						</button>
					</div>
				</div>
				<button type="button" class="btn btn-danger btn-sm btn-hidden d-none" onclick="gdrive_files.delete.multi()">
					<em class="fas fa-trash-alt mr-2"></em>Delete
				</button>
				<button type="button" class="btn btn-info btn-sm" onclick="gdrive_files.reload()">
					<em class="fas fa-sync-alt mr-2"></em>Reload
				</button>
			{% endif %}
		</div>
		<div class="d-flex flex-column mb-3 toolbar">
			<div class="custom-control custom-switch">
				<input type="checkbox" class="custom-control-input" id="onlyPrivate" value="true" onchange="gdrive_files.reload()">
				<label class="custom-control-label" for="onlyPrivate">Show Private Files/Folders Only</label>
			</div>
			<div class="custom-control custom-switch">
				<input type="checkbox" class="custom-control-input" id="onlyFolder" value="true" onchange="gdrive_files.reload()">
				<label class="custom-control-label" for="onlyFolder">Show Folders Only</label>
			</div>
		</div>
		<table id="tbGDFiles" aria-label="Google Drive Files" class="table table-striped table-bordered table-hover table-sm m-0" style="width:100%">
			<thead>
				<tr>
					<th scope="col" style="width:60px;max-width:60px">
						<div class="custom-control custom-checkbox mx-auto">
							<input type="checkbox" class="custom-control-input" id="ckAllGDF">
							<label class="custom-control-label" for="ckAllGDF"></label>
						</div>
					</th>
					<th scope="col">Title</th>
					<th scope="col">Description</th>
					<th scope="col">Shared</th>
					<th scope="col">Modified</th>
					<th scope="col" style="width:100px">Actions</th>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<th scope="col" style="width:60px;max-width:60px">
						<div class="custom-control custom-checkbox mx-auto">
							<input type="checkbox" class="custom-control-input" id="ckAllGDF1">
							<label class="custom-control-label" for="ckAllGDF1"></label>
						</div>
					</th>
					<th scope="col">Title</th>
					<th scope="col">Description</th>
					<th scope="col">Shared</th>
					<th scope="col">Modified</th>
					<th scope="col" style="width:100px">Actions</th>
				</tr>
			</tfoot>
		</table>
	</div>
</div>
