<div class="entity-attribute entity-attribute-images{{{ count($attribute->errors) == 0 ? '' : ' error' }}} {{{$attribute->class}}} @if( !in_array(\Auth::user()->get()->user_role, $attribute->roles) ) hidden @endif photo "
     title="{{{ $attribute->errors[0] or '' }}}"
     ng-app="fileUpload"
     ng-controller="fileUploadController">
    {{ Form::label($attribute->key, $attribute->label) }}
    <div id="image-list-{{{ $attribute->key }}}" class="image-list"
         ng-init='initFiles({{$attribute->getValueAsJson()}})'>

        <data ng-init='uploadSizes = {{$attribute->uploadSizes}}'></data>
        <data ng-init="dynamic = false"/></data>

        <data ng-init='subFolder = "{{$attribute->subFolder}}"'></data>
        {{--Always set the attributekey--}}
        <data ng-init='attributeKey = "{{$attribute->key}}"'></data>

        <input name="{{$attribute->key}}" type="hidden" value="@{{ fileIds }}"/>
        <ul>
            <li class="new-image" ng-class="{disabled:files.length >= {{$attribute->maxImages}}}">
                <span class="disable-overlay" ng-show="files.length >= {{$attribute->maxImages}}"></span>
                <button ngf-select="uploadFiles($files, $invalidFiles, {{$attribute->maxImages}})" multiple
                        accept="image/*"
                        @foreach($attribute->uploadRules as $rule => $value)
                        ngf-{{$rule }}="{{$value}}"
                        @endforeach

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

        <ul class="sortableOptions" 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>
                {{--<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 class="fileUploadError" ng-show="errorMsg.toMany" ng-cloak>
            @{{ errorMsg.toMany}}
        </div>
        <div class="fileUploadMessage" ng-show="files.length >= {{$attribute->maxImages}} && !errorMsg.toMany" ng-cloak>
            {{Config::get('kms::'.$lang.'/translations.maxOf')}} @{{ maxImages }} {{Config::get('kms::'.$lang.'/translations.imagesReached')}}
        </div>
        <div class="fileUploadError" ng-show="errFiles && errFiles.length != 0" ng-cloak>
            <strong>{{Config::get('kms::'.$lang.'/translations.problemsUploading')}}</strong>
            <table class="errorTable">
                <tr>
                    <th>{{Config::get('kms::'.$lang.'/translations.file')}}</th>
                    <th>{{Config::get('kms::'.$lang.'/translations.error')}}</th>
                    <th>{{Config::get('kms::'.$lang.'/translations.value')}}</th>
                    <th>{{Config::get('kms::'.$lang.'/translations.required')}}</th>
                </tr>
                <tr ng-repeat="f in errFiles">
                    <td>@{{f.name}}</td>

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

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

                    {{--Wanted value--}}

                    <td ng-show="f.$errorMessages.maxHeight">max. @{{f.$errorParam}} {{Config::get('kms::'.$lang.'/translations.pixels')}}</td>
                    <td ng-show="f.$errorMessages.minHeight">min. @{{f.$errorParam}} {{Config::get('kms::'.$lang.'/translations.pixels')}}</td>
                    <td ng-show="f.$errorMessages.maxWidth">max. @{{f.$errorParam}} {{Config::get('kms::'.$lang.'/translations.pixels')}}</td>
                    <td ng-show="f.$errorMessages.minWidth">min. @{{f.$errorParam}} {{Config::get('kms::'.$lang.'/translations.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 class="clear"></div>

    </div>
</div>