{% extends "rest_framework_swagger/index.html" %}

{% load staticfiles %}

{% block header %}
    <div id="header">
      <div class="swagger-ui-wrap">
          <form id='api_selector'>
            <div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text"/></div>
            <div class='input'><input placeholder="API Key" id="input_apiKey" name="apiKey" type="text"/></div>
          </form>
      </div>
    </div>
{% endblock %}

{% block extra_scripts %}
  <script type="text/javascript">
    $(function () {
      window.swaggerUi = new SwaggerUi({
        url: '',
        dom_id: 'swagger-ui-container'
      });

      // this sets the authorization token so calls to the API can made via swagger
      $('#input_apiKey').change(function() {
        var key = $('#input_apiKey')[0].value;
        console.log('key: ' + key);
        if(key && key.trim() !== '') {
          console.log('added key ' + key);
          window.swaggerUi.api.clientAuthorizations.add('key',
            new SwaggerClient.ApiKeyAuthorization('Authorization', 'Token ' + key, 'header')
          );
        }
      });
      window.swaggerUi.load();
    });
  </script>

  <script src='{% static "rest_framework_swagger/init.js" %}' type='text/javascript'></script>
{% endblock %}