<form #mailConfigFrom="ngForm" class="clr-form clr-form-horizontal">
    <section class="form-block">
        <clr-input-container>
            <label for="mailServer" class="required">{{
                'CONFIG.MAIL_SERVER' | translate
            }}</label>
            <input
                clrInput
                name="mailServer"
                type="text"
                #mailServerInput="ngModel"
                [(ngModel)]="currentConfig.email_host.value"
                required
                id="mailServer"
                size="40"
                [disabled]="disabled(currentConfig.email_host)" />
            <clr-control-error>{{
                'TOOLTIP.ITEM_REQUIRED' | translate
            }}</clr-control-error>
        </clr-input-container>
        <clr-input-container>
            <label for="emailPort" class="required">{{
                'CONFIG.MAIL_SERVER_PORT' | translate
            }}</label>
            <input
                clrInput
                name="emailPort"
                type="text"
                #emailPortInput="ngModel"
                [(ngModel)]="currentConfig.email_port.value"
                required
                port
                id="emailPort"
                size="40"
                [disabled]="disabled(currentConfig.email_port)" />
            <clr-control-error>{{
                'TOOLTIP.PORT_REQUIRED' | translate
            }}</clr-control-error>
        </clr-input-container>
        <clr-input-container>
            <label for="emailUsername">{{
                'CONFIG.MAIL_USERNAME' | translate
            }}</label>
            <input
                clrInput
                name="emailUsername"
                type="text"
                #emailUsernameInput="ngModel"
                [(ngModel)]="currentConfig.email_username.value"
                id="emailUsername"
                size="40"
                [disabled]="disabled(currentConfig.email_username)" />
        </clr-input-container>
        <clr-input-container>
            <label for="emailPassword">{{
                'CONFIG.MAIL_PASSWORD' | translate
            }}</label>
            <!--disable property should be consistent with 'email_username', as the back end API won't return this fielder, -->
            <input
                clrInput
                name="emailPassword"
                type="password"
                #emailPasswordInput="ngModel"
                [(ngModel)]="currentConfig.email_password.value"
                id="emailPassword"
                size="40"
                [disabled]="disabled(currentConfig.email_username)" />
        </clr-input-container>
        <clr-input-container>
            <label for="emailFrom" class="required">{{
                'CONFIG.MAIL_FROM' | translate
            }}</label>
            <input
                clrInput
                name="emailFrom"
                type="text"
                #emailFromInput="ngModel"
                [(ngModel)]="currentConfig.email_from.value"
                required
                id="emailFrom"
                size="40"
                [disabled]="disabled(currentConfig.email_from)" />
            <clr-control-error>{{
                'TOOLTIP.ITEM_REQUIRED' | translate
            }}</clr-control-error>
        </clr-input-container>
        <div
            class="clr-form-control"
            [class.clr-form-control-disabled]="
                disabled(currentConfig.email_ssl)
            ">
            <label class="clr-control-label" for="emailSSL"
                >{{ 'CONFIG.MAIL_SSL' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{ 'CONFIG.SSL_TOOLTIP' | translate }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <div class="clr-control-container">
                <div class="clr-checkbox-wrapper" id="emailSSL-wrapper">
                    <input
                        type="checkbox"
                        name="emailSSL"
                        id="emailSSL"
                        [(ngModel)]="currentConfig.email_ssl.value"
                        [disabled]="disabled(currentConfig.email_ssl)" />
                    <label class="clr-control-label" for="emailSSL"> </label>
                </div>
            </div>
        </div>
        <div
            class="clr-form-control"
            [class.clr-form-control-disabled]="
                disabled(currentConfig.email_insecure)
            ">
            <label class="clr-control-label" for="emailInsecure"
                >{{ 'CONFIG.MAIL_INSECURE' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{ 'CONFIG.INSECURE_TOOLTIP' | translate }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <div class="clr-control-container">
                <div class="clr-checkbox-wrapper" id="emailInsecure-wrapper">
                    <input
                        type="checkbox"
                        name="emailInsecure"
                        id="emailInsecure"
                        [ngModel]="!currentConfig.email_insecure.value"
                        [disabled]="disabled(currentConfig.email_insecure)"
                        (ngModelChange)="setInsecureValue($event)" />
                    <label
                        class="clr-control-label"
                        for="emailInsecure"></label>
                </div>
            </div>
        </div>
    </section>
</form>
<div>
    <button
        type="button"
        id="config_email_save"
        class="btn btn-primary"
        (click)="save()"
        [disabled]="!isValid() || !hasChanges() || inProgress()">
        {{ 'BUTTON.SAVE' | translate }}
    </button>
    <button
        type="button"
        class="btn btn-outline"
        (click)="cancel()"
        [disabled]="!isValid() || !hasChanges() || inProgress()">
        {{ 'BUTTON.CANCEL' | translate }}
    </button>
    <button
        type="button"
        id="ping-test"
        class="btn btn-outline"
        (click)="testMailServer()"
        [disabled]="!isMailConfigValid()">
        {{ 'BUTTON.TEST_MAIL' | translate }}
    </button>
    <span
        id="forTestingMail"
        class="spinner spinner-inline"
        [hidden]="hideMailTestingSpinner"></span>
</div>
