{{ define "api" }}{{ template "header" . }}
<div class="row">
    <div class="col">
        <div id="container" class="card" style="width: 80%">
            <div class="card-body">
		<div class="container">
		  <div class="row mb-4">
		    <div class="col">
		    </div>
		    <div class="col text-center">
		      <h3 class="card-title mb-0">API Keys</h3>
		    </div>
		    <div class="col text-end">
		      <button id="button-newapi" class="btn btn-outline-light" onclick="newApiKey()">
                    <i class="bi bi-plus-circle-fill"></i>
                </button>
		    </div>
		  </div>
		</div>
		
                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>
{{ if .ActiveUser.HasPermissionManageApi }}
            			<th scope="col">User</th>
{{ end }}
                                <th scope="col">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="apitable">
{{ range .ApiKeys }}
                            <tr id="row-{{ .PublicId }}">
                                <td id="friendlyname-{{ .PublicId }}" onClick="addFriendlyNameChange('{{ .PublicId }}')">{{ .FriendlyName }}</td>
                                <td><div class="font-monospace">{{ .GetRedactedId }}</div></td>
                                <td>{{ .GetReadableDate }}</td>
                                            <td class="prevent-select">
						<i id="perm_view_{{ .PublicId }}" class="bi bi-eye {{if not .HasPermissionView}}perm-notgranted{{else}}perm-granted{{end}}" title="List Uploads" onclick='changeApiPermission("{{ .PublicId }}","PERM_VIEW", "perm_view_{{ .PublicId }}");'></i>
						<i id="perm_upload_{{ .PublicId }}" class="bi bi-file-earmark-arrow-up {{if not .HasPermissionUpload}}perm-notgranted{{else}}perm-granted{{end}}" title="Upload" onclick='changeApiPermission("{{ .PublicId }}","PERM_UPLOAD", "perm_upload_{{ .PublicId }}");'></i>
						<i id="perm_edit_{{ .PublicId }}" class="bi bi-pencil {{if not .HasPermissionEdit}}perm-notgranted{{else}}perm-granted{{end}}" title="Edit Uploads" onclick='changeApiPermission("{{ .PublicId }}","PERM_EDIT", "perm_edit_{{ .PublicId }}");'></i>
						<i id="perm_delete_{{ .PublicId }}" class="bi bi-trash3 {{if not .HasPermissionDelete}}perm-notgranted{{else}}perm-granted{{end}}" title="Delete Uploads" onclick='changeApiPermission("{{ .PublicId }}","PERM_DELETE", "perm_delete_{{ .PublicId }}");'></i>
						
						<i id="perm_replace_{{ .PublicId }}" class="bi bi-recycle {{if not (index $.UserMap .UserId).HasPermissionReplace}}perm-unavailable perm-nochange{{ else }}{{if not .HasPermissionReplace}}perm-notgranted{{else}}perm-granted{{end}}{{end}}" title="Replace Uploads" onclick='changeApiPermission("{{ .PublicId }}","PERM_REPLACE", "perm_replace_{{ .PublicId }}");'></i>
						
						<i id="perm_users_{{ .PublicId }}" class="bi bi-people {{if not (index $.UserMap .UserId).HasPermissionManageUsers}}perm-unavailable perm-nochange{{ else }}{{if not .HasPermissionManageUsers}}perm-notgranted{{else}}perm-granted{{end}}{{end}}" title="Manage Users" onclick='changeApiPermission("{{ .PublicId }}","PERM_MANAGE_USERS", "perm_users_{{ .PublicId }}");'></i>
						
						<i id="perm_logs_{{ .PublicId }}" class="bi bi-card-list {{if not (index $.UserMap .UserId).HasPermissionManageLogs}}perm-unavailable perm-nochange{{ else }}{{if not .HasPermissionManageLogs}}perm-notgranted{{else}}perm-granted{{end}}{{end}}" title="Manage System Logs" onclick='changeApiPermission("{{ .PublicId }}","PERM_MANAGE_LOGS", "perm_logs_{{ .PublicId }}");'></i>
						
						<i id="perm_api_{{ .PublicId }}" class="bi bi-sliders2 {{if not .HasPermissionApiMod}}perm-notgranted{{else}}perm-granted{{end}}" title="Manage API Keys" onclick='changeApiPermission("{{ .PublicId }}","PERM_API_MOD", "perm_api_{{ .PublicId }}");'></i>
            				</td>
{{ if $.ActiveUser.HasPermissionManageApi }}
            			 <td>{{(index $.UserMap .UserId).Name}}</td>
{{ end }}
                                <td><button id="delete-{{ .PublicId }}" type="button" class="btn btn-outline-danger btn-sm" onclick="deleteApiKey('{{ .PublicId }}')" title="Delete"><i class="bi bi-trash3"></i></button></td>
                            </tr>
{{ end }}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
	<div id="toastnotification" class="toastnotification" data-default="API key copied to clipboard">Toast Text</div>
    </div>
</div>
<script src="./js/min/admin.min.{{ template "js_admin_version"}}.js"></script>
<script>
	var systemKey = "{{.SystemKey}}";
	var userName = "{{.ActiveUser.Name}}";
        var canViewOtherApiKeys = {{.ActiveUser.HasPermissionManageApi }};
        var canReplaceFiles = {{.ActiveUser.HasPermissionManageApi }};
        var canManageUsers = {{.ActiveUser.HasPermissionManageApi }};
</script>
{{ template "footer" true }}
{{ end }}
