<html>

{% include "header.html" %}

<body>
	{% include "navbar.html" %}
	<div class="container-fluid">
		{% include "sidebar.html" %}
		<div id="config_body">

		</div>
	</div>
	<div class="modal fade" id="add_modal" data-backdrop="static" data-keyboard="false" tabindex="-1"
		aria-labelledby="staticBackdropLabel" aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="staticBackdropLabel">Add a new peer</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 id="add_peer_alert" class="alert alert-danger alert-dismissible fade show d-none" role="alert">
						<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						  <span aria-hidden="true">&times;</span>
						</button>
					</div>
					<form>
						<div class="form-group">
							<label for="public_key">Public Key</label>
							<input type="text" class="form-control" id="public_key" aria-describedby="public_key">
						</div>
						<div class="form-group">
							<label for="allowed_ips">Allowed IPs</label>
							<input type="text" class="form-control" id="allowed_ips">
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
					<button type="button" class="btn btn-primary" id="save_peer" conf_id={{conf_data['name']}}>Save</button>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="delete_modal" data-backdrop="static" data-keyboard="false" tabindex="-1"
		aria-labelledby="staticBackdropLabel" aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="staticBackdropLabel">Are you sure to delete this peer?</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 id="remove_peer_alert" class="alert alert-danger alert-dismissible fade show d-none" role="alert">
						<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						  <span aria-hidden="true">&times;</span>
						</button>
					</div>
					<h6>This action is not reversible.</h6>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
					<button type="button" class="btn btn-danger" id="delete_peer" conf_id={{conf_data['name']}} peer_id="">Yes</button>
				</div>
			</div>
		</div>
	</div>

    <div class="modal fade" id="setting_modal" data-backdrop="static" data-keyboard="false" tabindex="-1"
		aria-labelledby="staticBackdropLabel" aria-hidden="true" conf_id={{conf_data['name']}} peer_id="">
		<div class="modal-dialog modal-dialog-centered">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="peer_name"></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-3">
                      <label for="peer_name" class="form-label">Name</label>
                      <input type="text" class="form-control" id="peer_name_textbox" placeholder="">
                    </div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
					<button type="button" class="btn btn-primary" id="save_peer_name" conf_id={{conf_data['name']}} peer_id="">Save</button>
				</div>
			</div>
		</div>
	</div>

    <div class="position-fixed top-0 right-0 p-3" style="z-index: 5; right: 0; top: 50px;">
          <div id="alertToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
            <div class="toast-header">
                  <strong class="mr-auto">Wireguard Dashboard</strong>
                  <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
            </div>
            <div class="toast-body">
            </div>
          </div>
    </div>
</body>
{% include "footer.html" %}
<script>
    $(".sb-{{conf_data['name']}}-url").addClass("active");


	function load_data(){
		$.ajax({
			method: "GET",
			url: "/get_config/"+"{{conf_data['name']}}",
			headers:{
				"Content-Type": "application/json"
			},
			async:false,
			success: function (response){
				$("#config_body").html(response);
			}
		})
	}
	$(document).ready(function(){
		load_data();
		setInterval(function(){
			load_data();
		}, 15000)
	});
</script>
<script>
    $("body").on("click", ".switch", function (){
        $(this).siblings($(".spinner-border")).css("display", "inline-block");
         $(this).remove()
       location.replace("/switch/"+$(this).attr('id'));
    })

	$("#save_peer").click(function(){
		if ($("#allowed_ips") != "" && $("#public_key") != ""){
			var conf = $(this).attr('conf_id')
			$.ajax({
				method: "POST",
				url: "/add_peer/"+conf,
				headers:{
					"Content-Type": "application/json"
				},
				data: JSON.stringify({"public_key":$("#public_key").val(), "allowed_ips": $("#allowed_ips").val()}),
				success: function (response){
					if(response != "true"){
						$("#add_peer_alert").html(response+$("#add_peer_alert").html());
						$("#add_peer_alert").removeClass("d-none");
					}
					else{
						location.reload();
					}
				}
			})
		}
	})

    $("body").on("click", ".btn-delete-peer", function(){
        var peer_id = $(this).attr("id");
		$("#delete_peer").attr("peer_id", peer_id);
    })

	$(".btn-delete-peer").click(function(){

	});

	$("#delete_peer").click(function(){
		var peer_id = $(this).attr("peer_id");
		var config = $(this).attr("conf_id");
		$.ajax({
			method: "POST",
			url: "/remove_peer/"+config,
			headers:{
				"Content-Type": "application/json"
			},
			data: JSON.stringify({"action": "delete", "peer_id": peer_id}),
			success: function (response){
				if(response != "true"){
						$("#remove_peer_alert").html(response+$("#add_peer_alert").html());
						$("#remove_peer_alert").removeClass("d-none");
					}
					else{
						location.reload();
					}
			}
		})
	});



	var myModal = new bootstrap.Modal(document.getElementById('setting_modal'), {
        keyboard: false
    })
	$("body").on("click", ".btn-setting-peer", function(){
        myModal.toggle();
        var peer_id = $(this).attr("id");
		$("#save_peer_name").attr("peer_id", peer_id);
        $.ajax({
            method: "POST",
            url: "/get_peer_name/"+$("#setting_modal").attr("conf_id"),
            headers:{
				"Content-Type": "application/json"
			},
			data: JSON.stringify({"id": peer_id}),
            success: function(response){
                if (response == ""){
                    $("#setting_modal .peer_name").html("Untitled Peer");
                    $("#peer_name_textbox").val("")
                }else{
                    $("#setting_modal .peer_name").html(response);
                    $("#peer_name_textbox").val(response)
                }
            }
        })
    });


	$("#save_peer_name").click(function (){
	    var peer_id = $(this).attr("peer_id");
	    $.ajax({
            method: "POST",
            url: "/save_peer_name/"+"{{conf_data['name']}}",
            headers:{
				"Content-Type": "application/json"
			},
            data: JSON.stringify({id: peer_id, name: $("#peer_name_textbox").val()}),
            success: function (response){
                myModal.toggle();
                load_data();
                $('#alertToast').toast('show');
                $('#alertToast .toast-body').html("Name Saved!");
            }
        })
    })


</script>
</html>	