<div class="col-sm-9 col-md-10 col-sm-push-3 col-md-push-2">
    <h1>{{:: 'authentication' | translate}}</h1>

    <kc-tabs-authentication></kc-tabs-authentication>

    <form class="form-horizontal" name="realmForm" novalidate kc-read-only="!access.manageRealm">
        <div class="form-group">
            <label for="type" class="col-md-2 control-label">{{:: 'otp-type' | translate}}</label>
            <div class="col-md-2">
                <div>
                    <select id="type" ng-model="realm.otpPolicyType" class="form-control">
                        <option value="totp">{{:: 'time-based' | translate}}</option>
                        <option value="hotp">{{:: 'counter-based' | translate}}</option>
                    </select>
                </div>
            </div>
            <kc-tooltip>{{:: 'otp-type.tooltip' | translate}}</kc-tooltip>
        </div>
        <div class="form-group">
            <label for="alg" class="col-md-2 control-label">{{:: 'otp-hash-algorithm' | translate}}</label>
            <div class="col-md-2">
                <div>
                    <select id="alg" ng-model="realm.otpPolicyAlgorithm" class="form-control">
                        <option value="HmacSHA1">SHA1</option>
                        <option value="HmacSHA256">SHA256</option>
                        <option value="HmacSHA512">SHA512</option>
                    </select>
                </div>
            </div>
            <kc-tooltip>{{:: 'otp-hash-algorithm.tooltip' | translate}}</kc-tooltip>
        </div>

        <div class="form-group">
            <label class="col-md-2 control-label" for="digits">{{:: 'number-of-digits' | translate}}</label>
            <div class="col-md-2">
                <div>
                    <select id="digits" ng-model="realm.otpPolicyDigits" class="form-control" ng-options="item as item for item in optionsDigits">
                    </select>
                </div>
            </div>
            <kc-tooltip>{{:: 'otp.number-of-digits.tooltip' | translate}}</kc-tooltip>
        </div>

        <div class="form-group" data-ng-if="realm.otpPolicyType == 'hotp'">
            <label class="col-md-2 control-label" for="lookAhead">{{:: 'look-ahead-window' | translate}}</label>
            <div class="col-md-6">
                <input class="form-control" type="number" data-ng-required="realm.otpPolicyType == 'hotp'" min="0" max="120" id="lookAhead" name="lookAhead" data-ng-model="realm.otpPolicyLookAheadWindow">
            </div>
            <kc-tooltip>{{:: 'otp.look-ahead-window.tooltip' | translate}}</kc-tooltip>
        </div>

        <div class="form-group" data-ng-if="realm.otpPolicyType == 'totp'">
            <label class="col-md-2 control-label" for="lookAround">{{:: 'look-around-window' | translate}}</label>
            <div class="col-md-6">
                <input class="form-control" type="number" data-ng-required="realm.otpPolicyType == 'totp'" min="0" max="120" id="lookAround" name="lookAround" data-ng-model="realm.otpPolicyLookAheadWindow">
            </div>
            <kc-tooltip>{{:: 'otp.look-around-window.tooltip' | translate}}</kc-tooltip>
        </div>

        <div class="form-group" data-ng-if="realm.otpPolicyType == 'hotp'">
            <label class="col-md-2 control-label" for="counter">{{:: 'initial-counter' | translate}}</label>
            <div class="col-md-6">
                <input class="form-control" type="number" data-ng-required="realm.otpPolicyType == 'hotp'" min="1" max="120" id="counter" name="counter" data-ng-model="realm.otpPolicyInitialCounter" autofocus>
            </div>
            <kc-tooltip>{{:: 'otp.initial-counter.tooltip' | translate}}</kc-tooltip>
        </div>

        <div class="form-group" data-ng-if="realm.otpPolicyType == 'totp'">
            <label class="col-md-2 control-label" for="counter">{{:: 'otp-token-period' | translate}}</label>
            <div class="col-md-6">
                <input class="form-control" type="number" data-ng-required="realm.otpPolicyType == 'totp'" min="1" max="120" id="period" name="period" data-ng-model="realm.otpPolicyPeriod">
            </div>
            <kc-tooltip>{{:: 'otp-token-period.tooltip' | translate}}</kc-tooltip>
        </div>

        <div class="form-group">
            <label class="col-md-2 control-label">{{:: 'otp-supported-applications' | translate}}</label>
            <div class="col-md-6">
                {{realm.otpSupportedApplications.join(', ')}}
            </div>
            <kc-tooltip>{{:: 'otp-supported-applications.tooltip' | translate}}</kc-tooltip>
        </div>

        <div class="form-group" data-ng-if="realm.otpPolicyType == 'totp'">
            <label for="reusableCode" class="col-md-2 control-label">{{:: 'otp-reusable-code' | translate}}</label>
            <div class="col-md-2">
                <div>
                    <input id="reusableCode" ng-model="realm.otpPolicyCodeReusable" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}"/>
                </div>
            </div>
            <kc-tooltip>{{:: 'otp-reusable-code.tooltip' | translate}}</kc-tooltip>
        </div>


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