<div class="col-md-12 marginTop nopadding" ui-i18n="{{lang}}">
  <div class="col-md-12 nopadding">
    <div class="col-md-3 nopaddingLeft">
      <div class="col-md-1 nopaddingLeft">
        <button
          type="button"
          class="btn btn-sm btn-danger"
          title="{{'hpo.multicritere.parameters.emptytable' | translate }}"
          ng-disabled="!gridHpo || !gridHpo.data ||
                      (gridHpo.data.length === 0 && gridHpo.columnDefs.length === 0)"
          ng-click="emptyTable()"
        >
          <span class="fa fa-trash"></span>
        </button>
      </div>
      <div class="col-md-1 nopaddingLeft">
        <button
          type="button"
          class="btn btn-sm btn-warning"
          title="{{'hpo.multicritere.parameters.emptyselection' | translate }}"
          ng-disabled="!gridApi || !gridApi.selection ||
                      gridApi.selection.getSelectedRows() == 0"
          ng-click="emptySelection()"
        >
          <span class="fa fa-times"></span>
        </button>
      </div>
      <div class="col-md-1 nopadding">
        <button
          type="button"
          class="btn btn-sm"
          ng-class="{' btn-info' : gridHpo.enableFiltering, 'btn-default' : !gridHpo.enableFiltering}"
          title="{{'hpo.multicritere.parameters.activatefilter' | translate }}"
          ng-disabled="!gridHpo || !gridHpo.data ||
                      gridHpo.data.length === 0"
          ng-click="toggleFilter()"
        >
          <span class="fa fa-filter"></span>
        </button>
      </div>
      <div class="col-md-9 nopadding">
        <div class="search">
          <span class="fa fa-filter"></span>
          <input
            type="text"
            ng-model="filterValue"
            class="form-control"
            placeholder="{{ 'hpo.data.prepare.filter' | translate }}"
            ng-disabled="!gridHpo || !gridHpo.data ||
                    gridHpo.data.length === 0"
            ng-keydown="keyDownFilter($event)"
            ng-change="filter()"
          />
          <a
            ng-show="filterValue.length > 0"
            ng-click="keyDownFilter($event , 'empty')"
          >
            <span class="fa fa-times-circle"></span>
          </a>
        </div>
      </div>
    </div>
    <div class="col-md-9">
      <div class="col-md-3 pull-right nopaddingRight">
        <textarea
          type="text"
          class="form-control"
          placeholder="{{ 'hpo.multicritere.parameters.pastearea' | translate }}"
          ng-model="pastedText"
          ng-paste="pastedTextArea($event)"
        />
      </div>
      <div class="col-md-2 pull-right nopadding" style="width:130px;">
        <div class="btn-group pull-right ">
          <div class="btn btn-default btn-sm" ng-click="showConfigSparator()">
            <span
              class="fa fa-gear fa-spin"
              title="{{ 'importexportwidget.columnDelimiterPrompt' | translate }}"
            >
            </span>
          </div>
          <label class="custom-file-upload btn btn-default btn-sm">
            <input
              type="file"
              style="display: none;"
              onclick="this.value = null"
              accept=".csv"
              onchange="angular.element(this).scope().loadCsvFile(this)"
            />
            <translate>common.import_csv</translate>
          </label>
        </div>
      </div>

      <div class="col-md-3 pull-right nopadding" style="width:170px;">
        <div class=" btn-group pull-right">
          <button
            type="button"
            class="btn btn-danger btn-sm"
            title="{{ 'hpo.multicritere.parameters.removecolumn' | translate }}"
            ng-disabled="!gridHpo || !gridHpo.columnDefs ||
                        gridHpo.columnDefs.length === 0"
            ng-click="removeColumn()"
          >
            <img src="img/common/delete-column-16.png" />
          </button>

          <button
            type="button"
            class="btn btn-default btn-sm"
            title="{{ 'hpo.multicritere.parameters.addcolumn' | translate }}"
            ng-click="addColumn()"
          >
            <img src="img/common/add-column-16.png" />
          </button>
          <button
            type="button"
            class="btn btn-danger btn-sm"
            ng-disabled="!gridApi || !gridApi.selection ||
                        gridApi.selection.getSelectedRows() == 0"
            title="{{ 'hpo.multicritere.parameters.removeline' | translate }}"
            ng-click="removeLine()"
          >
            <img src="img/common/delete-line-16.png" />
          </button>
          <button
            type="button"
            class="btn btn-default btn-sm"
            title="{{ 'hpo.multicritere.parameters.addline' | translate }}"
            ng-click="addLine()"
          >
            <img src="img/common/add-line-16.png" />
          </button>
        </div>
      </div>

      <div class="col-md-1 pull-right nopadding" style="width:80px;">
        <div class=" btn-group pull-right">
          <button
            type="button"
            class="btn btn-success btn-sm"
            ng-show="type === 'matrix'"
            title="{{ 'hpo.multicritere.parameters.createTable' | translate }}"
            ng-click="createTable()"
          >
            <i class="fa fa-table"></i>
          </button>
          <button
            type="button"
            class="btn btn-success btn-sm"
            title="{{ 'hpo.multicritere.parameters.addcolumnattribute' | translate }}"
            ng-click="addColumnAttribute()"
          >
            <img src="img/common/add-column-16.png" />
          </button>
        </div>
      </div>

      <div class="col-md-2 pull-right nopadding" style="width:120px;">
        <div
          class="btn btn-default btn-sm"
          ng-disabled="!gridHpo || !gridHpo.columnDefs ||
                              gridHpo.columnDefs.length === 0 "
          ng-click="updateHeader()"
        >
          <translate>hpo.common.updateheader</translate>
        </div>
      </div>

      <div class="col-md-2 pull-right nopadding" style="width:120px;">
        <div
          class="btn btn-warning btn-sm"
          ng-disabled="!gridApi || !gridApi.selection ||
                              gridApi.selection.getSelectedRows() == 0 "
          ng-click="updateMultiple()"
        >
          <translate>hpo.common.updatemultiple</translate>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-12 marginTop nopaddingLeft">
    <div
      ui-grid="gridHpo"
      class="myGrid"
      id="i18nGrid"
      ng-if="gridHpo"
      ui-grid-exporter
      ui-grid-resize-columns
      ui-grid-auto-resize
      ui-grid-edit
      ui-grid-selection
      ui-grid-pagination
      ui-grid-move-columns
      ui-grid-custom-cell-select
    ></div>
  </div>
  <div class="col-md-12 marginTop nopaddingLeft">
    <div class="col-md-12">
      <label><translate>hpo.multicritere.parameters.help</translate></label>
    </div>
    <div class="col-md-12 marginTop" style="font-size:12px;">
      <div class="col-md-2 nopaddingLeft">
        <button
          type="button"
          class="btn btn-danger btn-sm"
          title="{{ 'hpo.multicritere.parameters.removecolumn' | translate }}"
          ng-disabled="true"
        >
          <img src="img/common/delete-column-16.png" />
        </button>
        {{ 'hpo.multicritere.parameters.removecolumn' | translate }}
      </div>

      <div class="col-md-2 nopaddingLeft">
        <button
          type="button"
          class="btn btn-success btn-sm"
          title="{{ 'hpo.multicritere.parameters.addcolumnattribute' | translate }}"
          ng-disabled="true"
        >
          <img src="img/common/add-column-16.png" />
        </button>
        {{ 'hpo.multicritere.parameters.addcolumnattribute' | translate }}
      </div>

      <div class="col-md-2 nopaddingLeft">
        <button
          type="button"
          class="btn btn-default btn-sm"
          title="{{ 'hpo.multicritere.parameters.addcolumn' | translate }}"
          ng-disabled="true"
        >
          <img src="img/common/add-column-16.png" />
        </button>
        {{ 'hpo.multicritere.parameters.addcolumn' | translate }}
      </div>

      <div class="col-md-2 nopaddingLeft">
        <button
          type="button"
          class="btn btn-danger btn-sm"
          title="{{ 'hpo.multicritere.parameters.removeline' | translate }}"
          ng-disabled="true"
        >
          <img src="img/common/delete-line-16.png" />
        </button>
        {{ 'hpo.multicritere.parameters.removeline' | translate }}
      </div>

      <div class="col-md-2 nopaddingLeft">
        <button
          type="button"
          class="btn btn-default btn-sm"
          title="{{ 'hpo.multicritere.parameters.addline' | translate }}"
          ng-disabled="true"
        >
          <img src="img/common/add-line-16.png" />
        </button>
        {{ 'hpo.multicritere.parameters.addline' | translate }}
      </div>

      <div class="col-md-2 nopadding" ng-show="type === 'matrix'">
        <button
          type="button"
          class="btn btn-success btn-sm"
          title="{{ 'hpo.multicritere.parameters.addline' | translate }}"
          ng-disabled="true"
        >
          <i class="fa fa-table"></i>
        </button>
        {{ 'hpo.multicritere.parameters.createTable' | translate }}
      </div>
    </div>
  </div>
</div>
