<div ng-controller="c8yRetentionRulesListCtrl as vm">
  <c8y-breadcrumbs-set>
    <c8y-breadcrumbs-item
      icon="c8y-management"
      label="{{ 'Retention rules' | translate }}"
    ></c8y-breadcrumbs-item>
    <c8y-breadcrumbs-item
      icon="c8y-management"
      label="{{ 'Management' | translate }}"
    ></c8y-breadcrumbs-item>
  </c8y-breadcrumbs-set>

  <c8y-ui-action-bar-set>
    <li
      class="navbar-form"
      action-bar-position="left"
    >
      <div class="input-group input-group-search">
        <input
          class="form-control"
          id="Filter"
          placeholder="{{ 'Filter' | translate }}…"
          type="search"
          ng-model="vm.searchString"
        />
        <span class="input-group-addon">
          <i
            c8y-icon="search"
            ng-if="vm.searchString.length === 0 || !vm.searchString"
          ></i>
          <i
            class="text-muted"
            c8y-icon="times"
            ng-if="vm.searchString.length > 0"
            ng-click="vm.searchString = ''"
          ></i>
        </span>
        <span
          class="sr-only"
          translate
        >
          Filter
        </span>
      </div>
    </li>

    <li
      c8y-if-allowed
      any-role="['ROLE_RETENTION_RULE_ADMIN']"
    >
      <button
        class="btn btn-link"
        title="{{ 'Add rule' | translate }}"
        type="button"
        ng-click="createModal()"
      >
        <i c8y-icon="plus-circle"></i>
        {{ 'Add rule' | translate }}
      </button>
    </li>

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

  <c8y-help src="/docs/standard-tenant/managing-data/#retention-rules"></c8y-help>

  <!-- empty state -->
  <c8y-ui-empty-state
    [icon]="'box-settings'"
    [title]="'No retention rules to display.' | translate"
    [subtitle]="'Click below to add your first retention rule.' | translate"
    ng-if="retentions.length === 0"
  >
    <button
      class="btn btn-primary"
      title="{{ 'Add retention rule' | translate }}"
      type="button"
      ng-click="createModal()"
    >
      {{ 'Add retention rule' | translate }}
    </button>
    <p c8y-guide-docs>
      <small translate>
        Find out more in the
        <a c8y-guide-href="/docs/standard-tenant/managing-data/#retention-rules">
          user documentation
        </a>
        .
      </small>
    </p>
  </c8y-ui-empty-state>

  <div
    class="c8y-list__group m-b-24"
    ng-class="{ 'dd-low': (retentions | filter : vm.filter).length < 10 }"
  >
    <div
      class="page-sticky-header c8y-list__item hidden-xs"
      ng-if="retentions.length > 0"
    >
      <div class="c8y-list__item__block">
        <div class="c8y-list__item__icon">
          <i class="p-l-24"></i>
        </div>
        <div class="c8y-list__item__body">
          <div class="content-flex-60">
            <div class="col-2">
              {{ 'Data type' | translate }}
            </div>
            <div class="col-2">
              {{ 'Fragment type' | translate }}
            </div>
            <div class="col-2">
              {{ 'Type' | translate }}
            </div>
            <div class="col-3">
              {{ 'Source' | translate }}
            </div>
            <div class="col-2">
              {{ 'Maximum age' | translate }}
            </div>
          </div>
        </div>
        <span></span>
      </div>
    </div>

    <div ng-repeat="rule in retentions | filter: filterByProperties as filtered">
      <div
        class="c8y-list__item"
        title="{{ 'Click to edit' | translate }}"
        ng-click="updateModal(rule)"
      >
        <div class="c8y-list__item__block">
          <div class="c8y-list__item__icon">
            <i c8y-icon="{{ rule.icon || 'box-settings' }}"></i>
          </div>
          <div class="c8y-list__item__body">
            <div class="content-flex-60">
              <div class="col-2">
                {{ rule.dataType | translate }}
              </div>

              <div class="col-2">
                <span
                  class="text-label-small visible-xs m-t-8"
                  translate
                >
                  Fragment type
                </span>
                {{ rule.fragmentType }}
              </div>

              <div class="col-2">
                <span
                  class="text-label-small visible-xs m-t-8"
                  translate
                >
                  Type
                </span>
                {{ rule.type }}
              </div>

              <div class="col-3">
                <span
                  class="text-label-small visible-xs m-t-8"
                  translate
                >
                  Source
                </span>
                {{ rule.source }}
              </div>

              <div class="col-2">
                <span
                  class="text-label-small visible-xs m-t-8"
                  translate
                >
                  Maximum age
                </span>
                {{ rule.maximumAge }}
                {{ 'days' | translate }}
              </div>
              <div
                class="col-1"
                ng-if="!isEditable(rule)"
              >
                <span
                  class="label label-info"
                  translate
                >
                  Not editable
                </span>
              </div>

              <div
                class="p-r-8 text-right showOnHover col-1"
                ng-if="isEditable(rule)"
                c8y-if-allowed
                any-role="['ROLE_RETENTION_RULE_ADMIN']"
              >
                <button
                  class="btn btn-dot btn-dot--danger hidden-xs"
                  aria-label="{{ 'Delete' | translate }}"
                  uib-tooltip="{{ 'Delete' | translate }}"
                  tooltip-popup-delay="500"
                  tooltip-append-to-body="true"
                  type="button"
                  data-ng-click="removeWithConfirmation(rule);$event.stopPropagation()"
                >
                  <i c8y-icon="minus-circle"></i>
                </button>
              </div>
            </div>
          </div>
          <button
            class="btn btn-sm btn-danger visible-xs"
            title="{{ 'Delete' | translate }}"
            type="button"
            data-ng-click="removeWithConfirmation(rule);$event.stopPropagation()"
            c8y-if-allowed
            any-role="['ROLE_RETENTION_RULE_ADMIN']"
          >
            <i c8y-icon="delete"></i>
            {{ 'Delete' | translate }}
          </button>
        </div>
      </div>
    </div>

    <!-- no results when filtering -->
    <c8y-ui-empty-state
      [icon]="'search'"
      [title]="'No results to display.' | translate"
      [subtitle]="'Refine your search terms or check your spelling.' | translate"
      ng-if="filtered.length === 0 && vm.searchString.length > 0"
    ></c8y-ui-empty-state>
    <c8y-load-more></c8y-load-more>
  </div>
</div>
