realm-detail.html

<div id="wrapper" class="container">
    <div class="row">
        <aside class="span3" data-ng-include data-src="'partials/realm-menu.html'"></aside>
        <div id="actions-bg"></div>

        <div id="container-right" class="span9">
            <h1 data-ng-show="createRealm"><span class="gray">New Realm</span></h1>

            <h1 data-ng-hide="createRealm">
                <span class="gray">Realm Settings</span>
            </h1>

            <div data-ng-show="realmForm.showErrors && realmForm.$error.required" class="alert alert-error">Please fill
                in all required fields
            </div>
            <p class="subtitle subtitle-right"><span class="required">*</span> Required fields</p>

            <form class="form-horizontal" name="realmForm" novalidate>
                <fieldset>

                    <div class="control-group">
                        <label for="realmForm-name" class="control-label">Name <span class="required">*</span></label>

                        <div class="controls">
                            <input class="input-xlarge" type="text" name="name" data-ng-model="realm.realm" autofocus
                                   required>
                        </div>
                    </div>

                     <table>
                        <tr>
                            <td>
                                <div class="control-group">
                                    <label class="control-label">Enabled</label>

                                    <div class="controls">
                                        <input class="input-xlarge" type="checkbox" name="enabled"
                                               data-ng-model="realm.enabled">
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="control-group">
                                    <label class="control-label">Social login</label>

                                    <div class="controls">
                                        <input class="input-xlarge" type="checkbox" name="social"
                                               data-ng-model="realm.social">
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="control-group">
                                    <label class="control-label">Require SSL</label>

                                    <div class="controls">
                                        <input class="input-xlarge" type="checkbox" name="requireSsl"
                                               data-ng-model="realm.requireSsl">
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="control-group">
                                    <label class="control-label">Cookie login allowed</label>

                                    <div class="controls">
                                        <input class="input-xlarge" type="checkbox" name="cookieLoginAllowed"
                                               data-ng-model="realm.cookieLoginAllowed">
                                    </div>
                                </div>
                            </td>
                        </tr>
                         <tr>
                             <td>
                                 <div class="control-group">
                                     <label class="control-label">User registration</label>

                                     <div class="controls">
                                         <input class="input-xlarge" type="checkbox" name="userRegistration"
                                                data-ng-model="realm.userRegistration">
                                     </div>
                                 </div>
                             </td>
                         </tr>
                    </table>

                    <div class="control-group">
                        <label for="realmForm-tokenLifespan" class="control-label">Token lifespan</label>

                        <div class="controls">
                            <input class="input-small" type="text" name="tokenLifespan"
                                   data-ng-model="realm.tokenLifespan">
                            <select style="width: auto;" name="tokenLifespanUnit"
                                    data-ng-model="realm.tokenLifespanUnit">
                                <option value="SECONDS" data-ng-selected="!realm.tokenLifespanUnit">Seconds</option>
                                <option value="MINUTES">Minutes</option>
                                <option value="HOURS">Hours</option>
                                <option value="DAYS">Days</option>
                            </select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label for="realmForm-accessCodeLifespan" class="control-label">Access code lifespan</label>

                        <div class="controls">
                            <input class="input-small" type="text" name="accessCodeLifespan"
                                   data-ng-model="realm.accessCodeLifespan">
                            <select style="width: auto;" name="accessCodeLifespanUnit"
                                    data-ng-model="realm.accessCodeLifespanUnit">
                                <option value="SECONDS" data-ng-selected="!realm.accessCodeLifespanUnit">Seconds
                                </option>
                                <option value="MINUTES">Minutes</option>
                                <option value="HOURS">Hours</option>
                                <option value="DAYS">Days</option>
                            </select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">Required User Credentials</label>

                        <div class="controls">
                            <input style="width:250px" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredCredentials">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">Required Application Credentials</label>

                        <div class="controls">
                            <input style="width:250px" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredApplicationCredentials">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">Required OAuth Credentials</label>

                        <div class="controls">
                            <input style="width:250px" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredOAuthClientCredentials">
                        </div>
                    </div>
                </fieldset>
                <div class="form-actions" data-ng-show="createRealm">
                    <button type="submit" data-ng-click="save()" class="btn btn-primary" data-ng-show="changed">Save
                    </button>
                    <button type="submit" data-ng-click="cancel()" class="btn" data-ng-click="cancel()"
                            data-ng-show="changed">Cancel
                    </button>
                </div>

                <div class="form-actions" data-ng-show="!createRealm">
                    <button type="submit" data-ng-click="save()" class="btn btn-primary" data-ng-show="changed">Save
                        changes
                    </button>
                    <button type="submit" data-ng-click="reset()" class="btn" data-ng-show="changed">Clear changes
                    </button>
                    <button type="submit" data-ng-click="remove()" class="btn btn-danger" data-ng-hide="changed">
                        Delete
                    </button>
                </div>

            </form>
        </div>
        <div id="container-right-bg"></div>
    </div>
</div>