<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>HTTP boot server</title>
    <link rel="stylesheet" href="/static/stylesheets/main.css">
    <script src="/static/scripts/index.js"></script>
</head>

<body>
    <div class="page-content">

        <div class="header-grid">

            <div class="stat-container container">
                <h2>{{len .Clients}} enrolled clients</h2>
            </div>

            <div class="title-container container">
                <h1>HTTP boot server admin page</h1>
            </div>

        </div>

        <div class="client-list-grid">
            {{range .Clients}}
            <div class="client-container container">
                <div class="client-header">
                    <span class="client-name">{{.Name}}</span>
                    <span class="client-uuid">{{.ID}}</span>
                </div>
                <div class="client-content">
                    <div class="client-boot-options">
                        {{$cid := .ID}}{{range .BootOptions}}
                        <div class="client-boot-option{{if .Selected}} selected{{end}}"
                            onclick="selectBootOption('{{$cid}}', '{{.ID}}')">
                            <div>
                                <span class="boot-option-name">{{.Name}}</span>
                                <span class="boot-option-uuid">{{.ID}}</span>
                            </div>
                            <div>
                                <span class="boot-option-path">{{.Path}}</span>
                            </div>
                        </div>
                        {{end}}
                    </div>
                </div>
            </div>
            {{end}}
        </div>

    </div>
</body>

</html>