<div ng-if="vm.feedback">
  <div>
    <span>
      <i c8y-icon="{{ vm.getIcon(vm.feedback) }}" ng-class="vm.getTextClass(vm.feedback)"></i>
      <span class="small">{{ vm.feedback.summary | translate }}</span>
    </span>
    <button
      ng-if="vm.getDetails().length > 0"
      ng-click="vm.isOpen = !vm.isOpen"
      class="btn btn-link"
    >
      <span ng-if="!vm.isOpen" class="small" translate>Show details</span>
      <span ng-if="vm.isOpen" class="small" translate>Hide details</span>
    </button>
  </div>

  <div uib-collapse="!vm.isOpen">
    <div class="list-group bg-level-1" ng-if="vm.getDetails().length > 0">
      <div class="list-group-item d-flex" ng-repeat="detail in vm.getDetails()">
        <div class="list-item-icon">
          <i
            c8y-icon="{{ vm.getIcon(detail) }}"
            ng-class="[vm.getTextClass(detail), vm.getIconClass(detail)]"
          ></i>
        </div>
        <div class="list-item-body">
          {{ detail.text | translate }}
        </div>
      </div>
    </div>
  </div>
</div>
