<html>
	<head>
		<meta charset="UTF-8">
    	<title>3DPrinterOS Client</title>
		<link rel="stylesheet" type="text/css" href="/static/styles/style.css">
	</head>
	<body>
		<div align='right' style="align: right; color: #006666">!!!VERSION!!!</div>
		<div class="block1" style="width: 60%; margin:-160px 0 0 -30%;">
			<div class="block2">
				3DPrinterOS Client
			</div>
			<center>
			<div class="block3">
				<p>
					Network printers list
				</p>
				<table class="network_printers">
					<thead>
					<tr>
						<th style="width: 70%;"></th>
						<th style="width: 30%;"></th>
					</tr>
					</thead>
					<tbody id="printer_list">
					<tr id="empty_list" style="display: none;">
						<td colspan="2" style="width: 100%; text-align: center;">No printers</td>
					</tr>
					</tbody>
				</table>
				<input type="button" onclick="location.href='/'" value="Back" class="big_button">
			</div>
			</center>
		</div>
	<script src="/static/scripts/jquery-1.11.3.js"></script>

	<script type="text/javascript">
		$(function() {
			//Send request for network printers list
			$.ajax({
				'url': '/network_printers_list',
				'type': 'GET',
				'dataType': 'json',
				'success': function(response) {
					//Check printers count
					if (!response.length) {
						//show message - empty list
						$('#empty_list').show();
						return;
					}
					//Draw table with printers list
					var $tableBody = $('#printer_list');
					for (var i in response) {
						var printerName = response[i].profile.name != undefined ? response[i].profile.name : '';
						var $column = $('<tr>');
						$column.append('<td class="title">' + response[i].usb_info.IP + ' ' + printerName + '</td>');
						$column.append('<td class="action"><button class="small_button">Forget</button></td>');
						$column.find('button').data('usb_info', response[i].usb_info);
						$column.find('button').on('click', function() {
							forget_printer(this);
						});
						$tableBody.append($column);
					}
				}
			})
		});

		/**
		 * Send request to forget network printer
		 * @param {Element} buttonElement
         */
		function forget_printer(buttonElement) {
			$.ajax({
				'url': '/forget_network_printer',
				'type': 'POST',
				'data': {'usb_info': JSON.stringify($(buttonElement).data('usb_info'))},
				'success': function() {
					//Remove column with current printer
					$(buttonElement).closest('tr').remove();
					//Check printers count and show message if list is empty
					if ($('#printer_list').find('tr').length <= 1) {
						$('#empty_list').show();
					}
				}
			})
		}
	</script>

	</body>
</html>