<div class="umb-editor umb-mediapicker" ng-controller="Umbraco.PropertyEditors.MediaPickerController">

    <p ng-if="(images|filter:{trashed:true}).length == 1"><localize key="mediaPicker_pickedTrashedItem"></localize></p>
    <p ng-if="(images|filter:{trashed:true}).length > 1"><localize key="mediaPicker_pickedTrashedItems"></localize></p>
    
    <div data-element="sortable-thumbnails" class="flex error">
        <ul ui-sortable="sortableOptions" ng-model="images" class="umb-sortable-thumbnails">
            <li data-element="sortable-thumbnail-{{$index}}" class="umb-sortable-thumbnails__wrapper" ng-repeat="image in images track by $index">

                <!-- IMAGE -->
                <img ng-class="{'trashed': image.trashed}" ng-src="{{image.thumbnail}}" alt="" ng-show="image.thumbnail" title="{{image.trashed ? 'Trashed: ' + image.name : image.name}}" />

                <!-- SVG -->
                <img ng-class="{'trashed': image.trashed}" ng-if="image.metaData.umbracoExtension.Value === 'svg'" ng-src="{{image.metaData.umbracoFile.Value}}" alt="" title="{{image.trashed ? 'Trashed: ' + image.name : image.name}}" />
                <img ng-class="{'trashed': image.trashed}" ng-if="image.extension === 'svg'" ng-src="{{image.file}}" alt="" />

                <!-- FILE -->
                <span class="umb-icon-holder" ng-hide="image.thumbnail || image.metaData.umbracoExtension.Value === 'svg' || image.extension === 'svg'">
                    <i class="icon {{image.icon}} large"></i>
                    <small>{{image.name}}</small>
                </span>

                <div class="umb-sortable-thumbnails__actions" data-element="sortable-thumbnail-actions">
                    <a class="umb-sortable-thumbnails__action" data-element="action-edit" href="" ng-click="goToItem(image)">
                        <i class="icon icon-edit"></i>
                    </a>
                    <a class="umb-sortable-thumbnails__action -red" data-element="action-remove" href="" ng-click="remove($index)">
                        <i class="icon icon-delete"></i>
                    </a>
                </div>
            </li>
            <li style="border: none;">
                <a data-element="sortable-thumbnails-add" href="#" class="add-link" ng-click="add()" ng-class="{'add-link-square': (images.length === 0 || isMultiPicker)}" ng-if="showAdd()" prevent-default>
                    <i class="icon icon-add large"></i>
                </a>
            </li>
        </ul>
    </div>

    <umb-overlay
        data-element="overlay-media-picker"
        ng-if="mediaPickerOverlay.show"
        model="mediaPickerOverlay"
        position="right"
        view="mediaPickerOverlay.view">
    </umb-overlay>

</div>
