{{ define "api" }}
{{ template "header" . }}
<div class="row">
    <div class="col">
        <div id="container" class="card" style="width: 80%">
            <div class="card-body">
                <h3 class="card-title">API Keys</h3>
                <br>
                Please visit the <a target="_blank" href="./apidocumentation">API documentation</a> for more information about the API.<br>Click on the API key name to give it a new name. Permissions can be changed by clicking on them.
                <br>
                <br>
                <div class="table-responsive">
                    <table class="table table-dark">
                        <thead>
                            <tr>
                                <th scope="col">Name</th>
                                <th scope="col">API Key</th>
                                <th scope="col">Last Used</th>
            			<th scope="col">Permissions</th>
                                <th scope="col">Actions</th>
				<th scope="col"><button type="button" class="btn btn-outline-light btn-sm" onclick="window.location='./apiNew'"><i class="bi bi-plus-circle-fill"></i> New Key</button></th>
                            </tr>
                        </thead>
                        <tbody>
{{ range .ApiKeys }}
                            <tr>
                                <td scope="col" id="{{ .Id }}" class="apiname">{{ .FriendlyName }}</td>
                                <td scope="col">{{ .Id }}</td>
                                <td scope="col">{{ .GetReadableDate }}</td>
                                            <td scope="col">
						<i id="perm_view_{{ .Id }}" class="bi bi-eye {{if not .HasPermissionView}}apiperm-notgranted{{else}}apiperm-granted{{end}}" title="List Uploads" onclick='changeApiPermission("{{ .Id }}","PERM_VIEW", "perm_view_{{ .Id }}");'></i>
						<i id="perm_upload_{{ .Id }}" class="bi bi-file-earmark-arrow-up {{if not .HasPermissionUpload}}apiperm-notgranted{{else}}apiperm-granted{{end}}" title="Upload" onclick='changeApiPermission("{{ .Id }}","PERM_UPLOAD", "perm_upload_{{ .Id }}");'></i>
						<i id="perm_edit_{{ .Id }}" class="bi bi-pencil {{if not .HasPermissionEdit}}apiperm-notgranted{{else}}apiperm-granted{{end}}" title="Edit Uploads" onclick='changeApiPermission("{{ .Id }}","PERM_EDIT", "perm_edit_{{ .Id }}");'></i>
						<i id="perm_delete_{{ .Id }}" class="bi bi-trash3 {{if not .HasPermissionDelete}}apiperm-notgranted{{else}}apiperm-granted{{end}}" title="Delete" onclick='changeApiPermission("{{ .Id }}","PERM_DELETE", "perm_delete_{{ .Id }}");'></i>
						<i id="perm_api_{{ .Id }}" class="bi bi-sliders2 {{if not .HasPermissionApiMod}}apiperm-notgranted{{else}}apiperm-granted{{end}}" title="Manage API Keys" onclick='changeApiPermission("{{ .Id }}","PERM_API_MOD", "perm_api_{{ .Id }}");'></i>

            				</td>
                                <td scope="col"><button type="button" data-clipboard-text="{{ .Id }}" title="Copy API Key" class="copyurl btn btn-outline-light btn-sm"><i class="bi bi-copy"></i></button> <button type="button" class="btn btn-outline-danger btn-sm" onclick="window.location='./apiDelete?id={{ .Id }}'" title="Delete"><i class="bi bi-trash3"></i></button></td>
 <td scope="col"></td>
                            </tr>
{{ end }}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="./js/min/admin.min.{{ template "js_admin_version"}}.js"></script>
<script>
	document.querySelectorAll(".apiname").forEach(function(node) {
	    node.onclick = function() {
		if (this.classList.contains("isBeingEdited"))
		    return;
		this.classList.add("isBeingEdited");
		var val = this.innerHTML;
		var input = document.createElement("input");
		input.size = 5;
		input.value = val;
		let row = this;
		let allowEdit = true;
		let submitEntry = function() {
		    if (!allowEdit)
			return;
		    allowEdit = false;
		    var val = input.value;
		    input.parentNode.innerHTML = val;
		    let xmlhttp = new XMLHttpRequest();
		    xmlhttp.open("GET", "./api/auth/friendlyname");
		    xmlhttp.setRequestHeader("apiKeyToModify", row.id);
		    xmlhttp.setRequestHeader("friendlyName", val);
		    xmlhttp.send();
		    row.classList.remove("isBeingEdited");

		    //xmlhttp.onreadystatechange = (e) => {
		    //}
		}
		input.onblur = submitEntry;
		input.addEventListener("keyup", function(event) {
		    //Enter
		    if (event.keyCode === 13) {
		        event.preventDefault();
		        submitEntry();
		    }
		});
		this.innerHTML = "";
		this.appendChild(input);
		input.focus();
	    }
	});
</script>
{{ template "footer" true }}
{{ end }}
