<!DOCTYPE html>
<html lang="en">
<head>
    <title>{{.ServiceName}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="/assets/style.css">
    <script>
        window.addEventListener("load", function () {
            selectText("app-secret");
        });

        // Thanks again: https://stackoverflow.com/a/987376
        function selectText(nodeId) {
            const node = document.getElementById(nodeId);

            if (document.body.createTextRange) {
                const range = document.body.createTextRange();
                range.moveToElementText(node);
                range.select();
            } else if (window.getSelection) {
                const selection = window.getSelection();
                const range = document.createRange();
                range.selectNodeContents(node);
                selection.removeAllRanges();
                selection.addRange(range);
            } else {
                console.warn("Could not select text in node: Unsupported browser.");
            }
        }
    </script>
</head>
<body>
{{template "header.go.html" .}}
<main>
    <form method="GET" action="/">
        <button type="submit">Home</button>
    </form>

    {{if .NewAppSecret}}
        <div>New application secret: <span id="app-secret">{{.NewAppSecret}}</span> for {{.NewAppName}}</div>
    {{end}}

    <h2>Manage Client Applications</h2>
    <form method="GET" action="/manage/apps/create">
        <button type="submit">New Client Application</button>
    </form>
    {{if eq (len .Apps) 0}}
        <div>No client applications found</div>
    {{else}}
        <table>
            <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Domain</th>
                <th>Perms</th>
                <th>SSO</th>
                <th>Active</th>
                <th>Owner</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
            {{range .Apps}}
                <tr>
                    <td>{{.Subject}}</td>
                    <td>{{.Name}}</td>
                    <td>{{.Domain}}</td>
                    <td>{{.Perms}}</td>
                    <td>{{.Sso}}</td>
                    <td>{{.Active}}</td>
                    <td>{{.Owner}}</td>
                    <td>
                        <form method="GET" action="/manage/apps">
                            <input type="hidden" name="offset" value="{{$.Offset}}"/>
                            <input type="hidden" name="edit" value="{{.Subject}}"/>
                            <button type="submit">Edit</button>
                        </form>
                        <form method="POST" action="/manage/apps?offset={{$.Offset}}">
                            <input type="hidden" name="action" value="secret"/>
                            <input type="hidden" name="offset" value="{{$.Offset}}"/>
                            <input type="hidden" name="subject" value="{{.Subject}}"/>
                            <button type="submit">Reset Secret</button>
                        </form>
                    </td>
                </tr>
            {{end}}
            </tbody>
        </table>
    {{end}}
</main>
</body>
</html>
