<div class="container">
    <div class="row" id="login-form">
        <div class="col-sm-4">
        </div>
        <div class="col-sm-4">
            <div ng:if="customization.plugins.core.bigLogoURL" class="text-center">
                <img ng:src="{{customization.plugins.core.bigLogoURL}}" />
            </div>
            <h1 class="text-center" style="perspective: 75px">
                <i ng:show="!working" class="fa fa-lock"></i>
                <span ng:show="working && !success">
                    <i class="fa flip-cycle fa-lock"></i>
                </span>
                <span ng:show="working && success">
                    <i class="fa flip-cycle fa-unlock-alt"></i>
                </span>
            </h1>
            <div ng:show="mode == 'normal'">
                <input ng:model="username" ng:enter="login()" ng:disabled="working" type="text" placeholder="{{'Username'|translate}}" autofocus class="form-control" />
            </div>
            <div ng:show="!showPassword" class="form-group has-feedback">
                <input ng:model="password" type="password" ng:enter="login()" ng:disabled="working" class="form-control"placeholder="{{'Password'|translate}}"  />
                <span ng:show="!showPassword" ng:click="toggleShowPassword()" class="fas fa-eye form-control-feedback" style="cursor: pointer; pointer-events: all; line-height:34px;"></span>
            </div>
            <div ng:show="showPassword" class="form-group has-feedback">
                <input ng:model="password" type="text" ng:enter="login()" ng:disabled="working" class="form-control" placeholder="{{'Password'|translate}}" />
                <span ng:show="showPassword" ng:click="toggleShowPassword()" class="fas fa-eye-slash form-control-feedback" style="cursor: pointer; pointer-events: all; line-height:34px;"></span>
            </div>
            <div>
                <a ng:click="login()" ng:disabled="!username || !password || working" class="btn btn-primary btn-block">
                    <span ng:show="mode == 'normal'" translate>Log in</span>
                    <span ng:show="mode == 'sudo'" translate>Authenticate</span>
                </a>
            </div>
            <div ng:show="showPWReset">
                <a href="/view/reset_password_send">
                    Password forgotten ?
                </a>
            </div>
        </div>
        <div class="col-sm-4">
        </div>
    </div>
    <dialog ng:show="verif_code">
       <div class="modal-header">
            <h4><span translate>Please enter TOTP verification code:</span></h4>
        </div>
        <div class="modal-body">
            <div class="input-group">
                <input class="form-control" ng:model="code" ng:change="verify(this)" />
            </div>
        </div>
        <div class="modal-footer">
            <a ng:click="closeTotpDialog()" class="btn btn-default btn-flat" translate>Cancel</a>
        </div>
    </dialog>
</div>
