<div ng-controller="TryOperation" class="try-container">
  <div class="request">
    <form schema-form="requestSchema" ng-model="requestModel" name="requestFrom"></form>
    <div class="raw-request raw">
      <div class="line url">
        {{operationName | uppercase}}
        <a href="{{generateUrl()}}" target="_blank" tabindex="-1">{{generateUrl()}}</a>
        {{httpProtocol}}
      </div>
      <div class="headers">
        <div class="header" ng-repeat="(headerName, headerValue) in getHeaders()">
        <strong>{{headerName}}</strong>: {{headerValue}}</div>
      </div>
      <pre ng-if="hasRequestBody() && !hasFileParam" class="json-body">{{getRequestBody()}}</pre>
      <pre ng-if="hasFileParam" class="json-body">File</pre>
    </div>
    <div class="cors-warning" ng-if="isCrossOrigin()">
      <p>
        <span class="warning-icon">⚠️</span>
        This is a cross-origin call. Make sure the server at
        <code>{{specs.host}}</code>
        accepts {{operationName | uppercase}} requests from
        <code>{{locationHost}}</code>.
        <a href="https://github.com/swagger-api/swagger-editor/blob/master/docs/cors.md" target="_blank">Learn more</a>
      </p>
    </div>
    <button ng-click="makeCall()" class="{{$parent.operationName}} call"
      ng-disabled="xhrInProgress || !requestFrom.$valid">
      <span ng-if="xhrInProgress">Sending...</span>
      <span ng-if="!xhrInProgress">Send Request</span>
    </button>
  </div>

  <h3>Response</h3>
  <div class="response" ng-if="xhr">
    <div class="response-info" ng-class="{error: error}">
      <span class="status-text">{{textStatus | uppercase}}</span>
      <span ng-if="error">{{error}}</span>
    </div>
    <tabset justified="true" class="responses-tabs">
      <tab heading="Rendered">
        <h6>Headers</h6>
        <json-formatter json="responseHeaders" open="3"></json-formatter>
        <h6>Body</h6>
        <json-formatter ng-if="isJson(responseData)" json="responseData" open="3"></json-formatter>
        <div ng-if="isType(responseHeaders, 'html')" ng-bind-html="responseData"></div>
        <div ng-if="isType(responseHeaders, 'plain')">
          <h5>Plain text:</h5>
          <pre>{{responseData}}</pre>
        </div>
      </tab>
      <tab heading="Pretty">
        <pre>{{prettyPrint(xhr.responseText)}}</pre>
      </tab>
      <tab heading="Raw">
        <div class="raw-response raw">
          <div class="status">{{httpProtocol}} {{xhr.statusCode}} {{statusText}}</div>
          <div class="resp-headers">{{xhr.getAllResponseHeaders()}}</div>
          <div>{{xhr.responseText}}</div>
        </div>
      </tab>
    </tabset>
    </div>
  </div>
</div>
