<div class="well">

    <div class="container" ng-show="!loginWithCredentials">
        <form name="formRemoteUserLogin" class="form-signin" role="form">
            <h2 class="form-signin-heading" translate>Login as
                {{ remoteUser }}</h2>

            <p translate>
                You are authenticated by the web server as user
                <b>{{ remoteUser }}</b>.
                You may login as this user to privacyIDEA without any further
                credentials.
            </p>

            <div class="text-center">
                <button ng-click="authenticate_remote_user()"
                        class="btn btn-primary btn-block" translate>Log In
                </button>
                <button ng-click="loginWithCredentials = true"
                        class="btn btn-info btn-block" translate>
                    Login with credentials
                </button>
            </div>
        </form>
    </div>

    <div ng-show="loginWithCredentials">
        <div class="alert alert-info alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert"
                    aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
            <translate>
                Enter your username and password and click Log In to
                authenticate.
            </translate>
        </div>

        <div class="container">
            <form name="formSignin" class="form-signin" role="form" novalidate>
                <h2 class="form-signin-heading" translate>Please sign in</h2>

                <label for="username" class="sr-only" translate>Username</label>
                <input name="username" id="username" class="form-control"
                       ng-model="login.username" required
                       placeholder="{{ 'Username'|translate }}"
                       autofocus/>

                <label for="password" class="sr-only" translate>Password</label>
                <input name="password" type="password"
                       id="password" class="form-control"
                       ng-model="login.password" required
                       placeholder="{{ 'Password'|translate }}"/>

                <div class="text-center">
                    <button ng-click="authenticate_first();"
                            ng-disabled="formSignin.$invalid"
                            class="btn btn-primary btn-block" translate>Log In
                    </button>
                </div>

            </form>
        </div>
    </div>
</div>
