<div class="bs-sidebar col-md-3 clearfix" data-ng-include data-src="'partials/realm-menu.html'"></div>
<div id="content-area" class="col-md-9" role="main">

    <ul class="nav nav-tabs nav-tabs-pf" data-ng-show="!create">
        <li class="active"><a href="#/realms/{{realm.realm}}/users/{{user.username}}">Attributes</a></li>
        <li data-ng-show="access.manageUsers"><a href="#/realms/{{realm.realm}}/users/{{user.username}}/user-credentials">Credentials</a></li>
        <li><a href="#/realms/{{realm.realm}}/users/{{user.username}}/role-mappings">Role Mappings</a></li>
        <li><a href="#/realms/{{realm.realm}}/users/{{user.username}}/sessions">Sessions</a></li>
        <li data-ng-show="realm.social"><a href="#/realms/{{realm.realm}}/users/{{user.username}}/social-links">Social Links</a></li>
    </ul>
    <ul class="nav nav-tabs nav-tabs-pf" data-ng-show="create">
        <li class="active"><a href="">User List</a></li>
        <li><a href="#/realms/{{realm.realm}}/user-federation">Federation</a></li>
    </ul>
    <div id="content">
        <ol class="breadcrumb" data-ng-hide="create">
            <li><a href="#/realms/{{realm.realm}}/users">Users</a></li>
            <li><a href="#/realms/{{realm.realm}}/users/{{user.username}}">{{user.username}}</a></li>
            <li class="active">Settings</li>
        </ol>
        <ol class="breadcrumb" data-ng-show="create">
            <li><a href="#/realms/{{realm.realm}}/users">Users</a></li>
            <li class="active">Add User</li>
        </ol>
        <h2 data-ng-show="create" class="pull-left">Add User</h2>
        <h2 data-ng-hide="create" class="pull-left">User <span>{{user.username}}'s</span> Attributes</h2>
        <p class="subtitle"><span class="required">*</span> Required fields</p>

        <form class="form-horizontal" name="userForm" novalidate kc-read-only="!access.manageUsers">
            
            <fieldset class="border-top">
                <div class="form-group">
                    <label class="col-sm-2 control-label"for="id">ID</label>
                    <div class="col-sm-5">
                        <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-sm-2 control-label"for="username">Username <span class="required" data-ng-show="create">*</span></label>
                    <div class="col-sm-5">
                        <!-- Characters >,<,/,\ are forbidden in username -->
                        <input class="form-control" type="text" id="username" name="username" data-ng-model="user.username" autofocus
                               required ng-pattern="/^[^\<\>\\\/]*$/">
                    </div>
                </div>

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

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

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

                    <div class="col-sm-5">
                        <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-sm-2 control-label" for="userEnabled">User Enabled</label>
                    <div class="col-sm-5">
                        <input ng-model="user.enabled" name="userEnabled" id="userEnabled" onoffswitch />
                    </div>
                    <span tooltip-placement="right" tooltip="A disabled user cannot login." class="fa fa-info-circle"></span>
                </div>
                <div class="form-group clearfix block" data-ng-show="!create && user.federationLink">
                    <label class="col-sm-2 control-label" for="userEnabled">Federation Link</label>
                    <div class="col-sm-5">
                        <a href="{{federationLink}}">{{federationLinkName}}</a>
                    </div>
                </div>
                <div class="form-group clearfix block">
                    <label class="col-sm-2 control-label" for="emailVerified">Email verified</label>
                    <div class="col-sm-5">
                        <input ng-model="user.emailVerified" name="emailVerified" id="emailVerified" onoffswitch />
                    </div>
                    <span tooltip-placement="right" tooltip="Has the user's email been verified?" class="fa fa-info-circle"></span>
                </div>
                <div class="form-group clearfix">
                    <label class="col-sm-2 control-label" for="reqActions">Required User Actions</label>

                    <div class="col-sm-5">
                        <select ui-select2 ng-model="user.requiredActions" data-placeholder="Select an action..." multiple>
                            <option ng-repeat="action in userReqActionList" value="{{action.id}}">{{action.text}}</option>
                        </select>
                    </div>
                    <span tooltip-placement="right" 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." class="fa fa-info-circle"></span>
                </div>
            </fieldset>
            <div class="pull-right form-actions" data-ng-show="create && access.manageUsers">
                <button kc-cancel data-ng-click="cancel()">Cancel</button>
                <button kc-save data-ng-show="changed">Save</button>
            </div>

            <div class="pull-right form-actions" data-ng-show="!create && access.manageUsers">
                <button kc-reset data-ng-show="changed">Clear changes</button>
                <button kc-save  data-ng-show="changed">Save</button>
                <button kc-delete data-ng-click="remove()" data-ng-hide="changed">Delete</button>
            </div>

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