<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">
        <input type="text" readonly value="this is not a login form" style="display: none;">
        <input type="password" readonly value="this is not a login form" style="display: none;">

        <div class="form-group clearfix">
            <label class="col-md-2 control-label" for="smtpHost"><span class="required">*</span> {{:: 'host' | translate}}</label>
            <div class="col-md-6">
                <input class="form-control" id="smtpHost" type="text" ng-model="realm.smtpServer.host" placeholder="{{:: 'smtp-host' | translate}}" required>
            </div>
            <div class="col-sm-4">
                <a class="btn btn-primary" data-ng-click="testConnection()">{{:: 'test-connection' | translate}}</a>
            </div>
        </div>
        <div class="form-group clearfix">
            <label class="col-md-2 control-label" for="smtpPort">{{:: 'port' | translate}}</label>
            <div class="col-md-6">
                <input class="form-control" id="smtpPort" type="number" ng-model="realm.smtpServer.port" placeholder="{{:: 'smtp-port' | translate}}">
            </div>
        </div>
        <div class="form-group clearfix">
            <label class="col-md-2 control-label" for="smtpFromDisplayName">{{:: 'fromDisplayName' | translate}}</label>
            <div class="col-md-6">
                <input class="form-control" id="smtpFromDisplayName" type="text" ng-model="realm.smtpServer.fromDisplayName" placeholder="{{:: 'sender-email-addr-display' | translate}}">
            </div>
            <kc-tooltip>{{:: 'fromDisplayName.tooltip' | translate}}</kc-tooltip>
        </div>
        <div class="form-group clearfix">
            <label class="col-md-2 control-label" for="smtpFrom"><span class="required">*</span> {{:: 'from' | translate}}</label>
            <div class="col-md-6">
                <input class="form-control" id="smtpFrom" type="email" ng-model="realm.smtpServer.from" placeholder="{{:: 'sender-email-addr' | translate}}" required>
            </div>
        </div>
        <div class="form-group clearfix">
            <label class="col-md-2 control-label" for="smtpReplyToDisplayName">{{:: 'replyToDisplayName' | translate}}</label>
            <div class="col-md-6">
                <input class="form-control" id="smtpReplyToDisplayName" type="text" ng-model="realm.smtpServer.replyToDisplayName" placeholder="{{:: 'reply-to-email-addr-display' | translate}}">
            </div>
            <kc-tooltip>{{:: 'replyToDisplayName.tooltip' | translate}}</kc-tooltip>
        </div>
        <div class="form-group clearfix">
            <label class="col-md-2 control-label" for="smtpReplyTo">{{:: 'replyTo' | translate}}</label>
            <div class="col-md-6">
                <input class="form-control" id="smtpReplyTo" type="email" ng-model="realm.smtpServer.replyTo" placeholder="{{:: 'reply-to-email-addr' | translate}}">
            </div>
        </div>
        <div class="form-group clearfix">
            <label class="col-md-2 control-label" for="smtpEnvelopeFrom">{{:: 'envelopeFrom' | translate}}</label>
            <div class="col-md-6">
                <input class="form-control" id="smtpEnvelopeFrom" type="email" ng-model="realm.smtpServer.envelopeFrom" placeholder="{{:: 'sender-envelope-email-addr' | translate}}">
            </div>
            <kc-tooltip>{{:: 'envelopeFrom.tooltip' | translate}}</kc-tooltip>
        </div>
        <div class="form-group clearfix">
            <label class="col-md-2 control-label" for="smtpSSL">{{:: 'enable-ssl' | translate}}</label>
            <div class="col-md-6">
                <input ng-model="realm.smtpServer.ssl" name="smtpSSL" id="smtpSSL" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}"/>
            </div>
        </div>
        <div class="form-group clearfix">
            <label class="col-md-2 control-label" for="smtpStartTLS">{{:: 'enable-start-tls' | translate}}</label>
            <div class="col-md-6">
                <input ng-model="realm.smtpServer.starttls" name="smtpStartTLS" id="smtpStartTLS" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}"/>
            </div>
        </div>

        <div class="form-group clearfix">
            <label class="col-md-2 control-label" for="smtpAuth">{{:: 'enable-auth' | translate}}</label>
            <div class="col-md-6">
                <input ng-model="realm.smtpServer.auth" name="smtpAuth" id="smtpAuth" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}"/>
            </div>
        </div>
        <div class="form-group clearfix" data-ng-show="realm.smtpServer.auth">
            <label class="col-md-2 control-label" for="smtpUsername"><span class="required">*</span> {{:: 'username' | translate}}</span></label>
            <div class="col-md-6">
                <input class="form-control" id="smtpUsername" type="text" ng-model="realm.smtpServer.user" placeholder="{{:: 'login-username' | translate}}" ng-disabled="!realm.smtpServer.auth" ng-required="realm.smtpServer.auth">
            </div>
        </div>
        <div class="form-group clearfix" data-ng-show="realm.smtpServer.auth">
            <label class="col-md-2 control-label" for="smtpPassword"><span class="required">*</span> {{:: 'password' | translate}}</label>
            <div class="col-md-6">
                <input class="form-control" id="smtpPassword" type="password" ng-model="realm.smtpServer.password" placeholder="{{:: 'login-password' | translate}}" ng-disabled="!realm.smtpServer.auth" ng-required="realm.smtpServer.auth">
            </div>
        </div>

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


<kc-menu></kc-menu>