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

    <div id="content">
        <ol class="breadcrumb" data-ng-show="create">
            <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
            <li><a href="#/realms/{{realm.realm}}/users">Users</a></li>
            <li class="active">Add</li>
        </ol>
        <h2 data-ng-show="create">Add User</h2>
        <ol class="breadcrumb" data-ng-hide="create">
            <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
            <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">Attributes</li>
        </ol>
        <h2 data-ng-hide="create"><span>{{user.username}}'s</span> Attributes</h2>

        <form class="form-horizontal" name="userForm" novalidate kc-read-only="!access.manageUsers">
            <span class="fieldset-notice"><span class="required">*</span> Required fields</span>
            <fieldset class="border-top">
                <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-4">
                        <!-- 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="!create">
                    </div>
                </div>

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

                    <div class="col-sm-4">
                        <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-4">
                        <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-4">
                        <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-4">
                        <input ng-model="user.enabled" name="userEnabled" id="userEnabled" onoffswitch />
                    </div>
                </div>
                <div class="form-group clearfix block">
                    <label class="col-sm-2 control-label" for="emailVerified">Email verified</label>
                    <div class="col-sm-4">
                        <input ng-model="user.emailVerified" name="emailVerified" id="emailVerified" onoffswitch />
                    </div>
                </div>
                <div class="form-group clearfix">
                    <label class="col-sm-2 control-label" for="reqActions">Required User Actions</label>

                    <div class="col-sm-4">
                        <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>
                </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>