<div class="umb-media-grid">
    <div class="umb-media-grid__item" ng-click="clickItem(item, $event, $index)" ng-repeat="item in items | filter:filterBy" ng-style="item.flexStyle" ng-class="{'-selected': item.selected, '-file': !item.thumbnail}">
        <div>

            <i ng-show="item.selected" class="icon-check umb-media-grid__checkmark"></i>

            <div class="umb-media-grid__item-overlay" ng-class="{'-locked': item.selected}" ng-click="clickItemName(item, $event, $index)">
                <i ng-if="onDetailsHover" class="icon-info umb-media-grid__info" ng-mouseover="hoverItemDetails(item, $event, true)" ng-mouseleave="hoverItemDetails(item, $event, false)"></i>
                <div class="umb-media-grid__item-name">{{item.name}}</div>
            </div>

            <div class="umb-media-grid__image-background" ng-if="item.thumbnail"></div>
            <img class="umb-media-grid__item-image" width="{{item.width}}" height="{{item.height}}" ng-if="item.thumbnail" ng-src="{{item.thumbnail}}" alt="{{item.name}}" draggable="false"/>
            <img class="umb-media-grid__item-image-placeholder" ng-if="!item.thumbnail" src="assets/img/transparent.png" alt="{{item.name}}" draggable="false"/>

            <i class="umb-media-grid__item-icon {{ item.icon }}" ng-if="!item.thumbnail"></i>

        </div>
    </div>
</div>
