{{ template "header" . }}

	<div >

		<!-- <h1>services</h1> -->

		<table data-toggle="table" class="table">
			<thead>
				<tr>
					<th data-sortable="true" scope="col" width="5%">Index</th>
					<th data-sortable="true" scope="col">Filename</th>
					<th data-sortable="true" scope="col">URL</th>
					<th data-sortable="true" scope="col">Status</th>
					<th scope="col">Actions</th>
					<th data-sortable="true" scope="col">Progress</th>
				</tr>
			</thead>
			<tbody id="table">

				{{ range $idx, $request := .Queue }}
				<tr class="download">
					<th scope="row">{{ $idx }}</th>
					<td class="lastlog">
						{{ printf "%s/%s" $request.Subdir $request.Filename }}
					</td>
					<td>
						{{ $request.URL }}
					</td>
					<td>
						{{ printf "%v" $request.Status }}
						{{ if $request.Error }}
							{{ $request.Error }}
						{{ end }}
					</td>
					<td class="dropdown">
						<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Actions</button>
						<div class="dropdown-menu">
							<a class="dropdown-item" href="#" onclick="if (confirm('confirm deletion of ' + {{ printf "%s/%s" $request.Subdir $request.Filename }})) { deleteDownload([{index: {{ $idx }} }])}">Delete</a>
							<a class="dropdown-item" href="#" onclick='setDownload([{ index: {{ $idx }}, status: "Queue", priority: {{ $request.Priority }} }])'>Resume</a>
							<a class="dropdown-item" href="#" onclick='setDownload([{ index: {{ $idx }}, status: "Stop", priority: {{ $request.Priority | js}} }])'>Stop</a>
							<a class="dropdown-item" href="/get/{{ printf "%s/%s" $request.Subdir $request.Filename }}">Retrieve</a>
						</div>
					</td>
					<td>
						<div class="progress">
							<div id="progress-{{ $idx }}" class="progress-bar text-dark" style="width: 0{{ $request.Progress }}%">0{{ $request.Progress }}%</div>
						</div>
					</td>
				</tr>
				{{ end }}
			</tbody>
		</table>

	</div>

<script src="/downloads.js"></script>
<script type="text/javascript">
	function setDownloads() {
		var xhr = new XMLHttpRequest();
		xhr.open("GET", "http://gloader.narnian.us:8844/queued");
		xhr.setRequestHeader("Accept", "application/javascript");
		xhr.onload = evt => {
			updateDownloads(JSON.parse(evt.target.responseText));
		};
		xhr.send();
	}
	var interval = setInterval(setDownloads, 5 * 1000)
</script>

{{ template "footer" . }}