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

    <span data-ng-init="redirectIfWebAuthnDisabled()"></span>
    <kc-tabs-authentication></kc-tabs-authentication>

    <form class="form-horizontal" name="realmForm" novalidate kc-read-only="!access.manageRealm">

        <div class="form-group">
            <label for="name" class="col-md-2 control-label"><span class="required">*</span> {{:: 'webauthn-rp-entity-name' | translate}}</label>
            <div class="col-md-2">
                <div>
                    <input id="name" type="text"  ng-model="realm.webAuthnPolicyRpEntityName" class="form-control">
                </div>
            </div>
            <kc-tooltip>{{:: 'webauthn-rp-entity-name.tooltip' | translate}}</kc-tooltip>
        </div>

        <div class="form-group">
            <label for="sigalg" class="col-md-2 control-label">{{:: 'webauthn-signature-algorithms' | translate}}</label>
            <div class="col-md-2">
                <div>
                    <select id="sigalg" ng-model="realm.webAuthnPolicySignatureAlgorithms" class="form-control" multiple>
                        <option value="ES256">ES256</option>
                        <option value="ES384">ES384</option>
                        <option value="ES512">ES512</option>
                        <option value="RS256">RS256</option>
                        <option value="RS384">RS384</option>
                        <option value="RS512">RS512</option>
                        <option value="RS1">RS1</option>
                    </select>
                </div>
            </div>
            <kc-tooltip>{{:: 'webauthn-signature-algorithms.tooltip' | translate}}</kc-tooltip>
        </div>

        <div class="form-group">
            <label for="rpid" class="col-md-2 control-label">{{:: 'webauthn-rp-id' | translate}}</label>
            <div class="col-md-2">
                <div>
                    <input id="rpid" type="text"  ng-model="realm.webAuthnPolicyRpId" class="form-control">
                </div>
            </div>
            <kc-tooltip>{{:: 'webauthn-rp-id.tooltip' | translate}}</kc-tooltip>
        </div>

        <div class="form-group">
            <label for="attpref" class="col-md-2 control-label">{{:: 'webauthn-attestation-conveyance-preference' | translate}}</label>
            <div class="col-md-2">
                <div>
                    <select id="attpref" ng-model="realm.webAuthnPolicyAttestationConveyancePreference" class="form-control">
                        <option value="not specified"></option>
                        <option value="none">none</option>
                        <option value="indirect">indirect</option>
                        <option value="direct">direct</option>
                    </select>
                </div>
            </div>
            <kc-tooltip>{{:: 'webauthn-attestation-conveyance-preference.tooltip' | translate}}</kc-tooltip>
        </div>

        <div class="form-group">
            <label for="authnatt" class="col-md-2 control-label">{{:: 'webauthn-authenticator-attachment' | translate}}</label>
            <div class="col-md-2">
                <div>
                    <select id="authnatt" ng-model="realm.webAuthnPolicyAuthenticatorAttachment" class="form-control">
                        <option value="not specified"></option>
                        <option value="platform">platform</option>
                        <option value="cross-platform">cross-platform</option>
                    </select>
                </div>
            </div>
            <kc-tooltip>{{:: 'webauthn-authenticator-attachment.tooltip' | translate}}</kc-tooltip>
        </div>

        <div class="form-group">
            <label for="reqresident" class="col-md-2 control-label">{{:: 'webauthn-require-resident-key' | translate}}</label>
            <div class="col-md-2">
                <div>
                    <select id="reqresident" ng-model="realm.webAuthnPolicyRequireResidentKey" class="form-control">
                        <option value="not specified"></option>
                        <option value="Yes">Yes</option>
                        <option value="No">No</option>
                    </select>
                </div>
            </div>
            <kc-tooltip>{{:: 'webauthn-require-resident-key.tooltip' | translate}}</kc-tooltip>
        </div>

        <div class="form-group">
            <label for="usrverify" class="col-md-2 control-label">{{:: 'webauthn-user-verification-requirement' | translate}}</label>
            <div class="col-md-2">
                <div>
                    <select id="usrverify" ng-model="realm.webAuthnPolicyUserVerificationRequirement" class="form-control">
                        <option value="not specified"></option>
                        <option value="required">required</option>
                        <option value="preferred">preferred</option>
                        <option value="discouraged">discouraged</option>
                    </select>
                </div>
            </div>
            <kc-tooltip>{{:: 'webauthn-user-verification-requirement.tooltip' | translate}}</kc-tooltip>
        </div>

        <div class="form-group">
            <label for="timeout" class="col-md-2 control-label">{{:: 'webauthn-create-timeout' | translate}}</label>
            <div class="col-md-2">
                <div>
                    <input id="timeout" type="number" min="0" max="31536" ng-model="realm.webAuthnPolicyCreateTimeout" class="form-control"/>
                </div>
            </div>
            <kc-tooltip>{{:: 'webauthn-create-timeout.tooltip' | translate}}</kc-tooltip>
        </div>

        <div class="form-group">
            <label for="avoidsame" class="col-md-2 control-label">{{:: 'webauthn-avoid-same-authenticator-register' | translate}}</label>
            <div class="col-md-2">
                <div>
                    <input id="avoidsame" ng-model="realm.webAuthnPolicyAvoidSameAuthenticatorRegister" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}"/>
                </div>
            </div>
            <kc-tooltip>{{:: 'webauthn-avoid-same-authenticator-register.tooltip' | translate}}</kc-tooltip>
        </div>

        <div class="form-group">
            <label for="type" class="col-md-2 control-label">{{:: 'webauthn-acceptable-aaguids' | translate}}</label>
            <div class="col-sm-4">
                <div class="input-group" ng-repeat="(i, acceptableAaguid) in realm.webAuthnPolicyAcceptableAaguids track by $index">
                    <input id="type" class="form-control" ng-model="realm.webAuthnPolicyAcceptableAaguids[i]">
                    <div class="input-group-btn">
                        <button class="btn btn-default" type="button" data-ng-click="deleteAcceptableAaguid($index)">
                            <span class="fa fa-minus"></span>
                        </button>
                    </div>
                </div>
                <div class = "input-group">
                    <input class="form-control" ng-model="newAcceptableAaguid" id="newAcceptableAaguid">
                    <div class="input-group-btn">
                        <button class="btn btn-default" type="button" data-ng-click="newAcceptableAaguid.length > 0 && addAcceptableAaguid()">
                            <span class="fa fa-plus"></span>
                        </button>
                    </div>
                </div>
            </div>
            <kc-tooltip>{{:: 'webauthn-acceptable-aaguids.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>
