<div class="ui-grid-cell-contents ui-grid-header-cell-primary-focus" style="padding: 0;">
  <span class="ui-grid-header-cell-label">
    <span class="ui-grid-header-cell-title">{{ header.displayName }}</span>
    <span ng-if="header.headerTooltip != header.displayName">{{ header.headerTooltip }}</span>
  </span>
  <span>
    <i ng-class="{'ui-grid-icon-up-dir': header.sort.direction == 'asc', 'ui-grid-icon-down-dir': header.sort.direction == 'desc', 'ui-grid-icon-blank': header.sort.direction == null}"></i>
  </span>
</div>
<md-menu class="ui-grid-column-menu-button" md-position-mode="target-right target" md-offset="0 42">
  <md-button ng-click="$mdOpenMenu()" class="md-icon-button" style="line-height: 24px;">
    <i class="ui-grid-icon-angle-down">&nbsp;</i>
  </md-button>
  <md-menu-content class="visual-query-column-menu">
    <md-menu-item ng-if="header.sort.direction != 'asc'">
      <md-button ng-click="header.delegate.sortColumn('asc', header, table)">
        <i class="ui-grid-icon-sort-alt-up">&nbsp;</i> Sort Ascending
      </md-button>
    </md-menu-item>
    <md-menu-item ng-if="header.sort.direction != 'desc'">
      <md-button ng-click="header.delegate.sortColumn('desc', header, table)">
        <i class="ui-grid-icon-sort-alt-down">&nbsp;</i> Sort Descending
      </md-button>
    </md-menu-item>
    <md-menu-item ng-if="header.sort.direction != null">
      <md-button ng-click="header.delegate.removeSort(header, table)">
        <i class="ui-grid-icon-cancel">&nbsp;</i> Remove Sort
      </md-button>
    </md-menu-item>
    <md-menu-item>
      <md-button ng-click="header.delegate.hideColumn(header, table)">
        <i class="material-icons">remove_circle</i> Hide Column
      </md-button>
    </md-menu-item>
    <md-menu-item>
      <md-button ng-click="header.delegate.renameColumn(header, table)">
        <i class="material-icons">mode_edit</i> Rename Column
      </md-button>
    </md-menu-item>
    <md-menu-item ng-if="header.delegate.filters.length !== 0">
      <md-menu>
        <md-button ng-click="$mdOpenMenu()">
          <i class="material-icons">filter_list</i> Filter
        </md-button>
        <md-menu-content class="visual-query-column-menu">
          <md-menu-item ng-repeat="filter in header.delegate.filters">
            <div>
              <i class="material-icons" ng-class="{'custom-icon': (filter.icon.length === 1)}">{{ filter.icon }}</i>
              <md-input-container>
                <label>{{ filter.label }}</label>
                <input type="text" ng-model="filter.term" ng-change="header.delegate.validateFilter(filter, table)">
              </md-input-container>
            </div>
          </md-menu-item>
        </md-menu-content>
      </md-menu>
    </md-menu-item>
    <md-menu-item ng-if="header.delegate.transforms.length !== 0">
      <md-menu>
        <md-button ng-click="$mdOpenMenu()">
          <i class="material-icons">transform</i> Transform
        </md-button>
        <md-menu-content class="visual-query-column-menu">
          <md-menu-item ng-repeat="transform in header.delegate.transforms">
            <md-button ng-click="header.delegate.transformColumn(transform, header, table)">
              <i class="material-icons" ng-class="{'custom-icon': (transform.icon.length === 1)}">{{ transform.icon }}</i> {{ transform.name }}
            </md-button>
          </md-menu-item>
        </md-menu-content>
      </md-menu>
    </md-menu-item>
  </md-menu-content>
</md-menu>
