<div class="col-md-6 col-md-offset-3">

    <h2 data-translate="moon.login.titlePage">Login</h2>

    <form name="form" ng-submit="form.$valid && auth.login()" novalidate>

        <div class="form-group" ng-class="{ 'has-error': form.$submitted && form.username.$invalid }">
            <label for="username" data-translate="moon.login.username" >Username</label>
            <input type="text" id="username" name="username" class="form-control" ng-model="auth.credentials.username" required />
            <div ng-messages="form.$submitted && form.username.$error" class="help-block">
                <div ng-message="required" data-translate="moon.login.check.username.required" >Username is required</div>
            </div>
        </div>

        <div class="form-group" ng-class="{ 'has-error': form.$submitted && form.password.$invalid }">
            <label for="password" data-translate="moon.login.password" >Password</label>
            <input type="password" id="password" name="password" class="form-control" ng-model="auth.credentials.password" required />
            <div ng-messages="form.$submitted && form.password.$error" class="help-block">
                <div ng-message="required" data-translate="moon.login.check.password.required">Password is required</div>
            </div>
        </div>

        <div class="form-group">
            <button ng-disabled="auth.loading" class="btn btn-primary" data-translate="moon.login.login" >Login</button>
            <img ng-if="auth.loading" src="assets/img/ajax-loader.gif" />
        </div>
    </form>
</div>