<div class="col-sm-9 col-md-10 col-sm-push-3 col-md-push-2">
    <kc-tabs-realm></kc-tabs-realm>

    <form class="form-horizontal" name="realmForm" novalidate kc-read-only="!access.manageRealm">
        <fieldset class="border-top">
            <div class="form-group">
                <label class="col-md-2 control-label" for="loginTheme">{{:: 'login-theme' | translate}}</label>
                <div class="col-md-3">
                    <div>
                        <select class="form-control" id="loginTheme"
                                ng-model="realm.loginTheme"
                                ng-options="o.name as o.name for o in serverInfo.themes.login">
                            <option value="" disabled selected>{{:: 'select-one.placeholder' | translate}}</option>
                        </select>
                    </div>
                </div>
                <kc-tooltip>{{:: 'login-theme.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label" for="accountTheme">{{:: 'account-theme' | translate}}</label>
                <div class="col-md-3">
                    <div>
                        <select class="form-control" id="accountTheme"
                                ng-model="realm.accountTheme"
                                ng-options="o.name as o.name for o in serverInfo.themes.account">
                            <option value="" disabled selected>{{:: 'select-one.placeholder' | translate}}</option>
                        </select>
                    </div>
                </div>
                <kc-tooltip>{{ 'account-theme.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label" for="adminTheme">{{:: 'admin-console-theme' | translate}}</label>
                <div class="col-md-3">
                    <div>
                        <select class="form-control" id="adminTheme"
                                ng-model="realm.adminTheme"
                                ng-options="o.name as o.name for o in serverInfo.themes.admin">
                            <option value="" disabled selected>{{:: 'select-one.placeholder' | translate}}</option>
                        </select>
                    </div>
                </div>
                <kc-tooltip>{{:: 'select-theme-admin-console' | translate}}</kc-tooltip>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label" for="emailTheme">{{:: 'email-theme' | translate}}</label>
                <div class="col-md-3">
                    <div>
                        <select class="form-control" id="emailTheme"
                                ng-model="realm.emailTheme"
                                ng-options="o.name as o.name for o in serverInfo.themes.email">
                            <option value="" disabled selected>{{:: 'select-one.placeholder' | translate}}</option>
                        </select>
                    </div>
                </div>
                <kc-tooltip>{{:: 'select-theme-email' | translate}}</kc-tooltip>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label" for="internationalizationEnabled">{{:: 'i18n-enabled' | translate}}</label>
                <div class="col-md-3">
                    <input ng-model="realm.internationalizationEnabled" name="internationalizationEnabled" id="internationalizationEnabled" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}"/>
                </div>
            </div>
            <div class="form-group" data-ng-show="realm.internationalizationEnabled">
                <label class="col-md-2 control-label" for="supportedLocales" class="control-label two-lines">{{:: 'supported-locales' | translate}}</label>

                <div class="col-md-6">
                    <select ui-select2 id="supportedLocales" ng-model="realm.supportedLocales" data-placeholder="{{:: 'supported-locales.placeholder' | translate}}" ng-required="realm.internationalizationEnabled" multiple>
                        <option ng-repeat="option in supportedLocalesOptions.tags" value="{{option}}">{{option}}</option>
                    </select>
                </div>
            </div>
            <div class="form-group" data-ng-show="realm.internationalizationEnabled">
                <label class="col-md-2 control-label" for="defaultLocale">{{:: 'default-locale' | translate}}</label>
                <div class="col-md-3">
                    <div>
                        <select class="form-control" id="defaultLocale"
                                ng-model="realm.defaultLocale"
                                ng-options="o as o for o in realm.supportedLocales"
                                ng-required="realm.internationalizationEnabled"
                                ng-disabled="!realm.internationalizationEnabled">
                            <option value="" disabled selected>{{:: 'select-one.placeholder' | translate}}</option>
                        </select>
                    </div>
                </div>
            </div>
        </fieldset>

        <div class="form-group" data-ng-show="access.manageRealm">
            <div class="col-md-10 col-md-offset-2">
                <button kc-save  data-ng-disabled="!changed">{{:: 'save' | translate}}</button>
                <button kc-reset data-ng-disabled="!changed">{{:: 'cancel' | translate}}</button>
            </div>
        </div>
    </form>
</div>


<kc-menu></kc-menu>