<div class="security" ng-controller="SecurityCtrl">
  <header>
    <h3 class="section-header">
      <a ng-click="
        specs.securityDefinitions.$folded = !specs.securityDefinitions.$folded;
        foldEditor(['securityDefinitions'], specs.securityDefinitions.$folded);
      ">Security</a>
    </h3>
  </header>

  <div class="security-definitions" collapse-when="specs.securityDefinitions.$folded">
    <div ng-repeat="(securityDefinitionName, securityDefinition) in specs.securityDefinitions" class="security-definition {{securityDefinition.type}}">
      <header>
        <h4>
          <span class="authenticated" style="color:green" ng-if="isAuthenticated(securityDefinitionName)" title="Authenticated">✓</span>
          <span>{{securityDefinitionName}}</span>
          <span class="security-type">({{getHumanSecurityType(securityDefinition.type)}})</span>
          <div class="authentication">
            <div>
              <button ng-click="authenticate(securityDefinitionName, securityDefinition)" class="authenticate">{{isAuthenticated(securityDefinitionName) ? 'Change Authentication' : 'Authenticate'}}</button>
            </div>
          </div>
        </h4>
      </header>
      <section>
        <p ng-if="securityDefinition.description" marked="securityDefinition.description"></p>

        <table class="table">
          <tbody>
            <tr ng-if="securityDefinition.name">
              <td>Name</td>
              <td>{{securityDefinition.name}}</td>
            </tr>
            <tr ng-if="securityDefinition.in">
              <td>In</td>
              <td>{{securityDefinition.in}}</td>
            </tr>
            <tr ng-if="securityDefinition.flow">
              <td>Flow</td>
              <td>{{securityDefinition.flow}}</td>
            </tr>
            <tr ng-if="securityDefinition.authorizationUrl">
              <td>Authorization URL</td>
              <td><a target="_blank" href="{{securityDefinition.authorizationUrl}}">{{securityDefinition.authorizationUrl}}</a></td>
            </tr>
            <tr ng-if="securityDefinition.tokenUrl">
              <td>Token URL</td>
              <td><a target="_blank" href="{{securityDefinition.tokenUrl}}">{{securityDefinition.tokenUrl}}</a></td>
            </tr>
          </tbody>
        </table>
        <h4 ng-if="securityDefinition.scopes">Scopes</h4>
        <table ng-if="securityDefinition.scopes">
          <tbody>
            <tr ng-repeat="(scopeName, scope) in securityDefinition.scopes" class='scopes-table'>
              <td><strong>{{scopeName}}</strong></td>
              <td>{{scope}}</td>
            </tr>
          </tbody>
        </table>
      </section>
    </div>
  </div>
</div>

