<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>
                <span class="gray" data-ng-show="create">New Realm</span>
                <span class="gray" data-ng-hide="create">{{realm.name}}</span> configuration
            </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>
                    <legend>Details</legend>
                    <div class="control-group">
                        <label class="control-label" for="name">Name <span class="required">*</span></label>
                        <div class="controls">
                            <input type="text" class="input-xlarge" id="name" name="name" data-ng-model="realm.name" autofocus required>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="key">Key </label>
                        <div class="controls">
                            <input class="input-xxlarge" type="text" id="key" name="key" data-ng-model="realm.key" data-ng-readonly="!(auth.root && create)">
                        </div>
                    </div>
                    <div class="control-group" data-ng-show="auth.root">
                        <label class="control-label" for="owner">Owner </label>
                        <div class="controls">
                            <input class="input-xxlarge" type="text" id="owner" data-ng-model="realm.owner">
                        </div>
                    </div>
                </fieldset>

                <div class="form-actions" data-ng-show="create">
                    <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="!create">
                    <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>
                    <a href="#/realms" data-ng-hide="changed">View realms &#187;</a>
                    <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>