<div>
    <h3 class="auth__title">OAuth2.0</h3>
    <p>{{{sanitize description}}}</p>
    {{#if authorizationUrl}}<p>Authorization URL: {{{sanitize authorizationUrl}}}</p>{{/if}}
    {{#if tokenUrl}}<p>Token URL: {{{sanitize tokenUrl}}}</p>{{/if}}
    <p>flow: {{{escape flow}}}</p>
    {{#if isPasswordFlow}}
        <p>Please input username and password for password flow authorization</p>
        <fieldset>
            <div><label>Username: <input class="oauth-username" type="text" name="username"></label></div>
            <div><label>Password: <input class="oauth-password" type="password" name="password"></label></div>
        </fieldset>
    {{/if}}
    {{#if clientAuthentication}}
        <p>Setup client authentication.{{#if requireClientAuthenticaiton}}(Required){{/if}}</p>
        <fieldset>
            <div><label>Type:
                <select class="oauth-client-authentication-type" name="client-authentication-type">
                    <option value="none" selected>None or other</option>
                    <option value="basic">Basic auth</option>
                    <option value="request-body">Request body</option>
                </select>
            </label></div>
            <div class="oauth-client-authentication" hidden>
                <div><label>ClientId: <input class="oauth-client-id" type="text" name="client-id"></label></div>
                <div><label>Secret: <input class="oauth-client-secret" type="text" name="client-secret"></label></div>
            </div>
        </fieldset>
    {{/if}}
    <p><strong> {{{escape appName}}} </strong> API requires the following scopes. Select which ones you want to grant to Swagger UI.</p>
    <p>Scopes are used to grant an application different levels of access to data on behalf of the end user. Each API may declare one or more scopes.
        <a href="#">Learn how to use</a>
    </p>
    <ul class="api-popup-scopes">
        {{#each scopes}}
            <li>
                <input class="oauth-scope" type="checkbox" data-scope="{{{escape scope}}}" oauthtype="{{{escape OAuthSchemeKey}}}"/>
                <label>{{{escape scope}}}</label><br/>
                <span class="api-scope-desc">{{{escape description}}}
                    {{#if OAuthSchemeKey}}
                        ({{{escape OAuthSchemeKey}}})
                    {{/if}}
                </span>
            </li>
        {{/each}}
    </ul>
</div>