<div class="panel-viewer-wrapper">

    <div class="panel-viewer-title">
        <i class="fa fa-info-circle"></i>
        {{'label.general-information.title' | translate}}
    </div>

    <form [formGroup]="formGroup" autocomplete="off">
        <div class="panel-viewer-body">
            <div class="row pt-3 pb-4">
                <div class="col-3"></div>
                <div class="col-6 mat-elevation-z3">
                    <div class="row">
                        <div class="col-6">
                            <!-- INICIO :: SECCION AVATAR -->
                            <div class="row pt-2 h-100">
                                <div class="col-12">
                                    <label class="form-field-label" #labelcontrol>{{ 'label.avatar' | translate }}
                                        <span aria-hidden="true"
                                            class="mat-placeholder-required mat-form-field-required-marker"> *</span>
                                    </label>
                                    <div class="h-85">
                                        <div class="image-preview">
                                            <div [ngClass]="{'with-image': formGroup.controls['imageAvatar'].value, 'edit-image': formGroup.controls['imageAvatar'].value, 'without-image': !formGroup.controls['imageAvatar'].value}">
                                                <img src="{{ urlBase + formGroup.controls['imageAvatar'].value }}"
                                                    style="height: 100%;"
                                                    *ngIf="formGroup.controls['imageAvatar'].value">
                                                <div class="image-notfound"
                                                    *ngIf="!formGroup.controls['imageAvatar'].value"></div>
                                            </div>
                                            <button type="button" mat-stroked-button (click)="fileInput.click()"
                                                *ngIf="!viewMode" class="btn-upload-image">
                                                <mat-icon>file_upload</mat-icon>
                                                <!-- {{text | translate}} -->
                                            </button>
                                        </div>
                                    </div>
                                    <input type="file" #fileInput name="fileUpload"
                                        (change)="uploadFiles($event.target.files)"
                                        style="display:none;" >
                                </div>
                            </div>
                            <!-- FIN :: SECCION AVATAR -->
                        </div>
                        <div class="col-6">
                            <div class="row pt-2">
                                <div class="col-12">
                                    <mat-form-field class="amd-form-control">
                                        <input matInput [placeholder]="'label.name' | translate" formControlName="name"
                                            maxlength="50" required>
                                    </mat-form-field>
                                </div>
                            </div>
                            <div class="row pt-2">                        
                                <div class="col-12">
                                    <mat-form-field class="amd-form-control">
                                        <textarea matInput cdkTextareaAutosize class="overflow-auto"
                                            [placeholder]="'label.description' | translate" maxlength="200"
                                            formControlName="description" #autosize="cdkTextareaAutosize" cdkAutosizeMinRows="3"
                                            cdkAutosizeMaxRows="6" required></textarea>
                                    </mat-form-field>
                                </div>
                            </div>
                            <div class="row pt-2">
                                <div class="col-12">
                                    <mat-form-field class="amd-form-control">
                                        <input matInput [placeholder]="'label.version' | translate" formControlName="version"
                                            maxlength="15" required pattern="[0-9]{1,2}[.]{1}[0-9]{1,2}[.]{1}[0-9]{1,2}">
                                        <mat-hint>##.##.##</mat-hint>
                                    </mat-form-field>
                                </div>
                            </div>
                            <div class="row pt-2">
                                <div class="col-12">
                                    <mat-form-field class="amd-form-control">
                                        <mat-select [placeholder]="'label.country' | translate" formControlName="country"
                                            required (selectionChange)="onCountryChange($event, true)">
                                            <mat-option *ngFor="let country of countries" [value]="country.id">
                                                {{country.name | translate}}
                                            </mat-option>
                                        </mat-select>
                                    </mat-form-field>
                                </div>
                            </div>
                            <div class="row pt-2">                        
                                <div class="col-12">
                                    <mat-form-field class="amd-form-control">
                                        <mat-select [placeholder]="'label.timezone' | translate" formControlName="timezone"
                                            required>
                                            <mat-option *ngFor="let timezone of timezones" [value]="timezone">
                                                {{timezone | translate}}
                                            </mat-option>
                                        </mat-select>
                                    </mat-form-field>
                                </div>
                            </div>
                            <div class="row pt-2">
                                <div class="col-12">
                                    <mat-form-field class="amd-form-control">
                                        <mat-select [placeholder]="'label.language' | translate" formControlName="language" required >
                                            <mat-option *ngFor="let language of languages" [value]="language.code">
                                                {{language.name | translate}}
                                            </mat-option>
                                        </mat-select>
                                    </mat-form-field>
                                </div>
                            </div>
                            <div class="row pt-2">
                                <div class="col-12">
                                    <mat-form-field class="amd-form-control">
                                        <mat-select [placeholder]="'label.type' | translate" formControlName="type" required >
                                            <mat-option *ngFor="let type of types" [value]="type.code">
                                                {{type.name | translate}}
                                            </mat-option>
                                        </mat-select>
                                    </mat-form-field>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-3"></div>
            </div>

            <div class="footer-bar">
                <div class="row">
                    <div class="col-12">
                        <button mat-stroked-button (click)="next()" class="pull-right" [disabled]="formGroup.invalid">
                            <span class="pr-1">{{'btn.next' | translate}}</span>
                            <i class="fa fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>

</div>