<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 border-all">
                    <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">
                            <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>
                    </div>
                    <div class="row pt-2">
                        <div class="col-12">
                            <div class="uploadfilecontainer" xdfFileDragDrop (click)="fileInput.click()"
                                (fileDropped)="uploadFiles($event)" *ngIf="allowDragAndDrop">
                                <button type="button" class="btn-upload-image" mat-button color="warn"
                                    class="upload_button">
                                    <mat-icon>file_upload</mat-icon>
                                    {{text | translate}}
                                </button>
                            </div>
                            <div *ngIf="!allowDragAndDrop">
                                <div [ngStyle]="{'height': (height && height !== '') ? (height) : '','width': (width && width !== '') ? (width) : ''}"
                                    class="image-preview">
                                    <div *ngIf="type === 'image'"
                                        [ngClass]="{'with-image': formGroup.controls['imageAvatar'].value && disabled, 'edit-image': formGroup.controls['imageAvatar'].value && !disabled, '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="!disabled" [ngClass]="{'btn-upload-image': type === 'image'}">
                                        <mat-icon>file_upload</mat-icon>
                                        {{text | translate}}
                                    </button>
                                </div>
                            </div>
                            <ul class="uploadList">
                                <li *ngFor="let file of files" [@fadeInOut]="file.state">
                                    <mat-progress-bar [value]="file.progress"></mat-progress-bar>
                                    <span id="file-label">
                                        {{file.data.name}}
                                        <a title="Retry" (click)="retryFile(file)" *ngIf="file.canRetry">
                                            <mat-icon>refresh</mat-icon>
                                        </a>
                                        <a title="Cancel" (click)="cancelFile(file)" *ngIf="file.canCancel">
                                            <mat-icon>cancel</mat-icon>
                                        </a>
                                    </span>
                                </li>
                            </ul>
                            <input type="file" #fileInput name="fileUpload" [multiple]="multiple"
                                (change)="uploadFiles($event.target.files)" accept="{{accept}}" style="display:none;" />
                        </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>