<div class="entity-attribute entity-attribute-tag-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); ?>

    <span id="image-list-<?php echo e($attribute->key); ?>" class="image-list"
         ng-init='initFiles(<?php echo $attribute->getValueAsJson(); ?>)'>
        <data ng-init='uploadSizes = <?php echo $attribute->uploadSizes; ?>'></data>
        <data ng-init="dynamic = false"></data>
        <input name="<?php echo $attribute->key; ?>" type="hidden" value="{{ fileIds }}"/>
        <input name="tags-<?php echo $attribute->key; ?>" type="hidden" value="{{ tagIds }}" ng-init="setTagIds(files)" />
        <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/*"
                        <?php foreach($attribute->uploadRules as $rule => $value): ?>
                        ngf-<?php echo $rule; ?>="<?php echo $value; ?>"
                        <?php 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 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>*/ ?>

                <?php /*Start of tag select*/ ?>

                <span class="tag-multi-select" ng-controller="KmsAttributeTagMultiSelectController" >

                    <div class="content">
                        <ui-select
                                   ui-sortable=""
                                   multiple
                                   allow-clear="false"
                                   id="tag_{{f.id}}"
                                   theme="select2"
                                   ng-model="f.tags"
                                   ng-init="initWithValue(f, f.tagIds)"
                                   on-select="addToTags($item, f.id)"
                                   on-remove="removeFromTags($item, f.id)"
                        >
                            <ui-select-match placeholder="tags">{{$item.content}}</ui-select-match>
                            <ui-select-choices repeat="selectObject in selectData | propsFilter: {content: $select.search}">
                                <div ng-bind-html="selectObject.htmlContent"></div>
                            </ui-select-choices>
                        </ui-select>
                    </div>

                    <div id="select-data-{{index}}" class="select-data" style="display: none;">
                        <?php foreach($attribute->getData() as $dataObject): ?>
                            <div data-value="<?php echo e($dataObject['value']); ?>" data-full-value="<?php echo e(isset($dataObject['fullValue']) ? $dataObject['fullValue'] : $dataObject['value']); ?>" data-content="<?php echo e($dataObject['content']); ?>"><?php echo isset($dataObject['htmlContent']) ? $dataObject['htmlContent'] : $dataObject['content']; ?></div>
                        <?php endforeach; ?>
                    </div>
                </span>
                <?php /*End of tag select*/ ?>
            </li>
        </ul>

        <div class="fileUploadError" ng-show="errFiles" ng-cloak>
            <strong>Problemen bij uploaden</strong>
            <table class="errorTable">
                <tr>
                    <th>Bestand</th>
                    <th>Fout</th>
                    <th>Waarde</th>
                    <th>Vereiste</th>
                </tr>
                <tr ng-repeat="f in errFiles">
                    <td>{{f.name}}</td>

                    <?php /* Error type*/ ?>
                    <td ng-show="f.$errorMessages.maxHeight">bestand is te hoog</td>
                    <td ng-show="f.$errorMessages.minHeight">bestand is niet hoog genoeg</td>
                    <td ng-show="f.$errorMessages.maxWidth">bestand is te breed</td>
                    <td ng-show="f.$errorMessages.minWidth">bestand is niet breed genoeg</td>
                    <td ng-show="f.$errorMessages.maxSize">bestand is te groot</td>
                    <td ng-show="f.$errorMessages.minSize">bestand is niet groot genoeg</td>

                    <?php /*File value*/ ?>
                    <td ng-show="f.$errorMessages.maxHeight">    {{f.$ngfHeight}} pixels</td>
                    <td ng-show="f.$errorMessages.minHeight">    {{f.$ngfHeight}} pixels</td>
                    <td ng-show="f.$errorMessages.maxWidth">    {{f.$ngfWidth}} pixels</td>
                    <td ng-show="f.$errorMessages.minWidth">    {{f.$ngfWidth}} 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 class="clear"></div>
</div>