<c8y-ui-title-set title="vm.TITLE | translate"></c8y-ui-title-set>
<c8y-breadcrumbs-set>
  <c8y-breadcrumbs-item
    icon="c8y-layers"
    label="{{ vm.TITLE | translate }}"
  ></c8y-breadcrumbs-item>
  <c8y-breadcrumbs-item
    icon="c8y-layers"
    label="{{ 'Tenants' | translate }}"
  ></c8y-breadcrumbs-item>
</c8y-breadcrumbs-set>
<c8y-ui-action-bar-set>
  <li
    class="navbar-form"
    action-bar-position="left"
  >
    <c8y-list-display-control
      list-length="vm.policies.length"
      on-list-class-change="vm.listClass = listClass"
    ></c8y-list-display-control>
  </li>

  <li
    class="navbar-form"
    action-bar-position="left"
  >
    <div class="input-group input-group-search">
      <input
        class="form-control"
        title="{{ 'Filter tenant policies' | translate }}"
        id="search"
        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"
        for="search"
        translate
      >
        Search
      </span>
    </div>
  </li>

  <a
    class="btn btn-link"
    title="{{ 'Add tenant policy' | translate }}"
    href="#{{ vm.ROUTE_NEW_POLICY }}"
  >
    <i c8y-icon="plus-circle"></i>
    {{ 'Add policy' | translate }}
  </a>

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

<c8y-help src="/docs/enterprise-tenant/managing-tenants/#tenant-policies"></c8y-help>

<!-- empty state -->
<c8y-ui-empty-state
  [icon]="'c8y-tenant-policies'"
  [title]="'No tenant policies to display.' | translate"
  [subtitle]="'Click below to add your first tenant policy.' | translate"
  ng-if="vm.policies.length === 0"
>
  <a
    class="btn btn-primary"
    title="{{ 'Add tenant policy' | translate }}"
    href="#{{ vm.ROUTE_NEW_POLICY }}"
  >
    {{ 'Add policy' | translate }}
  </a>
</c8y-ui-empty-state>

<div
  class="card-group"
  ng-class="vm.listClass"
>
  <div
    class="page-sticky-header hidden-xs"
    ng-if="vm.policies.length > 0"
  >
    <div class="d-flex a-i-center">
      <div class="card-header">
        <div class="card-icon"></div>
        <p translate>Policy</p>
      </div>
      <div class="card-block card-column-70">
        <p translate>Description</p>
      </div>
      <div class="separator card-column-30">
        <div class="d-flex">
          <div class="m-l-8 flex-grow card-column-50">
            <div translate>Retention rules</div>
          </div>
          <div class="card-column-50">
            <div
              class="m-l-auto"
              translate
            >
              Tenant options
            </div>
          </div>
        </div>
      </div>
      <div class="card-actions-group m-r-8"></div>
    </div>
  </div>
  <div
    class="col-xs-12 col-sm-6 col-md-4 col-lg-3"
    ng-repeat="policy in vm.policies | orderBy:'name' | filter:vm.searchString as filtered"
  >
    <div
      class="card card--d-col"
      ng-click="vm.edit(policy.id)"
    >
      <div
        class="card-actions"
        ng-click="$event.stopPropagation();"
      >
        <div
          class="dropdown settings"
          uib-dropdown
        >
          <button
            class="dropdown-toggle c8y-dropdown"
            title="{{ 'Actions' | translate }}"
            aria-haspopup="true"
            uib-dropdown-toggle
            ng-click="::$event.stopPropagation()"
          >
            <i c8y-icon="ellipsis-v"></i>
          </button>
          <ul
            class="dropdown-menu dropdown-menu-right"
            uib-dropdown-menu
          >
            <li>
              <button
                title="{{ 'Edit' | translate }}"
                ng-click="::$event.stopPropagation();vm.edit(policy)"
              >
                <i c8y-icon="pencil"></i>
                {{ 'Edit' | translate }}
              </button>
            </li>
            <li>
              <button
                title="{{ 'Duplicate' | translate }}"
                type="button"
                ng-click="::$event.stopPropagation();vm.duplicate(policy)"
              >
                <i c8y-icon="copy"></i>
                {{ 'Duplicate' | translate }}
              </button>
            </li>
            <li>
              <button
                title="{{ 'Delete' | translate }}"
                type="button"
                ng-click="::$event.stopPropagation();vm.remove(policy)"
              >
                <i c8y-icon="delete"></i>
                {{ 'Delete' | translate }}
              </button>
            </li>
          </ul>
        </div>
      </div>

      <div class="card-header separator">
        <div class="card-icon">
          <i c8y-icon="{{ vm.ICON }} c8y-icon-duocolor"></i>
        </div>
        <div
          class="card-title text-truncate"
          title="{{ policy.name | translate }}"
        >
          {{ policy.name | translate }}
        </div>
      </div>
      <div class="card-block card-column-70 m-r-0">
        <div class="text-truncate max-width-100">
          <span class="text-label-small">
            {{ 'Description' | translate }}
          </span>
          <p
            class="text-truncate"
            title="{{ policy.description | translate }}"
          >
            <small>
              {{ policy.description | translate }}
            </small>
          </p>
        </div>
      </div>
      <div class="card-footer separator card-column-30">
        <div class="d-flex fit-w">
          <div class="flex-grow card-column-50 m-r-4">
            <span
              class="badge badge-info"
              data-cy="tenantPolicyList--retentionRulesNumber"
              ng-bind="::(policy.retentions.length || 0)"
            ></span>
            <span
              class="m-t-auto text-label-small"
              translate
            >
              Retention rules
            </span>
          </div>
          <div class="card-column-50 m-l-4">
            <span
              class="badge badge-info"
              data-cy="tenantPolicyList--tenantOptionsNumber"
              ng-bind="::(policy.options.length || 0)"
            ></span>
            <span
              class="m-t-auto text-label-small"
              translate
            >
              Tenant options
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- no results empty state -->
<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>
