<div ng-repeat="alert in alerts">
  <div ng-if="!alert.hidden" class="alert" ng-class="{
    'alert-danger': alert.type === 'error',
    'alert-warning': alert.type === 'warning',
    'alert-success': alert.type === 'success',
    'alert-info': !alert.type || alert.type === 'info'
  }">
    <button ng-if="!hideCloseButton" ng-click="alert.hidden = true" type="button" class="close">
      <span class="pficon pficon-close" aria-hidden="true"></span>
      <span class="sr-only">Close</span>
    </button>
    <span class="pficon" aria-hidden="true" ng-class="{
      'pficon-error-circle-o': alert.type === 'error',
      'pficon-warning-triangle-o': alert.type === 'warning',
      'pficon-ok': alert.type === 'success',
      'pficon-info': !alert.type || alert.type === 'info'
    }"></span>
    <span class="sr-only">{{alert.type}}</span>
    <strong ng-if="alert.message" style="margin-right: 5px;">{{alert.message}}</strong><span ng-if="alert.details">{{alert.details}}</span>
    <span ng-repeat="link in alert.links">
      <a ng-href="{{link.href}}">{{link.label}}</a>
      <span ng-if="!$last" class="action-divider">|</span>
    </span>
  </div>
</div>
