<div class="blade-static" ng-if="blade.item.associations.length" style="height:75px">
    <div class="note" style="margin-left: 20px; width: 490px; white-space: normal;">{{ 'catalog.blades.item-associations-list.labels.sorting-prompt' | translate }}</div>
</div>
<div class="blade-content __medium-wide">
    <div class="blade-inner">
        <div class="inner-block">
            <div ng-if="!blade.item.associations.length" class="note">{{ 'catalog.blades.item-associations-list.descr.no-associations' | translate }}</div>
            <div class="table-wrapper" ng-if="blade.item.associations.length" ng-init="setGridOptions({
                    rowTemplate: 'assoc-list.row.html',
                    data: 'blade.item.associations',
                    rowHeight: 61,
                    enableSorting: false,
                    virtualizationThreshold: 1000,
                    columnDefs: [
                        { name: 'actions', displayName: '', enableColumnResizing: false, enableSorting: false, width: 30, cellTemplate: 'list-actions.cell.html', pinnedLeft:true },
                        {
                            name: 'associatedObjectImg', displayName: 'catalog.blades.item-associations-list.labels.picture',
                            enableColumnResizing: false, width: 60, cellTemplate: 'icon.cell.html'
                        },
                        { name: 'customField', displayName: 'catalog.blades.item-associations-list.labels.name', field: 'associatedObjectName', cellTemplate: 'productName.cell.html'},
                        { name: '$$catalogname', displayName: 'Catalog', cellTooltip: 'Catalog', field: '$$catalog.name', width: 120 },
                        { name: 'quantity', displayName: 'catalog.blades.item-associations-list.labels.quantity', cellTooltip: 'catalog.blades.item-associations-list.descr.quantity', width: 120 }
                    ]})">
                <div ui-grid="gridOptions" ui-grid-auto-resize ui-grid-save-state ui-grid-selection ui-grid-resize-columns ui-grid-move-columns ui-grid-pinning ui-grid-draggable-rows ui-grid-height></div>
                <ul class="menu __context" role="menu" id="ial_menu">
                    <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='selectNode(contextMenuEntity)'>
                        <i class="menu-ico fa fa-edit"></i> {{'catalog.commands.open-item' | translate}}
                    </li>
                    <li class="menu-item" ng-click='deleteList([contextMenuEntity])'>
                        <i class="menu-ico fas fa-trash-alt"></i> {{'platform.commands.delete' | translate}}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script type="text/ng-template" id="assoc-list.row.html">
    <div grid="grid" class="ui-grid-draggable-row" draggable="true">
        <div ng-click='grid.appScope.edit(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': row.entity.associatedObjectId ===grid.appScope.selectedNodeId}" role="{{col.isRowHeader ? 'rowheader' : 'gridcell' }}" ui-grid-cell style="{{'cursor: ' + (col.name==='actions' ? 'pointer' : 'move')}}" context-menu="grid.appScope.contextMenuEntity = row.entity" data-target="ial_menu"></div>
    </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="ial_menu">
        <i class="fa fa-ellipsis-v"></i>
    </div>
</script>
<script type="text/ng-template" id="icon.cell.html">
    <div class="ui-grid-cell-contents">
        <div class="product-img">
            <img class="image" ng-src="{{COL_FIELD}}" ng-if="COL_FIELD">
            <i class="table-ico fas fa-image" ng-if="!COL_FIELD"></i>
        </div>
    </div>
</script>
<script type="text/ng-template" id="productName.cell.html">
    <div class="ui-grid-cell-contents">
        <div class="table-t" title="{{COL_FIELD}}">{{COL_FIELD}}</div>
        <div class="table-descr">Type: {{row.entity.type}}</div>
        <div class="table-descr" ng-if="row.entity.tags && row.entity.tags.length">{{ 'catalog.blades.item-associations-list.labels.tags' | translate }}: {{row.entity.tags.join() }}</div>
    </div>
</script>