<div class="modal show fade in" [@toggleState]="showModalTest" tabindex="-1" role="dialog" aria-hidden="true" #thisModal>
    <div class="modal-dialog modal-md ">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" (click)="cancelImageUpload()">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h6 class="image-gallery-title">{{'modal_image_gallery.label.image_gallery' | translate }}</h6>
            </div>
            <div class="modal-body">
                <div class="container-fluid">

                    <div *ngIf="loadingPictures && ( dcd['sensorId'] || dcd['sensors'])" class="info-text"> Loading the gallery
                        <i class="fa fa-spinner fa-spin"></i>
                    </div>

                    <div *ngIf="(!dcd['sensorId'] && !dcd['sensors'] ) && !previewMode && !loadingPictures" class="info-text"> {{ 'modal_image_gallery.label.please_attach_a_sensor_in_order_to_upload_photos' | translate}}</div>

                    <div *ngIf="(!dcd['sensorId'] && !dcd['sensors']) && previewMode && !loadingPictures" class="info-text"> {{ 'modal_image_gallery.label.please_attach_a_sensor_in_order_to_view_photos' | translate}} </div>

                    <div *ngIf="!loadingPictures && imagesUrlList.length == 0 && (dcd['sensorId'] || dcd['sensors'])" class="info-text"> No images in this gallery! </div>

                    <div class="image-gallery" *ngIf="!loadingPictures && (dcd['sensorId'] || dcd['sensors'])">
                        <div *ngFor="let imageFile of imagesUrlList; let i = index" class="image-slides" [ngClass]="{'show-picture': slideIndex == i}">
                            <img src="{{imageFile.imageUrl}}" class="image-slide">
                        </div>

                        <a class="prev" (click)="changePicture(-1)" *ngIf="imagesUrlList.length != 0" [ngClass]="{'change-slides-preview': !dashboardService.editMode, 'prev-firefox': isFirefox, 'prev-ie': isIE}">&#10094;</a>
                        <a class="next" (click)="changePicture(1)" *ngIf="imagesUrlList.length != 0" [ngClass]="{'change-slides-preview': !dashboardService.editMode}">&#10095;</a>

                    </div>

                    <div class="image-row" *ngIf="!loadingPictures && imagesUrlList.length != 0" [ngClass]="{'image-row-preview': !dashboardService.editMode}">
                        <div class="image" *ngFor="let imageFile of imagesUrlList; let i = index">
                            <div (click)="removeImage(i)" class="remove-selected-image" *ngIf="dashboardService.editMode">
                                <span aria-hidden="true">&times;</span>
                            </div>
                            <img src="{{imageFile.imageUrl}}" (click)="currentSlide(i)" class="hover-shadow cursor demo" [ngClass]="{'select-image': slideIndex == i}">
                        </div>
                    </div>

                    <div class="add-image" *ngIf="!loadingPictures && dashboardService.editMode && (dcd['sensorId'] || dcd['sensors'])">
                        <input #fileInput type="file" name="file" id="{{inputId}}" class="inputfile" (change)="imagesUpload($event)" multiple class="hover-shadow cursor demo"
                        />
                        <div class="plus-wrapper">
                            <label for="{{inputId}}" class="image-plus">
                                <i class="fa fa-plus plusIcon" aria-hidden="true"></i>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="overlay" [@toggleOverlay]="showOverlay"></div>

<modal-message #modal></modal-message>