<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>

    <h1 data-ng-hide="create">{{user.username|capitalize}}</h1>
    <h1 data-ng-show="create">Add User</h1>

    <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" onoffswitch />
                </div>
                <kc-tooltip>A disabled user cannot login.</kc-tooltip>
            </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" 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>
        </fieldset>

        <div data-ng-include data-src="resourceUrl + '/partials/user-attribute-entry.html'"></div>


        <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-show="changed">Save</button>
                <button kc-reset data-ng-show="changed">Cancel</button>
                <button kc-delete data-ng-click="remove()" data-ng-hide="changed">Delete</button>
            </div>
        </div>

    </form>
</div>

<kc-menu></kc-menu>
