{{!--
  Original work Copyright (c) 2015 Nils Knappmeier
  https://github.com/bootprint/bootprint-openapi

 Renders the security-section of the HTML-page
 TODO: Parameters
 @api public
--}}

{{#if securityDefinitions}}
  <!-- <h1 id="security" data-traverse-target="security">Security</h1> -->
  <h1 id="authentication" data-traverse-target="authentication">Authentication</h1>

  {{#each securityDefinitions}}
    <div id="security-definition-{{@key}}" class="panel">
      <div class="doc-row">
        <div class="doc-copy">
          <h3 class="security-definition-title">
            <span class="security-name">{{@key}}</span>
            <span class="swagger-security-definition-{{type}}"></span>
          </h3>
          {{#if description}}
            <section class="security-definition-description">
              {{md description}}
            </section>
          {{/if}}
          <section class="swagger-security-definition-properties">
            {{#each this}}
              {{#ifin @key "['description','x-spectacle-example']"}}
              {{else}}
                <div class="prop-row security-definition-property">
                  <div class="prop-name">
                    <div class="prop-title security-definition-property-name">{{@key}}</div>
                  </div>
                  <div class="prop-value security-definition-property-type">
                    {{#ifin @key "['scopes']"}}
                      {{#each this}}
                        <span id="security-definition-scope-{{htmlId @key}}">{{@key}}</span>
                        <p class="security-definition-scope-description">{{this}}</p>
                      {{/each}}
                    {{else}}
                      {{this}}
                    {{/ifin}}
                  </div>
                </div>
              {{/ifin}}
            {{/each}}
          </section>
        </div>
        {{#if x-spectacle-example}}
          <div class="doc-examples">
            <section>
              {{md x-spectacle-example}}
            </section>
          </div>
        {{/if}}
      </div>
    </div>
  {{/each}}
{{/if}}