<div class="entity-attribute entity-attribute-images"
     {{--ng-init="key = (tab_key >=0  ? block_key+'#'+tab_key : block_key)"--}} {{--Block key is the index of the current block. and tab_key is the index of the current image in a multuple images block--}}
     ng-app="fileUpload"
     ng-controller="fileUploadController"
>

    <label>{{$translations['image']}} @{{ block.typeSlug == 'multiple-images-block' ? tab_key+1 : '' }}</label>

    <div id="image-list-@{{key}}" class="image-list">
        {{--<data ng-init='initFiles(block.fileIds, {{$images['max_images']}})'></data>--}}

        {{--<data imagesToInit="@{{block.fileIds}}"></data>--}}
        <data ng-init='initFiles(block.fileIds, {{$images['max_images']}}, tab_key)'></data>

        <data ng-init="subFolder = block.subFolder"/>
        <data ng-init="dynamic = true"/>
        <input ng-model="fileIds" name="dynamic-image-upload-images-@{{key}}" type="hidden" value="block.fileIds"/>

        {{--<data debugsssss="@{{block.fileIds.length}}"></data>--}}
        {{--<data debugss="{{$images['max_images']}}"></data>--}}

        <ul>
            <li ng-If="canUploadNewImage == true" class="new-image"
                ngf-select="uploadFiles($files, $invalidFiles, maxImages, block.blockId, tab_key)" multiple
                accept="image/*"></li>
        </ul>

        <ul ui-sortable="sortableOptions" ng-model="files">
            <data fileinfo="@{{files}}"></data>

            <li ng-repeat="(index,f) in files" class="image-list-ng">
                <span class="image-thumb">
                    <img ng-src="@{{f.thumb}}" width="50px" height="50px"/>
                </span>

                <span ng-hide="f.loading == true" class="deleteImage" ng-click="deleteImage(index, block.blockId, tab_key)">
                    &Cross;
                </span>
                    {{--<span ng-click="moveImage(index,'left')" ng-show="index > 0" class="move-left move" ng-click="deleteImage(key)" >&larr;</span>--}}
                    {{--<span ng-click="moveImage(index,'right')" ng-show="files.length != 1 && index+1 < files.length" class="move-right move" ng-click="deleteImage(key)" >&rarr;</span>--}}
            </li>
        </ul>

        <div ng-If="canUploadNewImage == false" class="maxImagesUploaded">
            <p>{{ $translations['maxOf']}} {{$images['max_images']}} {{$translations['imagesReached'] }}</p>
        </div>

        <div class="fileUploadError" ng-show="errFiles && errFiles.length != 0" ng-cloak>
            <strong>{{$translations['problemsUploading']}}</strong>
            <table class="errorTable">
                <tr>
                    <th>{{$translations['file']}}</th>
                    <th>{{$translations['error']}}</th>
                    <th>{{$translations['value']}}</th>
                    <th>{{$translations['required']}}</th>
                </tr>
                <tr ng-repeat="f in errFiles">
                    <td>@{{f.name}}</td>

                    {{-- Error type--}}
                    <td ng-show="f.$errorMessages.maxHeight">{{$translations['imagesToHeight']}}</td>
                    <td ng-show="f.$errorMessages.minHeight">{{$translations['imagesToShort']}}</td>
                    <td ng-show="f.$errorMessages.maxWidth">{{$translations['imagesToLong']}}</td>
                    <td ng-show="f.$errorMessages.minWidth">{{$translations['imagesToSmall']}}</td>
                    <td ng-show="f.$errorMessages.maxSize">{{$translations['imagesToLarge']}}</td>
                    <td ng-show="f.$errorMessages.minSize">{{$translations['imagesToSmallFormat']}}</td>

                    {{--File value--}}
                    <td ng-show="f.$errorMessages.maxHeight"> @{{f.$ngfHeight}} {{$translations['pixels']}}</td>
                    <td ng-show="f.$errorMessages.minHeight"> @{{f.$ngfHeight}} {{$translations['pixels']}}</td>
                    <td ng-show="f.$errorMessages.maxWidth"> @{{f.$ngfWidth}} {{$translations['pixels']}}</td>
                    <td ng-show="f.$errorMessages.minWidth"> @{{f.$ngfWidth}} {{$translations['pixels']}}</td>
                    <td ng-show="f.$errorMessages.maxSize">@{{f.size / 1000000|number:1}}MB</td>
                    <td ng-show="f.$errorMessages.minSize">@{{f.size / 1000000|number:1}}MB</td>

                    {{--Wanted value--}}

                    <td ng-show="f.$errorMessages.maxHeight">max. @{{f.$errorParam}} pixels</td>
                    <td ng-show="f.$errorMessages.minHeight">min. @{{f.$errorParam}} pixels</td>
                    <td ng-show="f.$errorMessages.maxWidth">max. @{{f.$errorParam}} pixels</td>
                    <td ng-show="f.$errorMessages.minWidth">min. @{{f.$errorParam}} pixels</td>
                    <td ng-show="f.$errorMessages.maxSize">max. @{{f.$errorParam}}</td>
                    <td ng-show="f.$errorMessages.minSize">min. @{{f.$errorParam}}</td>

                </tr>
            </table>

        </div>

    </div>
</div>