<div class="row">
    <div class="col-md-12">
        <h1><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Create new account</h1>
    </div>
</div>

<div class="row">
    <div class="col-md-12">

        <form method="post" id="create-form" action="/account/create">
            <input type="hidden" name="_csrf" value="{{csrfToken}}">
            <input type="hidden" id="domain" name="domain" value="{{values.domain}}">

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Account information</h3>
                </div>
                <div class="panel-body">

                    <p>
                        Enter your account details. Account username is allowed to include latin characters only. Activated accounts can add extra identity addresses that may contain unicode characters as well.
                    </p>

                    <div class="row">
                        <div class="col-md-6">

                            <div class="form-group{{#if errors.name}} has-error{{/if}}">
                                <label for="name">Your name</label>
                                <input type="text" class="form-control" name="name" id="name" placeholder="eg. &quot;Jaan Tamm&quot;" value="{{values.name}}" required>
                                {{#if errors.name}}
                                    <span class="help-block">{{errors.name}}</span>
                                {{/if}}
                            </div>

                            <div class="form-group{{#if errors.username}} has-error{{/if}}">
                                <label for="name">Your new address (also the username)</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="username" id="username" placeholder="eg. &quot;username&quot; or &quot;user.name&quot;" value="{{values.username}}" pattern="^[A-Za-z0-9][A-Za-z\-\.0-9]*$" required>

                                    <span class="input-group-btn">
                                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            @<span class="selected-domain" style="text-transform: lowercase;">{{values.domain}}</span><span class="caret"></span>
                                          </button>
                                          <ul class="dropdown-menu dropdown-menu-right">
                                              {{#each domains}}
                                                <li><a href="#" class="change-domain-link" data-domain="{{this}}">{{this}}</a></li>
                                              {{/each}}
                                          </ul>
                                     </span>
                                </div>

                                {{#if errors.username}}
                                    <span class="help-block">{{errors.username}}</span>
                                {{else}}
                                    <span class="help-block">Latin letters and numbers only. Dots and dashes are allowed as separators.<span>
                                {{/if}}
                            </div>

                            <div class="form-group{{#if errors.password}} has-error{{/if}}">
                                <label for="password">Your password</label>
                                <input type="password" class="form-control" name="password" id="password" placeholder="eg. &quot;supersecret&quot;" required>
                                {{#if errors.password}}
                                    <span class="help-block">{{errors.password}}</span>
                                {{/if}}
                            </div>

                            <div class="form-group{{#if errors.password}} has-error{{/if}}">
                                <label for="password2">Repeat password</label>
                                <input type="password" class="form-control" name="password2" id="password2" placeholder="repeat password" required>
                            </div>

                            <div class="form-group{{#if errors.remember}} has-error{{/if}}">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="remember" required> Agree to <a href="/tos" target="_blank">terms of service</a>
                                        {{#if errors.remember}}
                                            <span class="help-block">{{errors.remember}}</span>
                                        {{/if}}
                                    </label>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="form-group">
                        {{#if recaptcha}}
                            <button
                                class="g-recaptcha btn btn-success"
                                data-sitekey="{{recaptcha}}"
                                data-callback="onCreateSubmit">
                                <span class="glyphicon glyphicon-user" aria-hidden="true"></span>Create new account
                            </button>
                        {{else}}
                            <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>Create new account</button>
                        {{/if}}
                    </div>
                </div>
            </div>

        </form>

    </div>
</div>

{{#if recaptcha}}
    <script src='https://www.google.com/recaptcha/api.js'></script>

    <script>
    function onCreateSubmit(token) {
        document.getElementById("create-form").submit();
    }
    </script>
{{/if}}

<script>
document.addEventListener('DOMContentLoaded', function() {

    var domainElement = document.getElementById('domain');

    var updateDomain = function(e,elm){
        e.preventDefault();
        var domain = elm.dataset.domain;
        if(domain){
            domainElement.value = domain;
            document.querySelector('.selected-domain').textContent = domain;
        }
    };

    var setupDomainButton = function(elm){
        elm.addEventListener('click', function(e){updateDomain(e,elm)}, false);
        elm.addEventListener('touch', function(e){updateDomain(e,elm)}, false);
    }

    var domainLinks = document.querySelectorAll('.change-domain-link');
    for(var i=0, len = domainLinks.length; i<len; i++){
        setupDomainButton(domainLinks[i]);
    }
}, false);
</script>
