<div class="toaster-container">
  <ul class="toaster">
    <li ng-repeat="notif in list" kbn-toast notif="notif">
      <div class="toast alert" ng-class="'alert-' + notif.type">

        <span ng-show="notif.count > 1" class="badge">{{ notif.count }}</span>

        <i class="fa" ng-class="'fa-' + notif.icon" tooltip="{{notif.title}}"></i>
        <kbn-truncated orig="{{notif.content}}" length="250" class="toast-message" /></kbn-truncated>

        <div class="btn-group pull-right toast-controls">
          <button
            type="button"
            ng-if="notif.stack && !notif.showStack"
            class="btn"
            ng-class="'btn-' + notif.type"
            ng-click="notif.showStack = true"
            >More Info</button>
          <button
            type="button"
            ng-if="notif.accept"
            class="btn"
            ng-class="'btn-' + notif.type"
            ng-click="notif.accept()"
            >OK</button>
          <button
            type="button"
            ng-if="notif.address"
            class="btn"
            ng-class="'btn-' + notif.type"
            ng-click="notif.address()"
            >Fix it</button>
        </div>
      </div>

      <div ng-if="notif.stack && notif.showStack" class="toast-stack alert" ng-class="'alert-' + notif.type">
        <pre ng-repeat="stack in notif.stacks" ng-bind="stack"></pre>
      </div>

    </li>
  </ul>
</div>
