<div class="blade-static __bottom" ng-include="'Modules/$(VirtoCommerce.Catalog)/Scripts/blades/common/templates/ok-cancel.tpl.html'"></div>
<div class="blade-content __medium-wide">
    <div class="blade-inner">
        <div class="inner-block" ng-init="setGridOptions({
                data: 'blade.currentEntities',
                rowTemplate: 'image-list.row.html',
                rowHeight: 60,
                columnDefs: [
                        { name: 'actions', displayName: '', enableColumnResizing: false, enableSorting: false, width: 30, cellTemplate: 'list-actions.cell.html', pinnedLeft:true, enableCellEdit: false  },
                        {
                            name: 'url', displayName: 'platform.blades.asset-list.labels.picture',
                            enableColumnResizing: false, enableSorting: false, width: 60,
                            cellTemplate: 'asset-list-icon.cell.html', enableCellEdit: false 
                        },
                        { name: 'name', displayName: 'platform.blades.asset-list.labels.name', width: 170, enableCellEdit: false  },
                        { name: 'group', displayName: 'platform.blades.asset-list.labels.group', cellTooltip: true, enableCellEdit: false  },
                        { name: 'languageCode', displayName: 'platform.blades.asset-list.labels.language', width: 75, enableCellEdit: false },
                        { name: 'sortOrder', displayName: 'Priority', enableCellEdit: true, editableCellTemplate: 'priority-edit.cell.html', cellTemplate: 'priority.cell.html', sort: { direction: uiGridConstants.ASC }, validators: {required: true, minPriorityValidator: true}}
                ],
                enableCellEditOnFocus: false,
                enablePaginationControls: false
                 })">
            <div class="table-wrapper" ng-if="blade.currentEntities.length">
                <div ui-grid="gridOptions" ui-grid-cellNav ui-grid-validate ui-grid-edit ui-grid-auto-resize ui-grid-save-state ui-grid-selection ui-grid-resize-columns ui-grid-move-columns ui-grid-pinning ui-grid-pagination ui-grid-height></div>
                <ul class="menu __context" role="menu" id="img_menu">
                    <li class="menu-item" ng-click="downloadUrl(contextMenuEntity)">
                        <i class="menu-ico fa fa-download"></i> {{'platform.commands.download' | translate}}
                    </li>
                    <li class="menu-item" ng-click="copyUrl(contextMenuEntity)">
                        <i class="menu-ico fas fa-link"></i> {{'platform.commands.copy-link' | translate}}
                    </li>
                    <li class="menu-item" ng-click='edit(contextMenuEntity)'>
                        <i class="menu-ico fa fa-pencil"></i> {{'platform.commands.edit' | translate}}
                    </li>
                    <li class="menu-item" ng-click='removeItem(contextMenuEntity)'>
                        <i class="menu-ico fas fa-trash-alt"></i> {{'platform.commands.delete' | translate}}
                    </li>
                    <li class="menu-item" ng-click='copyItemID(contextMenuEntity)'>
                        <i class="menu-ico far fa-copy"></i> {{'catalog.commands.copy-id' | translate}}
                    </li>
                </ul>
            </div>
            <div class="note" ng-if="!blade.currentEntities.length">{{ 'platform.list.no-data' | translate }}</div>
        </div>
    </div>
</div>

<script type="text/ng-template" id="image-list.row.html">
   <div ng-click='grid.appScope.selectNode(row.entity)' ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'" class="ui-grid-cell" ng-class="{'ui-grid-row-header-cell': col.isRowHeader, '__hovered': grid.appScope.contextMenuEntity === row.entity, '__selected': grid.appScope.blade.selectedNodeId === row.entity.url}" role="{{col.isRowHeader ? 'rowheader' : 'gridcell' }}" ui-grid-cell style="{{'cursor: ' + ((col.name==='actions' || row.entity.type==='folder' || row.entity.isOpenable) ? 'pointer' : 'default')}}" context-menu="grid.appScope.contextMenuEntity = row.entity" data-target="img_menu"></div>
</script>

<script type="text/ng-template" id="list-actions.cell.html">
    <div class="ui-grid-actions" left-click-menu="grid.appScope.contextMenuEntity = row.entity" data-target="img_menu">
        <i class="fa fa-ellipsis-v"></i>
    </div>
</script>

<script type="text/ng-template" id="asset-list-icon.cell.html">
    <div class="ui-grid-cell-contents">
        <div class="product-img">
            <img ng-attr-id="{{row.entity.id}}" class="image" ng-src="{{COL_FIELD}}"/>
        </div>
    </div>
</script>

<script type="text/ng-template" id="list-handle.cell.html">
    <div class="ui-grid-cell-contents ui-grid-draggable-row-handle" style="cursor: move;">
        <i class="fa fa-bars"></i>
    </div>
</script>

<script type="text/ng-template" id="priority-edit.cell.html">
    <div class="form-editor form-input">
        <input class="form-input" num-type="integer" type="number" ng-min="0" min="0" required ng-model="MODEL_COL_FIELD" ng-change="END_CELL_EDIT" ui-grid-editor />
    </div>
</script>

<script type="text/ng-template" id="priority.cell.html">
    <div class="ui-grid-cell-contents">
        <div class="form-editor form-input">
            <input class="form-input" ng-class="{'ng-invalid' : grid.validate.isInvalid(row.entity,col.colDef)}" value="{{COL_FIELD CUSTOM_FILTERS}}" required readonly="readonly" />
        </div>
    </div>
</script>