<div class="items-container animated fadeIn">
    <div id="navigation" class="mb-8">
        <div class="prev-page prevent-select indigo_primary_background mat-elevation-z8" (click)="goBack(1)" matRipple>
            <mat-icon style="color: white;">arrow_back</mat-icon>
            <div class="page-name ml-4">Configuración de correos electrónicos</div>
        </div>
    </div>
    <mat-card class="override-elevation-z8" style="width: 100%; height: 100%;">
        <mat-card-title style="text-align: center;" class="prevent-select">Registrar nuevo servidor</mat-card-title>
        <mat-card-content>
            <div class="loader-container prevent-select animated fadeIn fast" *ngIf="isLoading">
                <mat-spinner></mat-spinner>
                <h2 class="loader-label">Cargando...</h2>
            </div>
            <div class="error-container prevent-select animated fadeIn fast" *ngIf="!isLoading && hasError">
                <mat-icon style="color: #e53935; transform: scale(5); margin: 48px;">error</mat-icon>
                <h1 style="color: #e53935;">¡Error!</h1>
                <p style="font-style: italic; font-size: 16px; overflow-wrap: anywhere; text-align: center;">{{ errorStr }}</p>
            </div>
            <div class="mat-card-content-form prevent-select animated fadeIn" *ngIf="!isLoading && !hasError">
                <form [formGroup]="serverForm">
                    <div class="form-container">
                        <div class="form-input">
                            <mat-form-field class="full-width" appearance="outline">
                                <mat-label>Host</mat-label>
                                <input matInput placeholder="" formControlName="host">
                                <mat-icon matSuffix>link</mat-icon>
                                <mat-error *ngIf="serverForm.invalid">{{ getErrorMessage("host") }}</mat-error>
                            </mat-form-field>
                        </div>
                        <div class="form-input">
                            <mat-form-field class="full-width" appearance="outline">
                                <mat-label>Usuario</mat-label>
                                <input matInput placeholder="" formControlName="user">
                                <mat-icon matSuffix>person</mat-icon>
                                <mat-error *ngIf="serverForm.invalid">{{ getErrorMessage("user") }}</mat-error>
                            </mat-form-field>
                        </div>
                        <div class="form-input">
                            <mat-form-field class="full-width" appearance="outline">
                                <mat-label>Prioridad</mat-label>
                                <input matInput placeholder="" formControlName="priority" type="number" (keypress)="filterNumberValue($event)">
                                <mat-icon matSuffix>priority_high</mat-icon>
                                <mat-error *ngIf="serverForm.invalid">{{ getErrorMessage("priority") }}</mat-error>
                            </mat-form-field>
                        </div>
                        <div class="form-input">
                            <mat-form-field class="full-width" appearance="outline">
                                <mat-label>Contraseña</mat-label>
                                <input matInput placeholder="" formControlName="pass">
                                <mat-icon matSuffix>password</mat-icon>
                                <mat-error *ngIf="serverForm.invalid">{{ getErrorMessage("pass") }}</mat-error>
                            </mat-form-field>
                        </div>
                        <div class="form-input">
                            <mat-form-field class="full-width" appearance="outline">
                                <mat-label>Seguridad SMTP</mat-label>
                                <input matInput placeholder="" formControlName="smtpsec">
                                <mat-icon matSuffix>security</mat-icon>
                                <mat-error *ngIf="serverForm.invalid">{{ getErrorMessage("smtpsec") }}</mat-error>
                            </mat-form-field>
                        </div>
                        <div class="form-input">
                            <mat-form-field class="full-width" appearance="outline">
                                <mat-label>Puerto</mat-label>
                                <input matInput placeholder="" formControlName="port">
                                <mat-icon matSuffix>wifi_tethering</mat-icon>
                                <mat-error *ngIf="serverForm.invalid">{{ getErrorMessage("port") }}</mat-error>
                            </mat-form-field>
                        </div>
                        <div class="form-input">
                            <mat-form-field class="full-width" appearance="outline">
                                <mat-label>Tiempo de espera</mat-label>
                                <input matInput placeholder="" formControlName="time">
                                <mat-icon matSuffix>timer</mat-icon>
                                <mat-error *ngIf="serverForm.invalid">{{ getErrorMessage("time") }}</mat-error>
                            </mat-form-field>
                        </div>
                        <div class="form-input">
                            <mat-form-field class="full-width" appearance="outline">
                                <mat-label>Autorización SMTP</mat-label>
                                <input matInput placeholder="" formControlName="smtpaut">
                                <mat-icon matSuffix>verified_user</mat-icon>
                                <mat-error *ngIf="serverForm.invalid">{{ getErrorMessage("smtpaut") }}</mat-error>
                            </mat-form-field>
                        </div>
                        <div class="form-input">
                            <mat-form-field class="full-width" appearance="outline">
                                <mat-label>Portales</mat-label>
                                <mat-select formControlName="admport" multiple>
                                    <mat-option *ngFor="let module of modules" [value]="module.IDMODULO">{{ module.NOMBREMODULO }}</mat-option>
                                </mat-select>
                                <mat-icon matSuffix>grid_view</mat-icon>
                                <mat-error *ngIf="serverForm.invalid">{{ getErrorMessage("admport") }}</mat-error>
                            </mat-form-field>
                        </div>
                    </div>
                </form>
            </div>
        </mat-card-content>
        <mat-card-actions align="end" *ngIf="!isLoading" class="animated fadeIn">
            <button mat-button *ngIf="isNew" (click)="registerEmailServer()">Guardar registro</button>
            <button mat-button *ngIf="!isNew" (click)="updateEmailServer()">Actualizar registro</button>
        </mat-card-actions>
    </mat-card>
</div>