<h2 class="responses-list-header" *ngIf="responses.length"> Responses </h2>
<zippy *ngFor="let response of responses;trackBy:trackByCode" [title]="response.code + ' ' + response.description | marked"
  [type]="response.type" [(open)]="response.expanded" [empty]="response.empty" (openChange)="lazySchema.load()">
  <div *ngIf="response.headers" class="response-headers">
    <header>
      Headers
    </header>
    <div class="header" *ngFor="let header of response.headers">
      <div class="header-name"> {{header.name}} </div>
      <div class="header-type {{header.type}}"> {{header._displayType}} {{header._displayFormat}}
        <span class="header-range" *ngIf="header._range"> {{header._range}} </span>
      </div>
      <div *ngIf="header.default" class="header-default"> Default: {{header.default}} </div>
      <div *ngIf="header.enum" class="header-enum">
        <span *ngFor="let enumItem of header.enum" class="enum-value {{enumItem.type}}"> {{enumItem.val | json}} </span>
      </div>
      <div class="header-description" [innerHtml]="header.description | marked"> </div>
    </div>
  </div>
  <header *ngIf="response.schema">
    Response Schema
  </header>
  <json-schema-lazy [auto]="response.expanded" #lazySchema
  pointer="{{response.schema ? response.pointer + '/schema' : null}}">
  </json-schema-lazy>
</zippy>
