<div class="blade-static" style="height: 240px; width: 550px; white-space: normal;">
  <form class="form" name="configurationForm" style="margin:0; padding: 0;">
    <div class="form-group" ng-init="setForm(configurationForm)">
      <label class="form-label">{{ 'catalog.blades.configuration-details.labels.enable' | translate }}</label>
      <div class="form-input">
        <label class="form-label __switch">
          <input type="checkbox" ng-model="blade.currentEntity.isActive" [disabled]="(!canBeEnabled)" />
          <span class="switch"></span>
        </label>
      </div>
      <div class="list __info list-descr">{{ 'catalog.blades.configuration-details.descr.enable' | translate }}</div>
    </div>
    <div class="form-group" style="padding-top: 0;">
      <label class="form-label">{{ 'catalog.blades.configuration-details.labels.sections' | translate }}</label>
      <div class="note" style="margin-top:10px;">{{ 'catalog.blades.configuration-details.descr.sorting-prompt' | translate }}</div>
    </div>
  </form>
</div>
<div class="blade-content __medium-wide" style="height: calc(100% - 242px) !important;">
  <div class="blade-inner">
    <div class="inner-block" ng-init="setGridOptions({
                data: 'blade.currentEntity.sections',
                rowTemplate: 'section-list.row.html',
                rowHeight: 61,
                enableSorting: false,
                columnDefs: [
                        { name: 'actions', displayName: '', enableColumnResizing: false, width: 30, cellTemplate: 'section-list-actions.cell.html', pinnedLeft:true },
                        { name: 'name', displayName: 'catalog.blades.configuration-details.labels.name', cellTemplate: 'section-list-name.cell.html' }
                 ]})">
      <div class="table-wrapper" ng-if="blade.currentEntity.sections.length" style="margin: 0 -21px;">
        <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="pcl_menu">
          <li class="menu-item" ng-click='edit(contextMenuEntity)'>
            <span class="menu-ico fa fa-edit"></span> {{'platform.commands.manage' | translate}}
          </li>
          <li class="menu-item" ng-click='delete(contextMenuEntity)' va-permission="catalog:configurations:delete">
            <span class="menu-ico fas fa-trash-alt"></span> {{'platform.commands.delete' | translate}}
          </li>
        </ul>
      </div>
      <div class="note" ng-if="!blade.currentEntity.sections.length">{{ 'catalog.blades.configuration-details.descr.no-sections' | translate }}</div>
    </div>
  </div>
</div>

<script type="text/ng-template" id="section-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.displayOrder===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="pcl_menu"></div>
  </div>
</script>

<script type="text/ng-template" id="section-list-name.cell.html">
  <div class="ui-grid-cell-contents">
    <div class="inner-contents">
      <div class="table-t">{{COL_FIELD}}</div>
      <div class="table-descr">
        <span>{{ 'catalog.blades.section-details.labels.type' | translate }}: {{row.entity.type}}</span>
        <span ng-if="row.entity.type === 'Product'">| {{ 'catalog.blades.configuration-details.labels.quantity' | translate }}: {{row.entity.options.length}}</span>
      </div>
      <div class="table-descr">{{ row.entity.isRequired ? ('catalog.blades.section-details.labels.required' | translate) : '&nbsp'}}</div>
    </div>
  </div>
</script>

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