{% include templates.backend_header %}
<div class="row pt-3 mt-5">
	<div class="col-12">
		<h1 class="h4 mb-3">{{ title }}</h1>
		{# Plugin Widget Slot: page top #}
		{{ render_slot('backend.plugins.list.top') }}
		<div class="toolbar d-flex flex-wrap mb-3 toolbar">
			<button class="btn btn-success" data-toggle="modal" data-target="#mdInstallPlugin">
				<em class="fas fa-box mr-2"></em>Install
			</button>
			<button type="button" class="btn btn-info" onclick="gdplayer_plugins.reload()">
				<em class="fas fa-sync-alt mr-2"></em>Reload
			</button>
		</div>
		<table id="tbPlugins" class="table table-striped table-bordered table-hover m-0 w-100" aria-label="Plugin List">
			<thead>
				<tr>
					<th scope="col" data-priority="1">Name</th>
					<th scope="col" data-priority="3">Status</th>
					<th scope="col" data-priority="4">Created At</th>
					<th scope="col" data-priority="5">Updated At</th>
					<th scope="col" data-priority="2">Actions</th>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<th scope="col" data-priority="1">Name</th>
					<th scope="col" data-priority="3">Status</th>
					<th scope="col" data-priority="4">Created At</th>
					<th scope="col" data-priority="5">Updated At</th>
					<th scope="col" data-priority="2">Actions</th>
				</tr>
			</tfoot>
		</table>
	</div>
</div>
<div class="modal fade" id="mdInstallPlugin" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="mdInstallPluginLabel" aria-hidden="true">
	<div class="modal-dialog">
		<form id="frmInstallPlugin" class="modal-content" method="post" enctype="multipart/form-data" class="needs-validation" novalidate>
			<div class="modal-header">
				<h5 class="modal-title" id="mdInstallPluginLabel">Install Plugin</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<div class="mb-0">
					<label for="pluginZipFile">Select Plugin Installation File (.zip)</label>
					<div class="custom-file">
						<input type="file" class="custom-file-input" id="pluginZipFile" name="pluginZipFile" accept=".zip" required>
						<label class="custom-file-label" for="pluginZipFile">Choose file (.zip)</label>
					</div>
				</div>
				<div class="progress mt-3 d-none" id="pluginUploadProgressContainer">
					<div id="pluginUploadProgressBar" class="progress-bar progress-bar-striped progress-bar-animated" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">75%</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
				<button type="submit" class="btn btn-primary">
					<i class="fas fa-box-open mr-2"></i> Install
				</button>
			</div>
		</form>
	</div>
</div>
{# Plugin Widget Slot: page bottom #}
{{ render_slot('backend.plugins.list.bottom') }}

{% include templates.backend_footer %}