<div class="pd-20 settings">

    <div class="form-group row">
        <label for="EMAILS" class="col-sm-3 col-form-label jb-label">{{ lang.t('Email System') }}</label>
        <div class="col-sm-9">
            <div class="pd-3 switch-main">
                <label class="switch">
                    <!-- Checkbox to toggle email system -->
                    <input id="EMAILS"
                           type="checkbox"
                           ng-model="saveData.EMAILS"
                           ng-true-value=1
                           ng-false-value=0>
                    <span class="slider round"></span>

                </label>
                <p class="pd-3">{{ lang.t('When disabled, JetBackup will never send email alerts/notifications.') }}</p>
            </div>
        </div>
    </div>

    <div class="form-group row">
        <label for="ALTERNATE_EMAIL" class="col-sm-3 col-form-label jb-label">{{ lang.t('Alternate Email') }}</label>
        <div class="col-sm-9">
            <div class="pd-3 switch-main">
                <input id="ALTERNATE_EMAIL"
                       data-type="ALTERNATE_EMAIL"
                       name="ALTERNATE_EMAIL"
                       type="email"
                       ng-model="saveData.ALTERNATE_EMAIL"
                       ng-attr-placeholder="{{!saveData.ALTERNATE_EMAIL ? saveData.ADMIN_EMAIL : ''}}"
                       ng-disabled="!saveData.EMAILS">

                <button id="test_email"
                        class="btn btn-primary apply_btn"
                        ng-click="sendTestEmail()"
                        ng-disabled="!saveData.EMAILS">
                    <!-- Icon for spinner -->
                    <span class="settings_spinner spinner-border spinner-border-sm"
                          ng-show="sendingEmail"></span>
                    <span role="status">{{ lang.t('Test Email') }}</span>
                </button>

                <p class="pd-3">{{ lang.t('Email notifications will be sent by default to the "Admin Email" (set in Settings > General), this will override this option.') }}</p>
            </div>
        </div>
    </div>

    <div class="form-group row" ng-if="saveData.NOTIFICATION_LEVELS_FREQUENCY">
        <label class="col-sm-3 col-form-label jb-label">{{ lang.t('Email Alert Frequency') }}</label>
        <div class="col-sm-9">
            <div class="pd-3 switch-main">

                <div class="input-group mb-2" ng-repeat="(key, label) in const.ALERT_LEVEL_NAMES">
                    <div class="input-group-prepend">
                    <span class="input-group-text" style="min-width: 120px;">
                        {{ lang.t(label) }}
                    </span>
                    </div>
                    <select class="form-control"
                            ng-model="saveData.NOTIFICATION_LEVELS_FREQUENCY[key]"
                            ng-disabled="!saveData.EMAILS"
                            ng-options="+key as label for (key, label) in const.ALERT_FREQUENCIES">
                    </select>
                </div>

                <p class="pd-3">{{ lang.t('Control which alert levels will trigger email notifications and how frequently they are sent. Alerts will always appear in the GUI regardless of this setting.') }}</p>

            </div>
        </div>
    </div>






</div>