{% extends "layout.html" %}
{% block container %}
          {% if auth_type_2 == 'dmk' %}
          <div class="card" id="data-el-4">
            <div id="tgr-list" class="card-body ov-auto">
		    <h5 class="card-title">Available TGR's</h5>
	      {% for tgr_name, tgr_ip in sg_status['tgr'].items() %}
              <div class="row" style="margin-top: 2px; margin-left: 15px">
		      <input name="tgr_name" class="chkbox" type="checkbox" value="{{tgr_name}}">
		      <span class="tgr-col" style="margin-left: 5px; width: 200px;"> {{tgr_name}}</span>
		      <span class="tgr-col">{{tgr_ip}} (<span id="{{tgr_name}}_status">Checking...</span>)</span>
              </div>
	      {% endfor %}
              <div class="row" style="margin-top: 25px">
                <div class="col"><input id="tgr-did" class="form-control" type="text" placeholder="Data Admin-ID"></div>
                <div class="col"><input id="tgr-dmk" class="form-control" type="password" placeholder="DMK"</div>
              </div>
              <div class="input-group" style="margin-top: 10px">
                <input type="text" class="form-control" readonly>
                <div class="input-group-append">
			      <button id="status" class="btn btn-dark text-white" data-name="{{tgr_name}}">Status</button>
			      <button id="open" class="btn btn-secondary text-white">Open Vault</button>
			      <button id="close" class="btn btn-dark text-white">Close Vault</button>
			      <button id="push" class="btn btn-secondary text-white">Push Data</button>
                </div>
              </div>
              <div class="input-group" style="margin-top: 10px">
		<div id="tgr_list_status" class="form-control scroll-x"></div>
	      </div>
	    </div>
          </div>
          <div class="card" id="data-el-4">
            <div class="card-body ov-auto">
	      <h5 class="card-title">Add New TGR</h5>
              <form id="upload_form" action="/tgr/add" method="post">
              <div class="row" style="margin-top: 25px">
                <div class="col"><input class="form-control" type="text" placeholder="Name" id="tgr_name" name="tgr_name"></div>
                <div class="col"><input class="form-control" type="text" placeholder="IP Address" id="tgr_ip" name="tgr_ip"></div>
              </div>
              <div class="row" style="margin-top: 25px">
                <div class="col"><input class="form-control" type="text" placeholder="Data Admin-ID" id="did" name="did"></div>
                <div class="col"><input class="form-control" type="password" placeholder="DMK" id="dmk" name="dmk"></div>
              </div>
              <div class="input-group" style="margin-top: 10px">
                <input type="text" class="form-control" placeholder="{{ command_status['add_tgr_status'] }}" readonly>
                <div class="input-group-append">
                  <input type="submit" class="btn btn-dark text-white" value="Configure">
                </div>
              </div>
	      </form>
	    </div>
          </div>
          <div class="card" id="data-el-4">
            <div class="card-body ov-auto">
	      <h5 class="card-title">Delete TGR</h5>
              <form id="upload_form" action="/tgr/delete" method="post">
              <div class="row" style="margin-top: 25px">
                <div class="col"><input class="form-control" type="text" placeholder="Name" id="tgr_name" name="tgr_name"></div>
                <div class="col"><input class="form-control" type="text" placeholder="IP Address" id="tgr_ip" name="tgr_ip"></div>
              </div>
              <div class="row" style="margin-top: 25px">
                <div class="col"><input class="form-control" type="text" placeholder="Data Admin-ID" id="did" name="did"></div>
                <div class="col"><input class="form-control" type="password" placeholder="DMK" id="dmk" name="dmk"></div>
              </div>
              <div class="input-group" style="margin-top: 10px">
                <input type="text" class="form-control" placeholder="{{ command_status['delete_tgr_status'] }}" readonly>
                <div class="input-group-append">
                  <input type="submit" class="btn btn-dark text-white" value="Delete">
                </div>
              </div>
	      </form>
	    </div>
          </div>
          <div class="card" id="data-el-4">
            <div class="card-body ov-auto">
	      <h5 class="card-title">Public key</h5>
              <form id="form">
              <div class="row" style="margin-top: 25px">
		      <div class="col"><textarea rows="10" class="form-control" readonly>{{ sg_status['public_key'] }}</textarea>
              </div>
	      </form>
	    </div>
          </div>
          {% endif %}
<script>
$(function(){
	var auth = {};
	$('input:checkbox[name="tgr_name"]').each(function() {
		check_status($(this).val());
	});

	function check_dmk() {
		auth = { did: $('#tgr-did').val(), dmk: $('#tgr-dmk').val() };
		$('#tgr-did').val('');
		$('#tgr-dmk').val('');
		var res = {};
		$.ajax({
			url: "/tgr/check_dmk",
			type: "POST",
			data: JSON.stringify(auth),
			contentType: "application/json",
			success: function(result) {
				res = result;
			},
			async: false
		});
		return res;
	}

	function manage_vault(tgr_name, command) {
		data = {
			did: auth['did'],
			dmk: auth['dmk'],
	       		tgr_name: tgr_name,
			command: command
		};
		if (command == 'push') {
			url = '/tgr/remote-download-from-bucket';
		} else {
			url = '/tgr/manage_vault';
		}
		$.ajax({
			url: url,
			type: "POST",
			data: JSON.stringify(data),
			contentType: "application/json",
			success: function(data) {
				check_status(tgr_name);
			}
		});
	}

	function check_status(tgr_name) {
		$('#' + tgr_name + '_status').text('Checking...');
		$.getJSON('/tgr/status?name=' + tgr_name, function(data) {
			$('#' + tgr_name + '_status').html(data['status_html']);
			if (data['status'] == 'open') {
			} else {
			}
		});
	}
	$('#status').click(function(){
		$('input:checkbox[name="tgr_name"]:checked').each(function() {
			check_status($(this).val());
		});
	});
	$('#open').click(function(){
		$('#tgr_list_status').text('Authentication...');
		res = check_dmk();
		if (res['result'] == 'OK') {
			$('#tgr_list_status').text('Authentication...Done.');
			data = { did: auth['did'], dmk: auth['dmk'] };
			$('input:checkbox[name="tgr_name"]:checked').each(function() {
				tgr_name = $(this).val();
				$('#' + tgr_name + '_status').text('Opening vault...');
				data['tgr_name'] = tgr_name;
				manage_vault(tgr_name, 'open');
			});
		} else {
			$('#tgr_list_status').text('Authentication...Failed.');
		}
	});
	$('#close').click(function(){
		$('#tgr_list_status').text('Authentication...');
		res = check_dmk();
		if (res['result'] == 'OK') {
			$('#tgr_list_status').text('Authentication...Done.');
			data = { did: auth['did'], dmk: auth['dmk'] };
			$('input:checkbox[name="tgr_name"]:checked').each(function() {
				tgr_name = $(this).val();
				$('#' + tgr_name + '_status').text('Closing vault...');
				data['tgr_name'] = tgr_name;
				manage_vault(tgr_name, 'close');
			});
		} else {
			$('#tgr_list_status').text('Authentication...Failed.');
		}
	});
	$('#push').click(function(){
		$('#tgr_list_status').text('Authentication...');
		res = check_dmk();
		$('#tgr_list_status').text(res['message']);
		if (res['result'] == 'OK') {
			$('#tgr_list_status').text('Authentication...Done.');
			data = { did: auth['did'], dmk: auth['dmk'] };
			count = 0;
			$('input:checkbox[name="tgr_name"]:checked').each(function() {
				tgr_name = $(this).val();
				$('#' + tgr_name + '_status').text('Pushing data...');
				data['tgr_name'] = tgr_name;
				manage_vault(tgr_name, 'push');
				count = count + 1;
			});
			if (count == 0) {
				$('#tgr_list_status').text('No TGR selected!');
			} else {
				$('#tgr_list_status').text('Pushed data for ' + count + ' TGR(s)');
			}
		} else {
			$('#tgr_list_status').text('Authentication...Failed.');
		}
	});
});
</script>
{% endblock %}