<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" attr.aria-label="{{'settings' | i18n}}">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body form">
                <div class="box">
                    <div class="box-header">
                        {{'security' | i18n}}
                    </div>
                    <div class="box-content box-content-padded">
                        <div class="form-group">
                            <label for="vaultTimeouts">{{'vaultTimeout' | i18n}}</label>
                            <select id="vaultTimeouts" name="VaultTimeouts" [(ngModel)]="vaultTimeout"
                                (change)="saveVaultTimeoutOptions()">
                                <option *ngFor="let o of vaultTimeouts" [ngValue]="o.value">{{o.name}}</option>
                            </select>
                            <small class="help-block">{{'vaultTimeoutDesc' | i18n}}</small>
                        </div>
                        <div class="form-group">
                            <label>{{'vaultTimeoutAction' | i18n}}</label>
                            <div class="radio radio-mt-2">
                                <label for="vaultTimeoutActionLock">
                                    <input type="radio" name="VaultTimeoutAction" id="vaultTimeoutActionLock"
                                        value="lock" [(ngModel)]="vaultTimeoutAction"
                                        (change)="saveVaultTimeoutOptions()">
                                    {{'lock' | i18n}}
                                </label>
                            </div>
                            <small class="help-block">{{'vaultTimeoutActionLockDesc' | i18n}}</small>
                            <div class="radio">
                                <label for="vaultTimeoutActionLogOut">
                                    <input type="radio" name="VaultTimeoutAction" id="vaultTimeoutActionLogOut"
                                        value="logOut" [(ngModel)]="vaultTimeoutAction"
                                        (change)="saveVaultTimeoutOptions()">
                                    {{'logOut' | i18n}}
                                </label>
                            </div>
                            <small class="help-block">{{'vaultTimeoutActionLogOutDesc' | i18n}}</small>
                        </div>
                        <div class="form-group">
                            <div class="checkbox">
                                <label for="pin">
                                    <input id="pin" type="checkbox" name="PIN" [(ngModel)]="pin" (change)="updatePin()">
                                    {{'unlockWithPin' | i18n}}
                                </label>
                            </div>
                        </div>
                        <div class="form-group" *ngIf="supportsBiometric">
                            <div class="checkbox">
                                <label for="biometric">
                                    <input id="biometric" type="checkbox" name="biometric" [checked]="biometric" (change)="updateBiometric()">
                                    {{biometricText | i18n}}
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <div class="box-header">
                        {{'options' | i18n}}
                    </div>
                    <div class="box-content box-content-padded">
                        <div class="form-group">
                            <label for="clearClipboard">{{'clearClipboard' | i18n}}</label>
                            <select id="clearClipboard" name="ClearClipboard" [(ngModel)]="clearClipboard"
                                (change)="saveClearClipboard()">
                                <option *ngFor="let o of clearClipboardOptions" [ngValue]="o.value">{{o.name}}</option>
                            </select>
                            <small class="help-block">{{'clearClipboardDesc' | i18n}}</small>
                        </div>
                        <div class="form-group">
                            <div class="checkbox">
                                <label for="minimizeOnCopyToClipboard">
                                    <input id="minimizeOnCopyToClipboard" type="checkbox"
                                        name="MinimizeOnCopyToClipboard" [(ngModel)]="minimizeOnCopyToClipboard"
                                        (change)="saveMinOnCopyToClipboard()">
                                    {{'minimizeOnCopyToClipboard' | i18n}}
                                </label>
                            </div>
                            <small class="help-block">{{'minimizeOnCopyToClipboardDesc' | i18n}}</small>
                        </div>
                        <div class="form-group">
                            <div class="checkbox">
                                <label for="disableFavicons">
                                    <input id="disableFavicons" type="checkbox" name="DisableFavicons"
                                        [(ngModel)]="disableFavicons" (change)="saveFavicons()">
                                    {{'disableFavicon' | i18n}}
                                </label>
                            </div>
                            <small class="help-block">{{'disableFaviconDesc' | i18n}}</small>
                        </div>
                        <div class="form-group">
                            <div class="checkbox">
                                <label for="enableTray">
                                    <input id="enableTray" type="checkbox" name="EnableTray" [(ngModel)]="enableTray"
                                        (change)="saveTray()">
                                    {{enableTrayText}}
                                </label>
                            </div>
                            <small class="help-block">{{enableTrayDescText}}</small>
                        </div>
                        <div class="form-group" *ngIf="showMinToTray">
                            <div class="checkbox">
                                <label for="enableMinToTray">
                                    <input id="enableMinToTray" type="checkbox" name="EnableMinToTray"
                                        [(ngModel)]="enableMinToTray" (change)="saveMinToTray()">
                                    {{'enableMinToTray' | i18n}}
                                </label>
                            </div>
                            <small class="help-block">{{'enableMinToTrayDesc' | i18n}}</small>
                        </div>
                        <div class="form-group" *ngIf="showMinToTray">
                            <div class="checkbox">
                                <label for="enableCloseToTray">
                                    <input id="enableCloseToTray" type="checkbox" name="EnableCloseToTray"
                                        [(ngModel)]="enableCloseToTray" (change)="saveCloseToTray()">
                                    {{'enableCloseToTray' | i18n}}
                                </label>
                            </div>
                            <small class="help-block">{{'enableCloseToTrayDesc' | i18n}}</small>
                        </div>
                        <div class="form-group" *ngIf="showMinToTray">
                            <div class="checkbox">
                                <label for="startToTray">
                                    <input id="startToTray" type="checkbox" name="StartToTray" [(ngModel)]="startToTray"
                                        (change)="saveStartToTray()">
                                    {{'startToTray' | i18n}}
                                </label>
                            </div>
                            <small class="help-block">{{'startToTrayDesc' | i18n}}</small>
                        </div>
                        <div class="form-group">
                            <label for="theme">{{'theme' | i18n}}</label>
                            <select id="theme" name="Theme" [(ngModel)]="theme" (change)="saveTheme()">
                                <option *ngFor="let o of themeOptions" [ngValue]="o.value">{{o.name}}</option>
                            </select>
                            <small class="help-block">{{'themeDesc' | i18n}}</small>
                        </div>
                        <div class="form-group">
                            <label for="locale">{{'language' | i18n}}</label>
                            <select id="locale" name="Locale" [(ngModel)]="locale" (change)="saveLocale()">
                                <option *ngFor="let o of localeOptions" [ngValue]="o.value">{{o.name}}</option>
                            </select>
                            <small class="help-block">{{'languageDesc' | i18n}}</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal">{{'close' | i18n}}</button>
            </div>
        </div>
    </div>
</div>
