<div class="form-group{{#if errors.name}} has-error{{/if}}">
    <label for="name">Name</label>
    <input type="text" class="form-control" name="name" id="name" placeholder="eg &quot;John Smith&quot; or &quot;Accounting Department&quot;" value="{{#if values.name}}{{values.name}}{{/if}}" >
    {{#if errors.name}}
        <span class="help-block">{{errors.name}}</span>
    {{else}}
        <span class="help-block">This name is used as the sender name when using this identity. Keep blank to default to your account name</span>
    {{/if}}
</div>

<div class="form-group{{#if errors.address}} has-error{{/if}}">
    <label for="name">Alias address</label>
    <div class="input-group">
        <input type="text" class="form-control" name="address" id="address" placeholder="eg. &quot;username&quot; or &quot;user.name&quot; or &quot;андрис&quot;" value="{{values.address}}" 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.address}}
        <span class="help-block">{{errors.address}}</span>
    {{else}}
        <span class="help-block">Unicode characters are allowed in alias addresses.<span>
    {{/if}}
</div>

{{#unless isMain}}
    <div class="form-group">
        <div class="checkbox">
            <label>
                <input type="checkbox" name="main" {{#if values.main}}checked{{/if}}> Set as default
            </label>
        </div>
    </div>
{{/unless}}

<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>
