<c8y-breadcrumbs-set>
  <c8y-breadcrumbs-item
    label= "{{ vm.tabName }}"
  ></c8y-breadcrumbs-item>
  <c8y-breadcrumbs-item
    label="{{ 'Roles' | translate }}"
  ></c8y-breadcrumbs-item>
  <c8y-breadcrumbs-item
    icon="c8y-accounts"
    label="{{ 'Accounts' | translate }}"
  ></c8y-breadcrumbs-item>
</c8y-breadcrumbs-set>

<c8y-ui-action-bar-set>
  <li
    class="navbar-form hidden-xs"
    action-bar-position="left"
  >
    <c8y-list-display-control
      list-length="vm.roles.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 roles' | translate }}"
        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"
        for="filter"
        translate
      >
        Filter roles
      </span>
    </div>
  </li>

  <li action-bar-position="right">
    <button
      class="btn btn-link"
      title="{{ 'Add inventory role' | translate }}"
      type="button"
      ng-click="::vm.addRole()"
      ng-show="vm.roles[0].permissions"
    >
      <i c8y-icon="plus-circle"></i>
      <span translate>Add inventory role</span>
    </button>
    <button
      class="btn btn-link"
      title="{{ 'Add global role' | translate }}"
      type="button"
      ng-click="::vm.addRole()"
      ng-show="!vm.roles[0].permissions"
    >
      <i c8y-icon="plus-circle"></i>
      <span translate>Add global role</span>
    </button>
  </li>
</c8y-ui-action-bar-set>

<c8y-help src="/docs/standard-tenant/managing-permissions/#managing-permissions"></c8y-help>

<!-- Empty state -->
<c8y-ui-empty-state
  [icon]="'c8y-users'"
  [title]="'No roles to display.' | translate"
  [subtitle]="'Click below to add your first role.' | translate"
  ng-if="vm.roles.length === 0"
>
  <button
    class="btn btn-primary"
    title="{{ 'Add inventory role' | translate }}"
    ng-click="::vm.addRole()"
    ng-show="vm.roles[0].permissions"
  >
    {{ 'Add inventory role' | translate }}
  </button>
  <button
    class="btn btn-primary"
    title="{{ 'Add global role' | translate }}"
    ng-click="::vm.addRole()"
    ng-show="!vm.roles[0].permissions"
  >
    {{ 'Add global role' | translate }}
  </button>
  <p
    class="m-t-4"
    c8y-guide-docs
  >
    <small translate>
      Find out more in the
      <a c8y-guide-href="/docs/standard-tenant/managing-permissions">user documentation</a>
      .
    </small>
  </p>
</c8y-ui-empty-state>

<div
  class="card-group"
  ng-class="vm.listClass"
>
  <div
    class="page-sticky-header hidden-xs"
    ng-if="vm.roles.length > 0"
  >
    <div class="d-flex">
      <div class="card-header">
        <p translate>Name</p>
      </div>
      <div class="card-block card-column-70">
        <div ng-class="{ 'card-column-70': vm.roles[0].permissions }">
          <span translate>Description</span>
        </div>
      </div>
      <div
        class="card-footer card-column-30 m-r-8"
        ng-if="vm.roles[0].permissions"
      >
        <span translate>Permissions</span>
      </div>
    </div>
  </div>
  <div
    class="col-xs-12 col-sm-6 col-md-4 col-lg-3"
    ng-repeat="role in vm.roles | filter:vm.searchString as filtered"
    ng-click="::vm.edit(role)"
  >
    <div
      class="card card--d-col"
      ng-click="vm.edit(role)"
    >
      <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"
            type="button"
            uib-dropdown-toggle
            ng-click="::$event.stopPropagation()"
          >
            <span>
              <i c8y-icon="ellipsis-v"></i>
            </span>
          </button>
          <ul
            class="dropdown-menu dropdown-menu-right"
            uib-dropdown-menu
          >
            <li>
              <button
                title="{{ 'Edit' | translate }}"
                type="button"
                ng-click="::$event.stopPropagation();vm.edit(role)"
              >
                <i c8y-icon="edit"></i>
                {{ 'Edit' | translate }}
              </button>
            </li>
            <li>
              <button
                title="{{ 'Duplicate' | translate }}"
                type="button"
                ng-click="::$event.stopPropagation();vm.duplicate(role)"
              >
                <i c8y-icon="clone"></i>
                {{ 'Duplicate' | translate }}
              </button>
            </li>
            <li>
              <button
                title="{{ 'Delete' | translate }}"
                type="button"
                ng-click="::$event.stopPropagation();vm.remove(role)"
                ng-hide="::vm.isUndeletable(role)"
              >
                <i c8y-icon="delete"></i>
                {{ 'Delete' | translate }}
              </button>
            </li>
          </ul>
        </div>
      </div>

      <div class="card-header separator">
        <div class="card-icon">
          <i
            c8y-icon="connected-people"
            ng-if="role.customProperties"
          ></i>
          <i
            c8y-icon="insurance-agent"
            ng-if="!role.customProperties"
          ></i>
        </div>
        <div
          class="card-title text-truncate"
          title="{{::vm.getRoleName(role) | translate}}"
        >
          <span>{{::vm.getRoleName(role) | translate}}</span>
        </div>
      </div>
      <div class="card-block card-column-70">
        <span
          class="text-label-small"
          title="{{ connector.description }}"
          translate
        >
          Description
        </span>
        <small ng-show="role.description">
          {{::role.description | translate}}
        </small>
        <span ng-hide="role.description">
          <small class="text-muted">
            <em translate>No description available.</em>
          </small>
        </span>
      </div>
      <div
        class="card-footer separator card-column-30"
        ng-if="role.permissions"
      >
        <span
          class="badge badge-info"
          ng-bind="::role.permissions.length"
        ></span>
        <span
          class="text-label-small"
          translate
          translate-n="::role.permissions.length"
          translate-plural="permissions"
        >
          permission
        </span>
      </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>

<c8y-load-more></c8y-load-more>
