<md-progress-linear ng-show="workspacePluginsController.isLoading" md-mode="indeterminate"></md-progress-linear>
<div flex layout="column" md-theme="maincontent-theme" class="plugins-page">
  <che-list-header che-hide-header="workspacePluginsController.editors.length === 0">
    <div flex="100"
        layout="row"
        layout-align="start stretch"
        class="che-list-item-row">
      <div layout="row" layout-align="center center" class="che-list-item-checkbox"></div>
      <div flex layout="row" layout-align="start center" class="che-list-item-details">
        <che-list-header-column flex="10" layout="column" layout-align="center start"
                                che-sort-value="workspacePluginsController.pluginOrderBy"
                                che-sort-item="isEnabled"
                                che-column-title="Enable"></che-list-header-column>
        <che-list-header-column flex="25" layout="column" layout-align="center start"
                                che-sort-value="workspacePluginsController.pluginOrderBy"
                                che-sort-item="name"
                                che-column-title="Editor"></che-list-header-column>
        <che-list-header-column flex="15" layout="column" layout-align="center start"
                                che-column-title="Version"></che-list-header-column>
        <che-list-header-column flex="50" layout="column" layout-align="center start"
                                che-column-title="Description"></che-list-header-column>
      </div>
    </div>
  </che-list-header>
  <!-- editor list  -->
  <che-list class="plugins-list" flex
            ng-if="workspacePluginsController.editors && workspacePluginsController.editors.length > 0">
    <div class="plugin-item"
        ng-repeat="editor in workspacePluginsController.editors | orderBy:[workspacePluginsController.pluginOrderBy, 'name' ]">
      <che-list-item flex>
        <div flex="100"
            layout="row"
            layout-align="start stretch"
            plugin-item-name="{{editor.name}}"
            plugin-item-version="{{editor.version}}"
            class="che-list-item-row">
          <div layout="row" layout-align="center center" class="che-list-item-checkbox"></div>
          <div flex layout="row" layout-align="start center">
            <!-- isEnabled -->
            <div flex="10">
              <md-switch ng-model="editor.isEnabled"
                        ng-change="workspacePluginsController.updatePlugin(editor)"
                        aria-label="editor"
                        plugin-switch="{{editor.name}}">
              </md-switch>
            </div>
            <!-- Name -->
            <div flex="25">
              <span class="che-list-item-name" plugin-name="{{editor.name}}">{{editor.name}}</span>
            </div>
            <!-- Version -->
            <div flex="15">
              <span class="che-list-item-name" plugin-version="{{editor.version}}">{{editor.version}}</span>
            </div>
            <!-- Description -->
            <div flex="50">
              <span class="che-list-item-secondary" plugin-description="{{editor.description}}">{{editor.description}}</span>
            </div>
          </div>
        </div>
      </che-list-item>
    </div>
  </che-list>
  <div class="che-list-empty">
    <span ng-show="workspacePluginsController.editors.length === 0">
      There are no editors.
    </span>
  </div>
</div>
<div class="plugin-page-separator"></div>
<div flex layout="column" md-theme="maincontent-theme" class="plugins-page">
  <che-list-header-additional-parts>
    <div che-multi-transclude-part="che-list-add-button">
    </div>
    <div che-multi-transclude-part="che-list-search">
      <che-list-header-search placeholder="Search"
                              query="workspacePluginsController.pluginFilter.name"
                              on-change="workspacePluginsController.onSearchChanged(query)"></che-list-header-search>
    </div>
  </che-list-header-additional-parts>

  <che-list-header che-hide-header="workspacePluginsController.cheListHelper.visibleItemsNumber === 0">
    <div flex="100"
        layout="row"
        layout-align="start stretch"
        class="che-list-item-row">
      <div layout="row" layout-align="center center" class="che-list-item-checkbox"></div>
      <div flex layout="row" layout-align="start center" class="che-list-item-details">
        <che-list-header-column flex="10" layout="column" layout-align="center start"
                                che-sort-value="workspacePluginsController.pluginOrderBy"
                                che-sort-item="isEnabled"
                                che-column-title="Enable"></che-list-header-column>
        <che-list-header-column flex="25" layout="column" layout-align="center start"
                                che-sort-value="workspacePluginsController.pluginOrderBy"
                                che-sort-item="name"
                                che-column-title="Plugin"></che-list-header-column>
        <che-list-header-column flex="15" layout="column" layout-align="center start"
                                che-column-title="Version"></che-list-header-column>
        <che-list-header-column flex="50" layout="column" layout-align="center start"
                                che-column-title="Description"></che-list-header-column>
      </div>
    </div>
  </che-list-header>
    <!-- plugins list  -->
  <che-list class="plugins-list" flex
            ng-if="workspacePluginsController.plugins && workspacePluginsController.plugins.length > 0">
    <div class="plugin-item"
        ng-repeat="plugin in workspacePluginsController.cheListHelper.getVisibleItems() | orderBy:[workspacePluginsController.pluginOrderBy, 'name' ]">
      <che-list-item flex>
        <div flex="100"
            layout="row"
            layout-align="start stretch"
            plugin-item-name="{{plugin.name}}"
            plugin-item-version="{{plugin.version}}"
            class="che-list-item-row">
          <div layout="row" layout-align="center center" class="che-list-item-checkbox"></div>
          <div flex layout="row" layout-align="start center">
            <!-- isEnabled -->
            <div flex="10">
              <md-switch ng-model="plugin.isEnabled"
                        ng-change="workspacePluginsController.updatePlugin(plugin)"
                        aria-label="plugin"
                        plugin-switch="{{plugin.name}}">
              </md-switch>
            </div>
            <!-- Name -->
            <div flex="25">
              <span class="che-list-item-name" plugin-name="{{plugin.name}}">{{plugin.name}}</span>
            </div>
            <!-- Version -->
            <div flex="15">
              <span class="che-list-item-name" plugin-version="{{plugin.version}}">{{plugin.version}}</span>
            </div>
            <!-- Description -->
            <div flex="50">
              <span class="che-list-item-secondary" plugin-description="{{plugin.description}}">{{plugin.description}}</span>
            </div>
          </div>
        </div>
      </che-list-item>
    </div>
  </che-list>
  <div class="che-list-empty">
    <span ng-show="workspacePluginsController.plugins.length > 0 && workspacePluginsController.cheListHelper.visibleItemsNumber === 0">
      No plugins found.
    </span>
    <span ng-show="workspacePluginsController.plugins.length === 0">There are no plugins.</span>
  </div>
</div>
