<div class="dialog-header">
    <div class="heading-l" translate="general-config-screen.title"></div>
    <div translate="general-config-screen.subtitle"></div>
</div>
<form (submit)="save()" [formGroup]="form">
    <div class="dialog-content">
        <div class="dialog-content-left">
            <div class="iqser-input-group required">
                <label [translate]="'general-config-screen.form.host'"></label>
                <input
                    formControlName="host"
                    name="host"
                    placeholder="{{ 'general-config-screen.form.host-placeholder' | translate }}"
                    type="text"
                />
            </div>

            <div class="iqser-input-group w-100">
                <label [translate]="'general-config-screen.form.port'"></label>
                <input formControlName="port" name="port" type="number" />
            </div>

            <div class="iqser-input-group required">
                <label [translate]="'general-config-screen.form.from'"></label>
                <input
                    formControlName="from"
                    name="from"
                    placeholder="{{ 'general-config-screen.form.from-placeholder' | translate }}"
                    type="email"
                />
            </div>

            <div class="iqser-input-group">
                <label [translate]="'general-config-screen.form.from-display-name'"></label>
                <input
                    formControlName="fromDisplayName"
                    name="fromDisplayName"
                    placeholder="{{ 'general-config-screen.form.from-display-name-placeholder' | translate }}"
                    type="text"
                />
                <span class="hint" translate="general-config-screen.form.from-display-name-hint"></span>
            </div>

            <div class="iqser-input-group">
                <label [translate]="'general-config-screen.form.reply-to'"></label>
                <input
                    formControlName="replyTo"
                    name="replyTo"
                    placeholder="{{ 'general-config-screen.form.reply-to-placeholder' | translate }}"
                    type="text"
                />
            </div>

            <div class="iqser-input-group">
                <label [translate]="'general-config-screen.form.reply-to-display-name'"></label>
                <input
                    formControlName="replyToDisplayName"
                    name="replyToDisplayName"
                    placeholder="{{ 'general-config-screen.form.reply-to-display-name-placeholder' | translate }}"
                    type="text"
                />
            </div>

            <div class="iqser-input-group">
                <label [translate]="'general-config-screen.form.envelope-from'"></label>
                <input
                    formControlName="envelopeFrom"
                    name="envelopeFrom"
                    placeholder="{{ 'general-config-screen.form.envelope-from-placeholder' | translate }}"
                    type="text"
                />
                <span [translate]="'general-config-screen.form.envelope-from-hint'" class="hint"></span>
            </div>
        </div>
        <div>
            <div class="iqser-input-group">
                <label [translate]="'general-config-screen.form.ssl'"></label>
                <mat-slide-toggle color="primary" formControlName="ssl"></mat-slide-toggle>
            </div>
            <div class="iqser-input-group">
                <label [translate]="'general-config-screen.form.starttls'"></label>
                <mat-slide-toggle color="primary" formControlName="starttls"></mat-slide-toggle>
            </div>
            <div class="iqser-input-group">
                <label [translate]="'general-config-screen.form.auth'"></label>
                <mat-slide-toggle
                    (change)="onToggleAuthentication($event.checked)"
                    color="primary"
                    formControlName="auth"
                ></mat-slide-toggle>
            </div>
            <div
                (click)="openAuthConfigDialog(true)"
                *ngIf="form.get('auth').value"
                [translate]="'general-config-screen.form.change-credentials'"
                class="link-action"
            ></div>
        </div>
    </div>
    <div class="dialog-actions">
        <iqser-icon-button
            [disabled]="form.invalid || !changed"
            [label]="'general-config-screen.actions.save' | translate"
            [submit]="true"
            [type]="iconButtonTypes.primary"
            [attr.help-mode-key]="'smtp_configurations'"
        ></iqser-icon-button>

        <iqser-icon-button
            (action)="testConnection()"
            [disabled]="form.invalid"
            [label]="'general-config-screen.actions.test-connection' | translate"
            [type]="iconButtonTypes.dark"
        ></iqser-icon-button>
    </div>
</form>
