<div class="error-presenter {{isOnlyWarnings(errorsAndWarnings) ? 'warning' : 'error'}}">

  <header ng-if="errorsAndWarnings" class="error-header" ng-click="toggleCollapse()">
    <h4>
      <span ng-if="isOnlyWarnings(errorsAndWarnings)">
        Warning{{errorsAndWarnings.length > 1 ? 's' : ''}}
      </span>
      <span ng-if="!isOnlyWarnings(errorsAndWarnings)">
        Error{{errorsAndWarnings.length > 1 ? 's' : ''}}
      </span>
    </h4>
    <span class="collapse-button">{{isCollapsed ? 'Open' : 'Collapse'}}</span>
  </header>

  <div class="items" collapse-when="isCollapsed">
    <div
      ng-repeat="error in errorsAndWarnings track by $index"
      class="item">

      <h5 class="{{isWarning(error) ? 'warning' : 'error'}}">
        <span class="icon">{{isWarning(error) ? '⚠' : '✖' }}</span>
        {{error.type}}
      </h5>

      <p class="error-description" ng-bind-html="error.description"></p>
      <a
        ng-if="error.lineNumber !== -1"
        ng-click="goToLineOfError(error)"
        class="jump-to-link">
          Jump to line <b>{{error.lineNumber}}</b>
      </a>

      <div class="details">
        <h5>Details</h5>
        <json-formatter json="error" open="0"></json-formatter>
      </div>
    </div>
  </div>
</div>
