<div class="entity-attribute entity-attribute-images"
     ng-init="key = (tab_key >=0  ? block_key+'#'+tab_key : block_key)"

     ng-app="fileUpload"
     ng-controller="fileUploadController">

    <label><?php echo Config::get('kms::'.$lang.'/translations.image'); ?> {{ block.typeSlug == 'multiple-images-block' ?  tab_key+1 : '' }}</label>

    <div id="image-list-{{key}}" class="image-list">
        <data ng-if="!block.tab"> {{block.fileIds=fileIds;""}}</data>
        <data ng-init='initFiles(block.images,block.max_images)'></data>
        <data ng-if="block.tab">{{block.tab[tab_key].fileIds=fileIds;""}} </data>
        <data ng-if="block.tab" ng-init='initFiles(block.tab[tab_key].images,block.tab[tab_key].max_images)'></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"
               value=""/>

        <ul>
            <li class="new-image" ng-class="{disabled:files.length >= maxImages}">
                <span class="disable-overlay" ng-show="files.length >=maxImages"></span>
                <button ngf-select="uploadFiles($files, $invalidFiles, maxImages)" multiple
                        accept="image/*"


                >
                </button>
            </li>
        </ul>

        <ul ui-sortable="sortableOptions" ng-model="files">
            <li ng-repeat="(index,f) in files" style="font:smaller" class="image-list-ng">
            <span class="image-thumb">
                <img src="{{f.thumb_image_url}}" width="50px" height="50px"/>
            </span>
                <span ng-hide="f.loading == true" class="deleteImage" ng-click="deleteImage(index)">&Cross;</span>
                <?php /*<span ng-click="moveImage(index,'left')" ng-show="index > 0" class="move-left move" ng-click="deleteImage(key)" >&larr;</span>*/ ?>
                <?php /*<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 class="fileUploadError" ng-show="errorMsg.toMany" ng-cloak>
            {{ errorMsg.toMany}}
        </div>
        <div class="fileUploadMessage" ng-show="files.length >= maxImages && !errorMsg.toMany" ng-cloak>
            <?php echo Config::get('kms::'.$lang.'/translations.maxOf'); ?> {{ maxImages }} <?php echo Config::get('kms::'.$lang.'/translations.imagesReached'); ?></div>
        <div class="fileUploadError" ng-show="errFiles && errFiles.length != 0" ng-cloak>
            <strong><?php echo Config::get('kms::'.$lang.'/translations.problemsUploading'); ?></strong>
            <table class="errorTable">
                <tr>
                    <th><?php echo Config::get('kms::'.$lang.'/translations.file'); ?></th>
                    <th><?php echo Config::get('kms::'.$lang.'/translations.error'); ?></th>
                    <th><?php echo Config::get('kms::'.$lang.'/translations.value'); ?></th>
                    <th><?php echo Config::get('kms::'.$lang.'/translations.required'); ?></th>
                </tr>
                <tr ng-repeat="f in errFiles">
                    <td>{{f.name}}</td>

                    <?php /* Error type*/ ?>
                    <td ng-show="f.$errorMessages.maxHeight"><?php echo Config::get('kms::'.$lang.'/translations.imagesTooHeight'); ?></td>
                    <td ng-show="f.$errorMessages.minHeight"><?php echo Config::get('kms::'.$lang.'/translations.imagesTooShort'); ?></td>
                    <td ng-show="f.$errorMessages.maxWidth"><?php echo Config::get('kms::'.$lang.'/translations.imagesTooLong'); ?></td>
                    <td ng-show="f.$errorMessages.minWidth"><?php echo Config::get('kms::'.$lang.'/translations.imagesTooSmall'); ?></td>
                    <td ng-show="f.$errorMessages.maxSize"><?php echo Config::get('kms::'.$lang.'/translations.imagesTooLarge'); ?></td>
                    <td ng-show="f.$errorMessages.minSize"><?php echo Config::get('kms::'.$lang.'/translations.imagesTooSmallFormat'); ?></td>

                    <?php /*File value*/ ?>
                    <td ng-show="f.$errorMessages.maxHeight">    {{f.$ngfHeight}} <?php echo Config::get('kms::'.$lang.'/translations.pixels'); ?></td>
                    <td ng-show="f.$errorMessages.minHeight">    {{f.$ngfHeight}} <?php echo Config::get('kms::'.$lang.'/translations.pixels'); ?></td>
                    <td ng-show="f.$errorMessages.maxWidth">    {{f.$ngfWidth}} <?php echo Config::get('kms::'.$lang.'/translations.pixels'); ?></td>
                    <td ng-show="f.$errorMessages.minWidth">    {{f.$ngfWidth}} <?php echo Config::get('kms::'.$lang.'/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>

                    <?php /*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>