{{ define "meta" }}
    <title>Certificate List</title>
{{ end}}

{{ define "content" }}
    <section class="content">
        <div class="section">
            <div class="container">
                <div class="columns">
                    <div class="column">
                        <h1 class="title">Certificates for {{ .username }}:</h1>

                        <table class="table">
                            <thead>
                                <th>Device</th>
                                <th width="20%">Created</th>
                                <th width="20%" class="has-text-centered">Actions</th>
                            </thead>
                            <tfoot>
                                <form action="/certs/new" method="POST">
                                    <th colspan="2">
                                        <div class="field has-addons">
                                            <p class="control is-marginless">
                                                <a class="button is-static">
                                                    {{ $.username }}@
                                                </a>
                                            </p>
                                            <p class="control is-marginless is-expanded">
                                                <input name="certname" class="input" type="text" placeholder="Certificate name (e.g. Laptop)">
                                            </p>
                                        </div>
                                    </th>
                                    <th>{{ .csrfField }}<input type="submit" class="button is-success is-fullwidth" value="Create"/></th>
                                </form>
                            </tfoot>
                            <tbody>
                            {{ range .Clients }}
                            <tr>
                                <td class="is-vcentered"><p>{{ .User }}@{{ .Name }}</p></td>
                                <td><time title="{{ .CreatedAt.UTC }}">{{ .CreatedAt | humanDate }}</time></td>
                                <td>
                                <div class="field has-addons">
                                    <p class="control is-marginless is-expanded">
                                        <a href="/certs/download/{{ .Name }}" class="button is-primary is-fullwidth">Download</a>
                                    </p>
                                    <div class="control is-marginless">
                                        <form action="/certs/delete/{{ .Name }}" method="POST">
                                            {{ $.csrfField }}
                                            <button class="button is-danger" type="submit">
                                                <span class="icon is-small">
                                                    <i class="fas fa-trash"></i>
                                                </span>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                                </td>
                            </tr>
                            {{ end }}
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </section>
{{ end}}