<div id="login-container" class="ui center aligned stackable grid">
  <div class="six wide column">
    <h2 class="ui image header">
      <img src="<%= path('/images/logo.png') %>" class="image">
      <div class="content"><%= _('Log-in to %APP%', {APP: apptitle}) %></div>
    </h2>
    <form class="ui large form login" action="<%= route('Security', {name: 'login'}) %>">
      <input type="hidden" name="continue" value="<%= redirect %>">
      <div class="ui left aligned segment">
        <div class="ui red message hidden">
          <i class="red exclamation triangle icon"></i><span class="errmsg"></span>
        </div>
        <div class="field">
          <div class="ui big left icon input">
            <i class="user icon"></i>
            <input type="text" name="username" class="required" placeholder="<%= _('Username') %>" autocomplete="off">
          </div>
        </div>
        <div class="field">
          <div class="ui big left icon input">
            <i class="lock icon"></i>
            <input type="password" name="password" class="required" placeholder="<%= _('Password') %>">
          </div>
        </div>
        <button class="ui fluid large submit button" type="submit"><%= _('Login') %></button>
      </div>
    </form>
  </div>
</div>
<%_ script.create('JQuery')
  .useDependencies(['JQuery/Util', 'JQuery/FormPost'])
  .addMiddle(`
$.login = function(form) {
    const fp = $.formpost(form, {progress: false, xhr: true});
    const err = fp.errhelper;
    err.errorContainer = form.find('.message');
    err.errorFormat = err.ERROR_INPLACE;
    err.inplace = function(el, error) {
        el.find('.errmsg').html(error);
    }
    form
        .on('formrequest', function(e) {
            form.find('input[type=password]').val('');
        })
        .on('formsaved', function(e, json) {
            if (json.url) {
                if (typeof $.loginSuccess === 'function') {
                    $.loginSuccess(json.url);
                } else {
                    window.location.href = json.url;
                }
            } else {
                window.location.reload();
            }
        })
    ;
    form.find('input[name=username]').focus();
}
`)
  .addLast(`
$.login($('form.login'));
`) -%>