<div class="ui secondary menu no-margin ">
  {{#if refreshButton}}
    <button
      type="button"
      class="ui refresh-button {{buttonClass}} button"
      title={{t "components.olv-toolbar.refresh-button-text"}}
      {{action "refresh"}}>
        {{t "components.olv-toolbar.refresh-button-text"}}
        <i class="refresh icon"></i>
    </button>
  {{/if}}
  {{#if createNewButton}}
    {{#if (or readonly (not enableCreateNewButton))}}
      <button
        type="button"
        class="ui create-button {{buttonClass}} disabled button"
        title={{t "components.olv-toolbar.add-button-text"}}
        disabled="disabled"
        {{action "createNew"}}>
          {{t "components.olv-toolbar.add-button-text"}}
      </button>
    {{else}}
      <button
        type="button"
        class="ui create-button {{buttonClass}} button"
        title={{t "components.olv-toolbar.add-button-text"}}
        {{action "createNew"}}>
          {{t "components.olv-toolbar.add-button-text"}}
      </button>
    {{/if}}
  {{/if}}
  {{#if deleteButton}}
    {{#if (or readonly (not isDeleteButtonEnabled))}}
      <button
        type="button"
        class="ui delete-button {{buttonClass}} disabled button"
        title={{t "components.olv-toolbar.delete-button-text"}}
        disabled="disabled"
        {{action "delete"}}>
          {{t "components.olv-toolbar.delete-button-text"}}
          <i class="delete icon"></i>
      </button>
    {{else}}
      <button
        type="button"
        class="ui delete-button {{buttonClass}} button"
        title={{t "components.olv-toolbar.delete-button-text"}}
        {{action "delete"}}>
          {{t "components.olv-toolbar.delete-button-text"}}
          <i class="delete icon"></i>
      </button>
    {{/if}}
  {{/if}}
  {{#if availableHierarchicalMode}}
    <button
      type="button"
      class="ui button icon hierarchical-button {{buttonClass}} {{if inHierarchicalMode "active"}}"
      title={{t "components.olv-toolbar.hierarchy-button-text"}}
      {{action "switchHierarchicalMode"}}>
        <i class="sitemap icon"></i>
    </button>
  {{/if}}
  {{#if enableFilters}}
    <div class="ui icon buttons filter-active">
      <button
        type="button"
        class="ui button {{buttonClass}} {{if showFilters "active"}}"
        title={{t "components.olv-toolbar.filter-button-text"}}
        {{action "toggleStateFilters"}}>
          <i class="filter icon"></i>
      </button>
      {{#if filters}}
        <div class="or" data-text="&bull;"></div>
        <button
          type="button"
          class="ui button removeFilter-button {{buttonClass}}"
          title={{t "components.olv-toolbar.remove-filter-button-text"}}
          {{action "resetFilters" this.attrs.resetFilters}}>
            <i class="remove icon"></i>
        </button>
      {{/if}}
    </div>
  {{/if}}
  {{#if filterButton}}
    <div class="ui action input">
      <div class="block-action-input">
        <input
          type="text"
          value={{filterByAnyMatchText}}
          placeholder={{t "components.olv-toolbar.filter-by-any-match-placeholder"}}
          onkeyup={{action "filterByAnyMatch"}}
        />
      </div>
      <button
        type="button"
        class="ui {{buttonClass}} icon button search-button"
        title={{t "components.olv-toolbar.search-button-text"}}
        {{action "filterByAnyMatch"}}>
          <i class="search icon"></i>
      </button>
      <button
        type="button"
        class="ui {{buttonClass}} icon button clear-search-button"
        title={{t "components.olv-toolbar.clear-search-button-text"}}
        {{action "removeFilter"}}>
          <i class="remove icon"></i>
      </button>
    </div>
  {{/if}}
  {{#if exportExcelButton}}
    <div class="ui buttons export-config">
      <button
        type="button"
        class="ui button icon export-button {{buttonClass}}"
        title={{t "components.olv-toolbar.export-excel-button-text"}}
        {{action "showExportDialog"}}>
          <i class="large file excel outline icon"></i>
      </button>
      {{flexberry-menu
        items=exportExcelItems
        onItemClick=(action "onExportMenuItemClick")
      }}
    </div>
  {{/if}}
  {{#if colsConfigButton}}
    <div class="ui buttons cols-config">
      <button
        type="button"
        class="ui icon button config-button"
        title={{t "components.colsconfig-dialog-content.title"}}
        {{action "showConfigDialog"}}>
          <i class="large table icon"></i>
      </button>
      {{#if colsSettingsItems}}
        {{flexberry-menu
          items=colsSettingsItems
          onItemClick=(action "onMenuItemClick")
        }}
      {{/if}}
    </div>
  {{/if}}
  {{#each customButtons as |customButton|}}
    <button
      type="button"
      class="ui {{if customButton.buttonClasses customButton.buttonClasses}} button"
      title={{if customButton.buttonTitle customButton.buttonTitle}}
      disabled={{customButton.disabled}}
      {{action "customButtonAction" customButton.buttonAction}}>
      {{#if customButton.iconClasses}}
        <i class={{customButton.iconClasses}}></i>
        {{customButton.buttonName}}
      {{else if customButton.buttonName}}
        {{customButton.buttonName}}
      {{else}}
        {{t "components.olv-toolbar.custom-button-text"}}
      {{/if}}
    </button>
  {{/each}}
  <div class="olv-toolbar-info-modal-dialog ui small basic modal">
    <div class="ui icon header">
      <i class="olvt icon"></i>
      {{_infoModalDialogCaption}}
    </div>
    <div class="center aligned ui grid">
    <button
      type="button"
      class="ui icon button olv-toolbar-info-modal-dialog-copy-button"
      title={{t "components.olv-toolbar.copy"}}
      {{action "copyJSONContent"}}>
        <i class="copy icon"></i>
        {{t "components.olv-toolbar.copy"}}
    </button>
    <div class="actions">
      <div class="olv-toolbar-info-modal-dialog-ok-button ui approve green inverted button" >
        <i class="remove icon"></i>
        {{t "components.olv-toolbar.close"}}
      </div>
    </div>
    </div>
    <div class="ui form">
      <div class="olv-toolbar-info-modal-dialog-content center aligned ui field">
        <textarea cols='80' rows='20'>{{_infoModalDialogContent}}</textarea>
      </div>
    </div>
  </div>
</div>

<div class="object-list-view-container">
  <table class="object-list-view ui unstackable celled {{if readonly 'readonly'}} {{tableClass}} table">
    <thead>
      <tr>
        {{#if showHelperColumn}}
          <th class="object-list-view-operations collapsing" data-olv-header-property-name="OlvRowToolbar">
            {{#if showCheckBoxInRow }}
              {{#if (or readonly allSelect)}}
                <button
                  type="button"
                  class="ui check-all-at-page-button {{buttonClass}} disabled button"
                  title={{t "components.olv-toolbar.check-all-at-page-button-text"}}
                  disabled="disabled"
                  {{action "checkAllAtPage"}}>
                    <i class="check-square-o icon"></i>
                </button>
              {{else}}
                <button
                  type="button"
                  class="ui check-all-at-page-button {{buttonClass}} button"
                  title={{t "components.olv-toolbar.check-all-at-page-button-text"}}
                  {{action "checkAllAtPage"}}>
                    <i class="check-square-o icon"></i>
                </button>
              {{/if}}
              {{#if readonly}}
                <button
                  type="button"
                  class="ui check-all-button {{buttonClass}} {{if allSelect "activated"}} disabled button"
                  title={{t "components.olv-toolbar.check-all-button-text"}}
                  disabled="disabled"
                  {{action "checkAll"}}>
                    <i class="check-all-square-o icon"></i>
                </button>
              {{else}}
                <button
                  type="button"
                  class="ui check-all-button {{buttonClass}} {{if allSelect "activated"}} button"
                  title={{t "components.olv-toolbar.check-all-button-text"}}
                  {{action "checkAll"}}>
                    <i class="check-all-square-o icon"></i>
                </button>
              {{/if}}
              {{#if defaultSortingButton}}
                <button
                  type="button"
                  class="ui clear-sorting-button {{buttonClass}} button"
                  title={{t "components.olv-toolbar.clear-sorting-button-text"}}
                  {{action "clearSorting"}}>
                    <i class="sort icon"></i>
                </button>
              {{/if}}
            {{/if}}
          </th>
        {{/if}}
        {{#each columns as |column|}}
          {{#unless column.hide}}
            <th class="dt-head-left me class" onclick={{ action "headerCellClick" column }}>
              <div data-olv-header-property-name={{column.propName}} title={{sortTitleCompute}}>
                <span>
                {{#if column.keyLocale}}
                  {{t column.keyLocale}}
                {{else}}
                  {{column.header}}
                {{/if}}
                </span>
                {{#if column.sorted}}
                  <div style="float:right;">
                    {{#if column.sortAscending}}
                      <div title="{{t 'components.object-list-view.sort-ascending'}}">
                      ▲{{column.sortNumber}}
                      </div>
                    {{else}}
                      <div title="{{t 'components.object-list-view.sort-descending'}}">
                      ▼{{column.sortNumber}}
                      </div>
                    {{/if}}
                  </div>
                {{/if}}
              </div>
            </th>
          {{/unless}}
        {{/each}}
        {{#if showMenuColumn}}
          <th class="object-list-view-menu collapsing" data-olv-header-property-name="OlvRowMenu"></th>
        {{/if}}
      </tr>
    </thead>
    <tbody>
      {{#if showFilters}}
        <tr class="object-list-view-filters">
          {{#if showHelperColumn}}
            <td rowspan="1"></td>
          {{/if}}
          {{#each columns as |column|}}
            {{#unless column.hide}}
              <td style={{defaultPaddingStyle}} class="overflowed-cell">
                {{#if column.filter.conditions}}
                  {{flexberry-dropdown
                    value=column.filter.condition
                    items=column.filter.conditions
                    displayCaptions=(not (is-array column.filter.conditions))
                    class="compact fluid"
                    placeholder=(t "components.object-list-view.filter-condition")
                    needChecksOnValue=false
                    onChange=(action "filterConditionChanged" column.filter)
                  }}
                {{/if}}
              </td>
            {{/unless}}
          {{/each}}
          {{#if showMenuColumn}}
            <td rowspan="1"></td>
          {{/if}}
        </tr>
        <tr class="object-list-view-filters" onkeydown={{action "applyFiltersByEnter"}}>
          {{#if showHelperColumn}}
            <td rowspan="1"></td>
          {{/if}}
          {{#each columns as |column|}}
            {{#unless column.hide}}
              <td style={{defaultPaddingStyle}} class="{{if (array-contains overflowedComponents column.filter.component.name) "overflowed-cell"}}">
                {{#if column.filter.component.name}}
                  <div class="fluid action input ui">
                    {{component column.filter.component.name
                      value=column.filter.pattern
                      readonly=(or
                        (eq column.filter.condition "empty")
                        (eq column.filter.condition "nempty")
                      )
                      dynamicProperties=column.filter.component.properties
                    }}
                    <button
                      type="button"
                      class="ui clear-filter button"
                      title={{t "components.object-list-view.clear-filter-in-column"}}
                      {{action "clearFilterForColumn" column.filter}}
                    >
                      <i class="remove icon"></i>
                    </button>
                  </div>
                {{/if}}
              </td>
            {{/unless}}
          {{/each}}
          {{#if showMenuColumn}}
            <td rowspan="1"></td>
          {{/if}}
        </tr>
      {{/if}}
      {{#unless content}}
        <tr>
          <td colspan="{{colspan}}" style="text-align:center;">
              {{placeholder}}
          </td>
        </tr>
      {{else}}
        {{#each contentWithKeys key="key" as |record|}}
            <tr class="{{record.rowConfig.customClass}}">
              <td class="object-list-view-helper-column {{unless showHelperColumn "hidden"}}" style={{defaultPaddingStyle}}>
                <div class="hidden">{{record.key}}</div>
                {{#if showHelperColumn}}
                  <div class="object-list-view-helper-column-cell">
                    {{#if showAsteriskInRow}}
                      <div class="cell">
                        <i class="asterisk small red icon {{unless record.data.hasDirtyAttributes "transparent"}}"></i>
                      </div>
                    {{/if}}
                    {{#if showCheckBoxInRow}}
                      <div class="cell">
                        {{flexberry-checkbox
                          readonly=(or readonly (not record.rowConfig.canBeSelected) allSelect)
                          onChange=(action "selectRow" record)
                          value=record.selected
                        }}
                      </div>
                    {{/if}}
                    {{#if showDeleteButtonInRow}}
                      <div class="cell">
                        {{#if (or readonly (not record.rowConfig.canBeDeleted))}}
                          <button
                            type="button"
                            class="ui ui-delete object-list-view-row-delete-button {{buttonClass}} disabled button"
                            title={{t "components.object-list-view.menu-in-row.delete-menu-item-title"}}
                            disabled="disabled"
                            {{action "deleteRow" record}}>
                            <i class="minus icon"></i>
                          </button>
                        {{else}}
                          <button
                            type="button"
                            class="ui ui-delete object-list-view-row-delete-button {{buttonClass}} button"
                            title={{t "components.object-list-view.menu-in-row.delete-menu-item-title"}}
                            {{action "deleteRow" record}}>
                            <i class="minus icon"></i>
                          </button>
                        {{/if}}
                      </div>
                    {{/if}}
                    {{#if showEditButtonInRow}}
                      <div class="cell">
                        {{#if readonly}}
                          <button
                            type="button"
                            class="ui ui-edit object-list-view-row-edit-button {{buttonClass}} disabled button"
                            title={{t "components.object-list-view.menu-in-row.edit-menu-item-title"}}
                            disabled="disabled"
                            {{action "objectListViewRowClick" record (hash column=null columnIndex=null rowEdit=true)}}>
                            <i class="edit icon"></i>
                          </button>
                        {{else}}
                          <button
                            type="button"
                            class="ui ui-edit object-list-view-row-edit-button {{buttonClass}} button"
                            title={{t "components.object-list-view.menu-in-row.edit-menu-item-title"}}
                            {{action "objectListViewRowClick" record (hash column=null columnIndex=null rowEdit=true)}}>
                            <i class="edit icon"></i>
                          </button>
                        {{/if}}
                      </div>
                    {{/if}}
                  </div>
                {{/if}}
              </td>
              {{#each columns as |column|}}
                {{#unless column.hide}}
                  <td class="{{if (array-contains overflowedComponents column.cellComponent.componentName) " overflowed-cell"}}"
                    {{action "objectListViewRowClick" record preventDefault=false}} style={{defaultPaddingStyle}}>
                    {{#if column.cellComponent.componentName}}
                      {{component column.cellComponent.componentName
                        dynamicProperties=column.cellComponent.componentProperties
                        relatedModel=record.data
                        value=(mut (get record.data column.propName))
                        readonly=(readonly-cell record.rowConfig.readonlyColumns column.propName readonly column.cellComponent.componentProperties.readonly)
                        required=required
                      }}
                    {{else}}
                      <div class="oveflow-text">
                        {{get-formatted record.data column.propName
                          dateFormat=dateFormat
                          moment=moment
                        }}
                      </div>
                    {{/if}}
                  </td>
                {{/unless}}
              {{/each}}
              {{#if showMenuColumn}}
                <td class="object-list-view-menu" style={{defaultPaddingStyle}}>
                  <div class="right pointing ui icon dropdown button">
                    <i class="list layout icon"></i>
                    <div class="left menu">
                      {{#if (and showEditMenuItemInRow record.rowConfig.canBeSelected)}}
                        <div class="item {{if readonly "disabled"}}" {{ action "objectListViewRowClick" record (hash rowEdit=true) }}>
                          <i class="edit icon"></i>
                          <span>{{t "components.object-list-view.menu-in-row.edit-menu-item-title"}}</span>
                        </div>
                      {{/if}}
                      {{#if (and showDeleteMenuItemInRow record.rowConfig.canBeDeleted)}}
                        <div class="item {{if readonly "disabled"}}" {{ action "deleteRow" record }}>
                          <i class="trash icon"></i>
                          <span>{{t "components.object-list-view.menu-in-row.delete-menu-item-title"}}</span>
                        </div>
                      {{/if}}
                    </div>
                  </div>
                </td>
              {{/if}}
            </tr>
        {{/each}}
      {{/unless}}
    </tbody>
  </table>
</div>
<div class="ui secondary menu no-margin nav-bar">
  <div class="ui basic buttons">
    {{#if hasPreviousPage}}
      <button type="button" class="ui button prev-page-button" {{action 'previousPage' this.attrs.previousPage}}>
      </button>
    {{else}}
      <button type="button" class="ui disabled button prev-page-button" {{action 'previousPage' this.attrs.previousPage}} disabled="disabled">
      </button>
    {{/if}}
    {{#each pages as |page|}}
      {{#if page.isEllipsis}}
        <div class="ui button">...</div>
      {{else}}
        {{#if page.isCurrent}}
          <div class="ui active button">{{page.number}}</div>
        {{else}}
          <button type="button" class="ui button" {{action 'gotoPage' this.attrs.gotoPage page.number}}>{{page.number}}</button>
        {{/if}}
      {{/if}}
    {{/each}}
    {{#if hasNextPage}}
      <button type="button" class="ui button next-page-button" {{action 'nextPage' this.attrs.nextPage}}>
      </button>
    {{else}}
      <button type="button" class="ui disabled button next-page-button" {{action 'nextPage' this.attrs.nextPage}} disabled="disabled">
      </button>
    {{/if}}
  </div>
  <div class="right menu">
    {{#if showShowingEntries}}
      <div class="showing-entries">
        {{#if (and currentIntervalRecords recordsTotalCount) }}
          {{concat
            (t "components.flexberry-objectlistview.showing-entries.showing") currentIntervalRecords (t "components.flexberry-objectlistview.showing-entries.of") recordsTotalCount (t "components.flexberry-objectlistview.showing-entries.entries")
          }}
        {{/if}}
      </div>
    {{/if}}
    {{flexberry-dropdown items=perPageValues value=perPageValue class="compact selection" onChange=(action "perPageClick") needChecksOnValue=false direction="upward"}}
  </div>
</div>
