<div class="entity-attribute entity-attribute-images<?php echo e(count($attribute->errors) == 0 ? '' : ' error'); ?> <?php echo e($attribute->class); ?>"
     title="<?php echo e(isset($attribute->errors[0]) ? $attribute->errors[0] : ''); ?>"
     ng-app="fileUpload"
     ng-controller="fileUploadController">
    <?php echo Form::label($attribute->key, $attribute->label); ?>

    <div id="image-list-<?php echo e($attribute->key); ?>" class="image-list" ng-init='initFiles(<?php echo $attribute->getValueAsJson(); ?>)'>

        <input name="<?php echo $attribute->key; ?>" type="hidden" value="{{ fileIds }}" />

        <ul>
            <li class="new-image" ng-class="{disabled:files.length >= <?php echo $attribute->maxImages; ?>}" >
                <span class="disable-overlay" ng-show="files.length >= <?php echo $attribute->maxImages; ?>"></span>
                <button ngf-select="uploadFiles($files, $invalidFiles, <?php echo $attribute->maxImages; ?>)" multiple
                accept="image/*" ngf-max-height="1000" ngf-max-size="1MB">
                </button>
            </li>
            <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 class="deleteImage" ng-click="deleteImage(index)" >&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>
            <li ng-repeat="f in errFiles" style="font:smaller">{{f.name}} {{f.$error}} {{f.$errorParam}}
            </li>
            </ul>

    </div>

</div>