<c8y-ui-title-set
  title="'Usage statistics' | translate"
  subtitle="vm.getSubtitle()"
></c8y-ui-title-set>

<c8y-breadcrumbs-set>
  <c8y-breadcrumbs-item
    icon="cog"
    label="{{ 'Usage statistics' | translate }}"
  ></c8y-breadcrumbs-item>
  <c8y-breadcrumbs-item
    icon="cog"
    label="{{ 'Tenants' | translate }}"
  ></c8y-breadcrumbs-item>
</c8y-breadcrumbs-set>

<c8y-ui-action-bar-set>
  <li
    class="navbar-form"
    action-bar-position="left"
  >
    <form class="d-flex-sm">
      <div class="form-group datepicker m-b-0">
        <input
          class="form-control text-center"
          title="{{ 'Date from' | translate }}"
          placeholder="{{ 'Date from' | translate }}"
          ng-model="vm.dateFrom"
          uib-datepicker-popup="{{ datepickerFormat }}"
          datepicker-options="{ maxDate: vm.dateTo, showWeeks: true }"
          datepicker-append-to-body="true"
          show-button-bar="false"
          is-open="openFrom"
          ng-click="openFrom=true"
        />
      </div>
      <div class="form-group datepicker m-r-md-8 m-b-0">
        <input
          class="form-control text-center"
          title="{{ 'Date to' | translate }}"
          placeholder="{{ 'Date to' | translate }}"
          ng-model="vm.dateTo"
          uib-datepicker-popup="{{ datepickerFormat }}"
          datepicker-options="{ minDate: vm.dateFrom, showWeeks: true }"
          datepicker-append-to-body="true"
          show-button-bar="false"
          is-open="openTo"
          ng-click="openTo=true"
        />
      </div>
      <button
        class="btn btn-default"
        title="{{ 'Apply filters' | translate }}"
        name="apply"
        type="button"
        type="submit"
        ng-click="vm.filter()"
      >
        <i c8y-icon="filter"></i>
        {{ 'Apply`filters`' | translate }}
      </button>
      <button
        class="btn btn-default"
        title="{{ 'Clear filters' | translate }}"
        name="clear"
        type="button"
        type="button"
        ng-if="vm.dateFrom || vm.dateTo"
        ng-click="vm.clearFilter()"
      >
        <i c8y-icon="clear-filters"></i>
        {{ 'Clear`filters`' | translate }}
      </button>
    </form>
  </li>

  <button
    class="btn btn-link"
    title="{{ 'Export CSV' | translate }}"
    type="button"
    c8y-csv-exporter
    c8y-headers="vm.getCsvHeaders()"
    c8y-data="vm.getCsvData()"
    c8y-filename="{{ 'Usage statistics.csv' | translate }}"
  >
    <i c8y-icon="data-export"></i>
    {{ 'Export CSV' | translate }}
  </button>

  <button
    class="btn btn-link"
    title="{{ 'Reload' | translate }}"
    type="button"
    ng-click="vm.refresh()"
  >
    <i
      ng-class="{ 'icon-spin': vm.refreshLoading }"
      c8y-icon="refresh"
    ></i>
    {{ 'Reload' | translate }}
  </button>
</c8y-ui-action-bar-set>

<c8y-help src="/docs/enterprise-tenant/usage-and-billing/#usage-and-billing"></c8y-help>

<div>
  <c8y-filtered-sorted-list
    columns="vm.columns"
    columns-config="vm.columnsConfig"
    on-columns-config-changed="vm.onColumnsConfigChanged(columnsConfig)"
    items="vm.filteredSortedStatistics"
    no-items-message="vm.noItemsMessage"
  ></c8y-filtered-sorted-list>
</div>
