<!-- configuration.html - < WGDashboard > - Copyright(C) 2021 Donald Zou [https://github.com/donaldzou]-->
<html lang="en">
{% with title=title%}
    {% include "header.html"%}
{% endwith %}
<body>
    <div class="no-response">
        <div class="container">
            <h1 class="text-white display-1"><i class="bi bi-emoji-frown-fill"></i></h1>
            <h4 class="text-white">Oops!<br>I can't connect to the server.</h4>
        </div>
    </div>
	{% include "navbar.html" %}
	<div class="container-fluid" id="right_body">
		{% include "sidebar.html" %}
        <div class="col-md-9 ml-sm-auto col-lg-10 px-md-4 mt-4 mb-4">
            <div class="form-group">
                <input type="text" class="form-control" id="search_peer_textbox" placeholder="Search Peer..." value="">
            </div>
        </div>
		<div id="config_body">
            <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4 mt-4 mb-4">
                <div class="info mt-4">
                    <div id="config_info_alert"></div>
                    <div class="row">
                        <div class="col">
                            <small class="text-muted"><strong>CONFIGURATION</strong></small>
                            <h1 class="mb-3"><samp id="conf_name">{{ title }}</samp></h1>
                        </div>
                        <div class="col">
                            <small class="text-muted"><strong>SWITCH</strong></small><br>
                            <div id="conf_status_btn" class="info_loading"></div>
                            <div class="spinner-border text-primary" role="status" style="display: none; margin-top: 10px">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                        <div class="w-100"></div>
                        <div class="col">
                            <small class="text-muted"><strong>STATUS</strong></small>
                            <h6 style="text-transform: uppercase;" id="conf_status" class="info_loading"></h6>
                        </div>
                        <div class="col">
                            <small class="text-muted"><strong>CONNECTED PEERS</strong></small>
                            <h6 style="text-transform: uppercase;" id="conf_connected_peers" class="info_loading"></h6>
                        </div>
                        <div class="col-sm">
                            <small class="text-muted"><strong>TOTAL DATA USAGE</strong></small>
                            <h6 style="text-transform: uppercase;" id="conf_total_data_usage" class="info_loading"></h6>
                        </div>
                        <div class="col-sm">
                            <small class="text-muted"><strong>TOTAL RECEIVED</strong></small>
                            <h6 style="text-transform: uppercase;" id="conf_total_data_received" class="info_loading"></h6>
                        </div>
                        <div class="col-sm">
                            <small class="text-muted"><strong>TOTAL SENT</strong></small>
                            <h6 style="text-transform: uppercase;" id="conf_total_data_sent" class="info_loading"></h6>
                        </div>
                        <div class="w-100"></div>
                        <div class="col-sm">
                            <small class="text-muted">
                                <strong>PUBLIC KEY</strong>
                                <strong style="margin-left: auto!important; opacity: 0; transition: 0.2s ease-in-out" class="text-primary">CLICK TO COPY</strong>
                            </small>
                            <h6 class="info_loading"><samp class="key" id="conf_public_key"></samp></h6>
                        </div>
                        <div class="col-sm">
                            <small class="text-muted"><strong>LISTEN PORT</strong></small>
                            <h6 style="text-transform: uppercase;" class="info_loading"><samp id="conf_listen_port"></samp></h6>
                        </div>
                         <div class="col-sm">
                            <small class="text-muted"><strong>ADDRESS</strong></small>
                            <h6 style="text-transform: uppercase;" class="info_loading"><samp id="conf_address"></samp></h6>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="button-div mb-3">
                    <div class="row">
                        <div class="col-sm">
                             <div class="form-group">
                                <label for="sort_by_dropdown"><small class="text-muted">Sort Peers By</small></label>
                                <select class="form-control" id="sort_by_dropdown">
                                    <option value="status">Status</option>
                                    <option value="name">Name</option>
                                    <option value="allowed_ip">Allowed IP</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm">
                            <div class="form-group">
                                <label><small class="text-muted">Refresh Interval</small></label><br>
                                <div class="btn-group interval-btn-group" role="group" style="width: 100%">
                                    <button style="width: 20%" type="button" class="btn btn-outline-primary btn-group-label refresh" data-toggle="tooltip" data-placement="bottom" title="Refresh Peers"><i class="bi bi-arrow-repeat"></i></button>
                                    <button style="width: 20%" type="button" class="btn btn-outline-primary update_interval" data-refresh-interval="5000">5s</button>
                                    <button style="width: 20%" type="button" class="btn btn-outline-primary update_interval" data-refresh-interval="10000">10s</button>
                                    <button style="width: 20%" type="button" class="btn btn-outline-primary update_interval" data-refresh-interval="30000">30s</button>
                                    <button style="width: 20%" type="button" class="btn btn-outline-primary update_interval" data-refresh-interval="60000">1m</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm">
                            <div class="form-group">
                                <label><small class="text-muted">Display Mode</small></label><br>
                                <div class="btn-group display-btn-group" role="group" style="width: 100%">
                                    <button style="width: 20%" type="button" class="btn btn-outline-primary display_mode" data-display-mode="grid"><i class="bi bi-grid-fill" style="font-size: 1.5rem;"></i></button>
                                    <button style="width: 20%" type="button" class="btn btn-outline-primary display_mode" data-display-mode="list"><i class="bi bi-list" style="font-size: 1.5rem;"></i></button>
                                </div>
                            </div>
                        </div>
                        <div class="btn-manage-group">
                            <button type="button" class="btn btn-primary add_btn"><i class="bi bi-plus-circle-fill" style=""></i></button>
                            <button type="button" class="btn btn-secondary setting_btn"><i class="bi bi-three-dots"></i></button>
                            <div class="setting_btn_menu">
                                <a class="text-danger" id="delete_peers_by_bulk_btn"><i class="bi bi-trash-fill"></i> Delete Peers</a>
                                <a class="text-info" id="download_all_peers" data-url="/download_all/{{conf_data['name']}}"><i class="bi bi-cloud-download-fill"></i> Download All Peers</a>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="row peer_list"></div>
                <small id="peer_loading_time" class="text-muted"></small>
            </main>
        </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 modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="staticBackdropLabel">Add 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>
                        <div class="custom-control custom-switch" style="margin-bottom: 1rem">
                            <input class="custom-control-input" type="checkbox" id="bulk_add">
                            <label class="custom-control-label" for="bulk_add"><strong>Add Peers by bulk</strong></label>
                            <i class="bi bi-question-circle-fill" style="cursor: pointer" data-container="body" data-toggle="popover" data-placement="right" data-trigger="click" data-content="By adding peers by bulk, each peer's name will be auto generated, and Allowed IP will be assign to the next available IP."></i>
                        </div>
                        <div class="form-group" style="margin: 0">
                            <input type="number" class="form-control" id="new_add_amount" min="1" placeholder="Amount" disabled>
                            <div id="bulk_amount_validation" class="invalid-feedback"></div>
                        </div>

                    </div>
                    <hr>
					<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 id="add_peer_form">
                        <div class="form-group non-bulk">
                            <div>
                                <label for="private_key">Private Key</label>
                            </div>
                            <div class="input-group">
                                <input type="text" class="form-control" id="private_key" aria-describedby="private_key">
                                <div class="input-group-append">
                                   <button type="button" class="btn btn-danger" id="re_generate_key" data-toggle="tooltip" data-placement="top" title="Regenerate Key"><i class="bi bi-arrow-repeat"></i></button>
                                </div>
                            </div>
                        </div>
						<div class="form-group non-bulk">
							<label for="public_key">Public Key <code>(Required)</code></label>
							<input type="text" class="form-control" id="public_key" aria-describedby="public_key" disabled>
						</div>
                        <div class="row">
                            <div class="col-sm-6 non-bulk">
                                 <div class="form-group">
                                    <label for="new_add_name">Name</label>
                                    <input type="text" class="form-control" id="new_add_name">
                                </div>
                            </div>
                            <div class="col-sm-6 non-bulk">
                                <div class="form-group">
                                    <label for="allowed_ips">Allowed IPs <code>(Required)</code></label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="allowed_ips">
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-primary" id="search_available_ip" data-toggle="tooltip" data-placement="top" title="Search Available IPs">
                                                <i class="bi bi-search"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <p style="position: absolute; top: 4px; right: 1rem;" class="text-success" id="allowed_ips_indicator"></p>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                 <div class="form-group">
                                    <label for="new_add_DNS">DNS <code>(Required)</code></label>
                                    <input type="text" class="form-control" id="new_add_DNS" value="{{ DNS }}">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                 <div class="form-group">
                                    <label for="new_add_endpoint_allowed_ip">Endpoint Allowed IPs <code>(Required)</code></label>
                                    <input type="text" class="form-control" id="new_add_endpoint_allowed_ip" value="{{ endpoint_allowed_ip }}">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                 <div class="form-group">
                                    <label for="new_add_MTU">MTU</label>
                                    <input type="text" class="form-control" id="new_add_MTU" value="{{ mtu }}">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                 <div class="form-group">
                                    <label for="new_add_keep_alive">Persistent keepalive</label>
                                    <input type="text" class="form-control" id="new_add_keep_alive" value="{{ keep_alive }}">
                                 </div>
                            </div>
                            <div class="col-sm">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="enable_preshare_key" name="enable_preshare_key" value="enable_psk">
                                    <label class="form-check-label" for="enable_preshare_key">Use Pre-shared Key</label>
                                </div>
                            </div>
                        </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']}}>Add</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 style="margin: 0">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 modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title 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 id="setting_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>
                    <div class="mb-3">
                        <label for="peer_private_key_textbox" class="form-label">Private Key <code>(Required for QR Code and download)</code></label>
                        <input type="password" class="form-control" id="peer_private_key_textbox" style="padding-right: 40px">
                        <a class="peer_private_key_textbox_switch"><i class="bi bi-eye-fill"></i></a>
                    </div>
                    <div>
                        <label for="peer_preshared_key_textbox" class="form-label">Pre-Shared Key</label>
                        <input type="text" class="form-control" id="peer_preshared_key_textbox">
                    </div>
                    <hr>

                    <div class="row">
                        <div class="col-sm-6">
                            <div class="mb-3">
                              <label for="peer_name_textbox" class="form-label">Name</label>
                              <input type="text" class="form-control" id="peer_name_textbox" placeholder="">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="mb-3">
                              <label for="peer_allowed_ip_textbox" class="form-label">Allowed IPs <code>(Required)</code></label>
                              <input type="text" class="form-control" id="peer_allowed_ip_textbox">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="mb-3">
                              <label for="peer_DNS_textbox" class="form-label">DNS <code>(Required)</code></label>
                              <input type="text" class="form-control" id="peer_DNS_textbox">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="mb-3">
                              <label for="peer_endpoint_allowed_ips" class="form-label">Endpoint Allowed IPs <code>(Required)</code></label>
                              <input type="text" class="form-control" id="peer_endpoint_allowed_ips">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="mb-3">
                              <label for="peer_mtu" class="form-label">MTU</label>
                              <input type="text" class="form-control" id="peer_mtu">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="mb-3">
                              <label for="peer_keep_alive" class="form-label">Persistent Keepalive</label>
                              <input type="text" class="form-control" id="peer_keep_alive">
                            </div>
                        </div>
                    </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_setting" conf_id={{conf_data['name']}} peer_id="">Save</button>
				</div>
			</div>
		</div>
	</div>
    <div class="modal fade" id="available_ip_modal" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
					<h5 class="modal-title" id="staticBackdropLabel">Select available IP</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
                <div class="selected_ip" style="padding: 1rem; border-bottom: 1px solid #dee2e6;">
                        <small class="text-muted"><strong>SELECTED IP (CLICK TO REMOVE)</strong></small>
                        <div id="selected_ip_list"></div>
                </div>
                <div class="modal-body" style="max-height: 400px; overflow-y: scroll;">
                    <div class="list-group"></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="confirm_ip">Confirm</button>
				</div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="delete_bulk_modal" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
					<h5 class="modal-title" id="staticBackdropLabel">Select Peers to Delete</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
                <div id="bulk_remove_peer_alert" class="alert alert-danger alert-dismissible fade show d-none" role="alert" style="margin: 1rem">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="selected_peers" style="padding: 1rem; border-bottom: 1px solid #dee2e6;">
                        <small class="text-muted"><strong>SELECTED PEERS (CLICK TO REMOVE)</strong></small>
                        <div id="selected_peer_list"></div>
                </div>
                <div class="modal-body" style="max-height: 400px; overflow-y: scroll;">
                    <div class="list-group"></div>
                </div>
                <div class="modal-footer">
                    <a class="text-danger" id="select_all_delete_bulk_peers" style="cursor: pointer; margin-right: auto;"><small><strong>SELECT ALL</strong></small></a>
					<button type="button" class="btn btn-danger" id="confirm_delete_bulk_peers" disabled data-conf="{{conf_data['name']}}">Delete</button>
				</div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="qrcode_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">QR Code</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
                    <img id="qrcode_img" style="width: 100%">
				</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">WGDashboard</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>
    {% include "tools.html" %}
</body>
{% include "footer.html" %}
<script src="{{ url_for('static',filename='js/wireguard.min.js') }}"></script>
<script src="{{ url_for('static',filename='js/configuration.min.js') }}"></script>
<script>
    /* global peers */
    let load_timeout;
    let load_interval = 0;
    let conf_name = "{{ conf_data['name'] }}"
    let peers = [];
    $(".sb-"+conf_name+"-url").addClass("active");
	$(function(){
		configurations.loadPeers($('#search_peer_textbox').val());
	});
</script>
</html>	