{% from "./partials/sliced-string.html" import slicedString %}
<a name="servers"></a>
<div class="center-block p-8">

  <h2 class="mb-4">Servers</h2>

  {% for serverName, server in asyncapi.servers() %}
    <div class="shadow bg-grey-lighter mb-3 px-4 py-3">
      <div class="flex">
        <div>
          <div class="pr-4 font-mono">
            {{ slicedString(server.url()) }}

            {% if server.protocolVersion() %}
            <span class="bg-teal font-bold no-underline text-white uppercase rounded ml-2"
              style="height: 20px;font-size: 11px;padding: 3px;">{{server.protocol()}}
              {{server.protocolVersion()}}</span>
            {% else %}
            <span class="bg-teal font-sans font-bold no-underline text-white uppercase rounded ml-2"
              style="height: 20px;font-size: 11px;padding: 3px;">{{server.protocol()}}</span>
            {% endif %}
          </div>
          <div class="text-xs text-grey-dark">
            {{ server.description() | markdown2html | safe }}
          </div>
        </div>
      </div>

      {% if server.variables() %}
        <div>
          {% for varName, var in server.variables() %}
            <div class="leading-normal">
              <span class="font-bold no-underline text-grey-dark text-xs uppercase">{{varName}}:</span>
              <span class="text-xs">{{var.description()}}</span>
              <div class="inline-block">
                {% if var.hasAllowedValues()  %}
                <span class="bg-indigo-darker font-bold no-underline text-white rounded ml-2"
                  style="height: 20px;font-size: 11px;padding: 3px;">ENUM: {{var.allowedValues() | join(', ')}}</span>
                {% endif %}
                {% if var.hasDefaultValue()  %}
                <span class="bg-indigo-darker font-bold no-underline text-white rounded ml-2"
                  style="height: 20px;font-size: 11px;padding: 3px;">DEFAULT: {{var.defaultValue()}}</span>
                {% endif %}
              </div>
            </div>
          {% endfor %}
        </div>
      {% endif %}

      {% if server.security() %}
        <h5 class="text-sm text-grey mt-1">Security:</h5>
        <ul class="list-reset">
          {% for sec in server.security() %}
            <li>
              {% set def = asyncapi.components().securityScheme(sec.json() | keys | head) %}

              <span class="font-bold no-underline text-grey-dark text-xs uppercase mr-1">
                {% if def.type() == 'apiKey' %}
                API key:
                {% endif %}
                {% if def.type() == 'oauth2' %}
                OAuth2:
                {% endif %}
                {% if def.type() == 'openIdConnect' %}
                Open ID:
                {% endif %}
                {% if def.type() == 'http' %}
                HTTP:
                {% endif %}
                {% if def.type() == 'userPassword' %}
                User / Password:
                {% endif %}
                {% if def.type() == 'X509' %}
                X509:
                {% endif %}
                {% if def.type() == 'symmetricEncryption' %}
                Symmetric Encription:
                {% endif %}
                {% if def.type() == 'asymmetricEncryption' %}
                Asymmetric Encription:
                {% endif %}
                {% if def.type() == 'httpApiKey' %}
                HTTP API key:
                {% endif %}
              </span>

              {% if def.description() %}
                <span class="text-xs mr-2">{{def.description() | markdown2html | safe}}</span>
              {% else %}
                <span class="text-xs mr-2 italic text-grey-dark">No description</span>
              {% endif %}

              {% if def.bearerFormat() %}
                <span class="text-xs mr-2">| {{def.bearerFormat()}}</span>
              {% endif %}

              {% if def.in() %}
                <span class="font-bold no-underline bg-blue-light text-white text-xs uppercase rounded"
                  style="height: 20px;font-size: 11px;padding: 3px;">In: {{def.in()}}</span>
              {% endif %}

              {% if def.scheme() %}
                <span class="font-bold no-underline bg-blue-light text-white text-xs uppercase rounded"
                  style="height: 20px;font-size: 11px;padding: 3px;">{{def.scheme()}}</span>
              {% endif %}

              {% if def.bearerFormat() %}
                <span class="font-bold no-underline bg-blue-light text-white text-xs uppercase rounded"
                  style="height: 20px;font-size: 11px;padding: 3px;">Header: {{def.name()}}</span>
              {% endif %}

              {% if def.openIdConnectUrl() %}
                <div class="px-4 py-2 ml-4 mb-3 border border-grey-light bg-grey-lightest rounded">
                  <div>
                    <span class="text-xs font-bold text-grey-dark mt-1 mr-1 uppercase">Connect URL:</span>
                    <a class="text-grey-dark text-xs font-normal" href="{{def.openIdConnectUrl()}}"
                      target="_blank">{{def.openIdConnectUrl()}}</a>
                  </div>
                </div>

              {% endif %}

              {% for flowName, flow in def.flows() %}
                <div class="px-4 py-2 ml-4 mb-3 border border-grey-light bg-grey-lightest rounded">
                  <div>
                    <span class="text-xs font-bold text-grey-dark mt-1 mr-1 uppercase">Flow:</span>
                    <span class="text-grey-dark text-xs font-normal capitalize">
                      {% if flowName == 'clientCredentials' %}
                        Client Credentials
                      {% elif flowName == 'authorizationCode' %}
                        Authorization Code
                      {% else %}
                        {{flowName | capitalize}}
                      {% endif %}
                    </span>
                  </div>

                  {% if flow.authorizationUrl() %}
                    <div>
                      <span class="text-xs font-bold text-grey-dark mt-1 mr-1 uppercase">Auth URL:</span>
                      <a class="text-grey-dark text-xs font-normal" href="{{flow.authorizationUrl()}}" target="_blank">{{flow.authorizationUrl()}}</a>
                    </div>
                  {% endif %}
                  {% if flow.tokenUrl() %}
                    <div>
                      <span class="text-xs font-bold text-grey-dark mt-1 mr-1 uppercase">Token URL:</span>
                      <a class="text-grey-dark text-xs font-normal" href="{{flow.tokenUrl()}}"
                        target="_blank">{{flow.tokenUrl()}}</a>
                    </div>
                  {% endif %}
                  {% if flow.refreshUrl() %}
                    <div>
                      <span class="text-xs font-bold text-grey-dark mt-1 mr-1 uppercase">Refresh URL:</span>
                      <a class="text-grey-dark text-xs font-normal" href="{{flow.refreshUrl()}}"
                        target="_blank">{{flow.refreshUrl()}}</a>
                    </div>
                  {% endif %}
                  {% if flow.scopes() %}
                    <div>
                      <span class="text-xs font-bold text-grey-dark mt-1 mr-1 uppercase">Scopes:</span>
                      {% for scopeName, scopeDescription in flow.scopes() %}
                        <span class="font-bold no-underline bg-indigo-light text-white text-xs rounded"
                          style="height: 20px;padding: 3px;" title="{{scopeDescription}}">{{scopeName}}</span>
                      {% endfor %}
                    </div>
                  {% endif %}

                </div>
              {% endfor %}
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </div>
  {% endfor %}

</div>
