<div
  class="breadcrumbs-container"
  ng-if="breadcrumbs.length > 0"
  ng-class="{ open: showAll, multiple: breadcrumbs.length > 1 }"
>
  <button
    class="btn-show-all-breadcrumbs"
    aria-label="{{
      showAll ? ('Collapse breadcrumbs' | translate) : ('Expand all breadcrumbs' | translate)
    }}"
    uib-tooltip="{{
      showAll ? ('Collapse breadcrumbs' | translate) : ('Expand all breadcrumbs' | translate)
    }}"
    tooltip-append-to-body="true"
    tooltip-placement="auto"
    tooltip-popup-delay="500"
    ng-show="breadcrumbs.length > 1"
    ng-click="showAll = !showAll"
  >
    <i ng-class="{ 'icon-rotate-90': showAll }" c8y-icon="caret-right"></i>
  </button>

  <ul class="breadcrumbs text-muted" ng-repeat="path in breadcrumbs" ng-show="$first || showAll">
    <li ng-repeat="breadcrumb in path" ng-show="!$last">
      <span ng-show="!$first">></span>
      <a ng-href="{{ breadcrumb.path }}" class="word-break">
        <i c8y-icon="{{ breadcrumb.icon }}" ng-show="$first"></i>
        <span ng-if="breadcrumb.translate" ng-bind="breadcrumb.label | translate"></span>
        <span ng-if="!breadcrumb.translate" ng-bind="breadcrumb.label"></span>
      </a>
    </li>
  </ul>
</div>
