<div class="blade-content __large-wide">
  <div class="blade-inner" ng-if="blade.sectionEntity.type === 'Product'">
    <div class="inner-block" ng-init="setGridOptions({
                    rowTemplate: 'option-list.row.html',
                    data: 'blade.sectionEntity.options',
                    rowHeight: 61,
                    enableSorting: false,
                    columnDefs: [
                        { name: 'actions', displayName: '', enableColumnResizing: false, width: 30, cellTemplate: 'option-list-actions.cell.html', pinnedLeft:true },
                        {
                            name: 'productImageUrl', displayName: 'catalog.blades.section-details.labels.picture',
                            enableColumnResizing: false, width: 60, cellTemplate: 'option-list-icon.cell.html'
                        },
                        { name: 'productName', displayName: 'catalog.blades.section-details.labels.product-name'},
                        { name: 'quantity', displayName: 'catalog.blades.section-details.labels.quantity', width: 120 },
                        { name: 'isDefault', displayName: 'catalog.blades.option-details.labels.default', width: 120, cellTemplate: 'option-list-default.cell.html', enableSorting: false, enableColumnResizing: false }
                    ]})">
      <div class="table-wrapper" ng-if="blade.sectionEntity.options.length" style="margin: 0 -21px 0;">
        <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-height></div>
        <ul class="menu __context" role="menu" id="sol_menu">
          <li class="menu-item" ng-click='edit(contextMenuEntity)'>
            <span class="menu-ico fa fa-pencil"></span> {{'platform.commands.edit' | translate}}
          </li>
          <li class="menu-item" ng-click='openItem(contextMenuEntity)'>
            <span class="menu-ico fa fa-edit"></span> {{'catalog.commands.open-item' | translate}}
          </li>
          <li class="menu-item" ng-click='delete(contextMenuEntity)'>
            <span class="menu-ico fas fa-trash-alt"></span> {{'platform.commands.delete' | translate}}
          </li>
        </ul>
      </div>
      <div class="note" ng-if="!blade.sectionEntity.options.length">{{ 'catalog.blades.section-details.descr.no-options' | translate }}</div>
    </div>
  </div>
  <div class="blade-inner" ng-if="blade.sectionEntity.type === 'Text' && blade.sectionEntity.allowPredefinedOptions">
    <div class="inner-block" ng-init="setGridOptions({
                  rowTemplate: 'option-list.row.html',
                  data: 'blade.sectionEntity.options',
                  rowHeight: 61,
                  enableSorting: false,
                  columnDefs: [
                      { name: 'actions', displayName: '', enableColumnResizing: false, width: 30, cellTemplate: 'option-list-actions.cell.html', pinnedLeft:true },
                      { name: 'text', displayName: 'catalog.blades.section-details.labels.text'},
                      { name: 'isDefault', displayName: 'catalog.blades.option-details.labels.default', width: 120, cellTemplate: 'option-list-default.cell.html', enableSorting: false, enableColumnResizing: false }
                  ]})">
      <div class="table-wrapper" ng-if="blade.sectionEntity.options.length" style="margin: 0 -21px 0;">
        <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-height></div>
        <ul class="menu __context" role="menu" id="sol_menu">
          <li class="menu-item" ng-click='edit(contextMenuEntity)'>
            <span class="menu-ico fa fa-pencil"></span> {{'platform.commands.edit' | translate}}
          </li>
          <li class="menu-item" ng-click='delete(contextMenuEntity)'>
            <span class="menu-ico fas fa-trash-alt"></span> {{'platform.commands.delete' | translate}}
          </li>
        </ul>
      </div>
      <div class="note" ng-if="!blade.sectionEntity.options.length">{{ 'catalog.blades.section-details.descr.no-options' | translate }}</div>
    </div>
  </div>
</div>

<script type="text/ng-template" id="option-list.row.html">
  <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.productId ===grid.appScope.selectedNodeId}" role="{{col.isRowHeader ? 'rowheader' : 'gridcell' }}" ui-grid-cell context-menu="grid.appScope.contextMenuEntity = row.entity" data-target="sol_menu"></div>
</script>
<script type="text/ng-template" id="option-list-actions.cell.html">
  <div class="ui-grid-actions" left-click-menu="grid.appScope.contextMenuEntity = row.entity" data-target="sol_menu">
    <span class="fa fa-ellipsis-v"></span>
  </div>
</script>
<script type="text/ng-template" id="option-list-icon.cell.html">
  <div class="ui-grid-cell-contents">
    <div class="product-img">
      <img class="image" ng-src="{{COL_FIELD}}" ng-if="COL_FIELD">
      <span class="table-ico fas fa-image" ng-if="!COL_FIELD"></span>
    </div>
  </div>
</script>
<script type="text/ng-template" id="option-list-default.cell.html">
  <div class="ui-grid-cell-contents" style="text-align: center;">
    <input type="checkbox"
           ng-model="row.entity.isDefault"
           ng-change="grid.appScope.toggleDefaultOption(row.entity)"
           ng-click="$event.stopPropagation();" />
  </div>
</script>
