<div class="security-definition" *ngFor="let def of defs">
  <h2 class="sharable-header" attr.section="section/Authentication/{{def.name}}">
    <a class="share-link" href="#section/Authentication/{{def.name}}"></a>{{def.name}}</h2>
  <div [innerHTML]="def.details.description | marked"></div>
  <table class="security-details">
    <tr>
      <th> Security scheme type: </th>
      <td> {{def.details._displayType}} </td>
    </tr>
    <tr *ngIf="def.details.type === 'apiKey'">
      <th> {{def.details.in}} parameter name:</th>
      <td> {{def.details.name}} </td>
    </tr>
    <ng-template [ngIf]="def.details.type === 'oauth2'">
      <tr>
        <th> OAuth2 Flow</th>
        <td> {{def.details.flow}} </td>
      </tr>
      <tr *ngIf="def.details.flow === 'implicit' || def.details.flow === 'accessCode'">
        <th> Authorization URL </th>
        <td> {{def.details.authorizationUrl}} </td>
      </tr>
      <tr *ngIf="def.details.flow !== 'implicit'">
        <th> Token URL </th>
        <td> {{def.details.tokenUrl}} </td>
      </tr>
    </ng-template>
  </table>
  <ng-template [ngIf]="def.details.type === 'oauth2'">
    <h3> OAuth2 Scopes </h3>
    <table class="security-scopes-details">
      <tr *ngFor="let scopeName of def.details.scopes | keys">
        <th> {{scopeName}} </th>
        <td> {{def.details.scopes[scopeName]}} </td>
      </tr>
    </table>
  </ng-template>
</div>
