<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>{{ .Static.WebsiteTitle }} - Admin</title>
    <meta name="description" content="{{ .Static.WebsiteTitle }}">
    <link rel="stylesheet" href="/css/jquery-ui.min.css">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/fonts/fontawesome-all.min.css">
    <link rel="stylesheet" href="/css/bootstrap-tokenfield.min.css">
    <link rel="stylesheet" href="/css/tokenfield-typeahead.min.css">
    <link rel="stylesheet" href="/css/custom.css">
</head>

<body id="page-top" class="d-flex flex-column min-vh-100">
    {{template "prt_nav.html" .}}
    <div class="container mt-5">
        <h1>Create new clients</h1>
        <h2>Enter valid user email addresses to quickly create new accounts.</h2>
        {{template "prt_flashes.html" .}}
        <form method="post" enctype="multipart/form-data">
            <input type="hidden" name="_csrf" value="{{.Csrf}}">
            <div class="form-row">
                <div class="form-group required col-md-12">
                    <label for="inputEmail">Email Addresses</label>
                    <input type="text" name="email" class="form-control" id="inputEmail" value="{{.FormData.Emails}}" required>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group required col-md-12">
                    <label for="inputIdentifier">Client Friendly Name (will be added as suffix to the name of the user)</label>
                    <input type="text" name="identifier" class="form-control" id="inputIdentifier" value="{{.FormData.Identifier}}" required>
                </div>
            </div>

            <button type="submit" class="btn btn-primary">Create</button>
            <a href="/admin" class="btn btn-secondary">Cancel</a>
        </form>
    </div>
    {{template "prt_footer.html" .}}
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery.easing.js"></script>
    <script src="/js/popper.min.js"></script>
    <script src="/js/bootstrap.bundle.min.js"></script>
    <script src="/js/bootstrap-confirmation.min.js"></script>
    <script src="/js/bootstrap-tokenfield.min.js"></script>
    <script src="/js/custom.js"></script>
    <script>$('#inputEmail').on('tokenfield:createdtoken', function (e) {
            // Über-simplistic e-mail validation
            var re = /\S+@\S+\.\S+/
            var valid = re.test(e.attrs.value)
            if (!valid) {
                $(e.relatedTarget).addClass('invalid')
            }
        }).on('tokenfield:createtoken', function (e) {
            var existingTokens = $(this).tokenfield('getTokens');
            $.each(existingTokens, function(index, token) {
                if (token.value === e.attrs.value)
                    e.preventDefault();
            });
        }).tokenfield({
            autocomplete: {
                source: [{{range $i, $u :=.Users}}{{if ne $i 0}},{{end}}'{{$u.Email}}'{{end}}],
                delay: 100
            },
            inputType: 'email',
            createTokensOnBlur: true,
            showAutocompleteOnFocus: false
        })</script>
</body>

</html>