<div class="col-sm-9 col-md-10 col-sm-push-3 col-md-push-2">
    <ol class="breadcrumb">
        <li><a href="#/realms/{{realm.realm}}/users">Users</a></li>
        <li data-ng-hide="create">{{user.username}}</li>
        <li data-ng-show="create">Add User</li>
    </ol>

    <kc-tabs-user></kc-tabs-user>

    <form class="form-horizontal" name="userForm" novalidate kc-read-only="!access.manageUsers">

        <fieldset class="border-top">
            <div class="form-group">
                <label class="col-md-2 control-label"for="id">ID</label>
                <div class="col-md-6">
                    <input class="form-control" type="text" id="id" name="id" data-ng-model="user.id" autofocus data-ng-readonly="true">
                </div>
            </div>
            
            <div class="form-group">
                <label class="col-md-2 control-label"for="id">Created at</label>
                <div class="col-md-6">
                    {{user.createdTimestamp|date:'shortDate'}}&nbsp;{{user.createdTimestamp|date:'mediumTime'}}
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label"for="username">Username <span class="required" data-ng-show="create">*</span></label>
                <div class="col-md-6">
                    <!-- Characters >,<,/,\ are forbidden in username -->
                    <input class="form-control" type="text" id="username" name="username" data-ng-model="user.username" autofocus
                           required ng-pattern="/^[^\<\>\\\/]*$/" data-ng-readonly="!editUsername">
                </div>
            </div>


            <div class="form-group">
                <label class="col-md-2 control-label" for="email">Email</label>

                <div class="col-md-6">
                    <input class="form-control" type="email" name="email" id="email"
                           data-ng-model="user.email">
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label" for="firstName">First Name</label>

                <div class="col-md-6">
                    <input class="form-control" type="text" name="firstName" id="firstName"
                           data-ng-model="user.firstName">
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label" for="lastName">Last Name</label>

                <div class="col-md-6">
                    <input class="form-control" type="text" name="lastName" id="lastName"
                           data-ng-model="user.lastName">
                </div>
            </div>

            <div class="form-group clearfix block">
                <label class="col-md-2 control-label" for="userEnabled">User Enabled</label>
                <div class="col-md-6">
                    <input ng-model="user.enabled" name="userEnabled" id="userEnabled" ng-disabled="!access.manageUsers" onoffswitch />
                </div>
                <kc-tooltip>A disabled user cannot login.</kc-tooltip>
            </div>
            <div class="form-group clearfix block" data-ng-show="realm.bruteForceProtected && !create">
                <label class="col-md-2 control-label" for="temporarilyDisabled">User Temporarily Locked</label>
                <div class="col-md-1">
                    <input ng-model="temporarilyDisabled" name="temporarilyDisabled" id="temporarilyDisabled" data-ng-readonly="true" data-ng-disabled="true" onoffswitch />
                </div>
                <kc-tooltip>The user may have been locked due to failing to login too many times.</kc-tooltip>
                <div class="col-sm-2">
                    <button type="submit" data-ng-click="unlockUser()" data-ng-show="temporarilyDisabled" class="btn btn-default">Unlock User</button>
                </div>
            </div>
            <div class="form-group clearfix block" data-ng-show="!create && user.federationLink">
                <label class="col-md-2 control-label" for="userEnabled">Federation Link</label>
                <div class="col-md-6">
                    <a href="{{federationLink}}">{{federationLinkName}}</a>
                </div>
            </div>
            <div class="form-group clearfix block">
                <label class="col-md-2 control-label" for="emailVerified">Email verified</label>
                <div class="col-md-6">
                    <input ng-model="user.emailVerified" name="emailVerified" id="emailVerified" ng-disabled="!access.manageUsers" onoffswitch />
                </div>
                <kc-tooltip>Has the user's email been verified?</kc-tooltip>
            </div>
            <div class="form-group clearfix">
                <label class="col-md-2 control-label" for="reqActions">Required User Actions</label>

                <div class="col-md-6">
                    <select ui-select2 id="reqActions" ng-model="user.requiredActions" data-placeholder="Select an action..." multiple>
                        <option ng-repeat="action in userReqActionList" value="{{action.alias}}">{{action.name}}</option>
                    </select>
                </div>
                <kc-tooltip>Require an action when the user logs in. 'Verify email' sends an email to the user to verify their email address.  'Update profile' requires user to enter in new personal information.  'Update password' requires user to enter in a new password.  'Configure TOTP' requires setup of a mobile password generator.</kc-tooltip>
            </div>

            <div class="form-group clearfix" data-ng-if="realm.internationalizationEnabled">
                <label class="col-md-2 control-label" for="locale">Locale</label>
                <div class="col-md-6">
                    <div>
                        <select class="form-control" id="locale"
                                ng-model="user.attributes.locale"
                                ng-options="o as o for o in realm.supportedLocales">
                            <option value="" disabled selected>Select one...</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="form-group clearfix">
                <label class="col-md-2 control-label" for="impersonate">Impersonate user</label>

                <div class="col-md-6">
                    <button id="impersonate" data-ng-show="access.impersonation" class="btn btn-default" data-ng-click="impersonate()">Impersonate</button>
                </div>
                <kc-tooltip>Login as this user.  If user is in same realm as you, your current login session will be logged out before you are logged in as this user.</kc-tooltip>
            </div>

        </fieldset>

        <div class="form-group">
            <div class="col-md-10 col-md-offset-2" data-ng-show="create && access.manageUsers">
                <button kc-save data-ng-show="changed">Save</button>
                <button kc-cancel data-ng-click="cancel()">Cancel</button>
            </div>

            <div class="col-md-10 col-md-offset-2" data-ng-show="!create && access.manageUsers">
                <button kc-save  data-ng-disabled="!changed">Save</button>
                <button kc-reset data-ng-disabled="!changed">Cancel</button>
            </div>
        </div>

    </form>
</div>

<kc-menu></kc-menu>
