  <form name="form" class="raml-console-sidebar" novalidate ng-class="{ 'raml-console-is-collapsed': singleView }">
    <div class="raml-console-sidebar-flex-wrapper">
      <div class="raml-console-sidebar-content">
        <header class="raml-console-sidebar-row raml-console-sidebar-header">
          <h3 class="raml-console-sidebar-head">
            Try it
            <a ng-if="!singleView" class="raml-console-sidebar-fullscreen-toggle" ng-click="collapseSidebar($event)"><div class="raml-console-close-sidebar">&times;</div></a>
            <a ng-if="!singleView" class="raml-console-sidebar-collapse-toggle" ng-click="closeSidebar($event)"><div class="raml-console-close-sidebar">&times;</div></a>

            <a ng-if="singleView" class="raml-console-sidebar-collapse-toggle" ng-click="toggleSidebar($event)"><div class="raml-console-close-sidebar">&times;</div></a>

            <a ng-if="!singleView" class="raml-console-sidebar-resize-toggle raml-console-sidebar-resize" ng-click="toggleSidebar($event)">
              <svg x="0px" y="0px" viewBox="0 0 850 1000" class="raml-console-full-resize" fill="#808080" xmlns="http://www.w3.org/2000/svg" version="1.1"><path d="M421.29 589.312q0 7.254 -5.58 12.834l-185.256 185.256 80.352 80.352q10.602 10.602 10.602 25.11t-10.602 25.11 -25.11 10.602h-249.984q-14.508 0 -25.11 -10.602t-10.602 -25.11v-249.984q0 -14.508 10.602 -25.11t25.11 -10.602 25.11 10.602l80.352 80.352 185.256 -185.256q5.58 -5.58 12.834 -5.58t12.834 5.58l63.612 63.612q5.58 5.58 5.58 12.834zm435.798 -482.112v249.984q0 14.508 -10.602 25.11t-25.11 10.602 -25.11 -10.602l-80.352 -80.352 -185.256 185.256q-5.58 5.58 -12.834 5.58t-12.834 -5.58l-63.612 -63.612q-5.58 -5.58 -5.58 -12.834t5.58 -12.834l185.256 -185.256 -80.352 -80.352q-10.602 -10.602 -10.602 -25.11t10.602 -25.11 25.11 -10.602h249.984q14.508 0 25.11 10.602t10.602 25.11z"/></svg>

              <svg x="0px" y="0px" viewBox="0 0 850 1000" class="raml-console-small-resize" fill="#808080" xmlns="http://www.w3.org/2000/svg" version="1.1"><path d="M428.544 535.744v249.984q0 14.508 -10.602 25.11t-25.11 10.602 -25.11 -10.602l-80.352 -80.352 -185.256 185.256q-5.58 5.58 -12.834 5.58t-12.834 -5.58l-63.612 -63.612q-5.58 -5.58 -5.58 -12.834t5.58 -12.834l185.256 -185.256 -80.352 -80.352q-10.602 -10.602 -10.602 -25.11t10.602 -25.11 25.11 -10.602h249.984q14.508 0 25.11 10.602t10.602 25.11zm421.29 -374.976q0 7.254 -5.58 12.834l-185.256 185.256 80.352 80.352q10.602 10.602 10.602 25.11t-10.602 25.11 -25.11 10.602h-249.984q-14.508 0 -25.11 -10.602t-10.602 -25.11v-249.984q0 -14.508 10.602 -25.11t25.11 -10.602 25.11 10.602l80.352 80.352 185.256 -185.256q5.58 -5.58 12.834 -5.58t12.834 5.58l63.612 63.612q5.58 5.58 5.58 12.834z"/></svg>
            </a>
          </h3>
        </header>

        <div class="raml-console-sidebar-content-wrapper">
          <section ng-if="raml.protocols.length > 1">
            <header class="raml-console-sidebar-row raml-console-sidebar-subheader raml-console-sidebar-subheader-top">
              <h4 class="raml-console-sidebar-subhead">Protocols</h4>
            </header>
            <div class="raml-console-sidebar-row raml-console-sidebar-securty">
              <select ng-change="protocolChanged(currentProtocol)" class="raml-console-sidebar-input" ng-model="currentProtocol" style="margin-bottom: 0;">
               <option ng-repeat="protocol in raml.protocols" value="{{protocol}}">{{protocol}}</option>
              </select>
            </div>
          </section>

          <section>
            <header class="raml-console-sidebar-row raml-console-sidebar-subheader" ng-class="{'raml-console-sidebar-subheader-top':raml.protocols.length == 1}">
              <h4 class="raml-console-sidebar-subhead">Authentication</h4>
            </header>

            <div class="raml-console-sidebar-row raml-console-sidebar-securty">
              <div class="raml-console-toggle-group raml-console-sidebar-toggle-group">
                <label class="raml-console-sidebar-label">Security Scheme</label>
                <select ng-change="securitySchemeChanged(currentScheme)" class="raml-console-sidebar-input" ng-model="currentScheme" style="margin-bottom: 0;">
                 <option ng-repeat="(key, scheme) in securitySchemes" value="{{scheme.id}}">{{scheme.name}}</option>
                </select>
              </div>
            </div>

            <div ng-switch="currentSchemeType">
              <basic-auth ng-switch-when="Basic Authentication" credentials='credentials'></basic-auth>
              <oauth1 ng-switch-when="OAuth 1.0" credentials='credentials'></oauth1>
              <oauth2 ng-switch-when="OAuth 2.0" credentials='credentials'></oauth2>
            </div>
          </section>

          <named-parameters ng-if="resource.uriParametersForDocumentation" src="resource.uriParametersForDocumentation" context="context" type="uriParameters" title="URI Parameters" show-base-url></named-parameters>

          <named-parameters src="methodInfo.headers.plain" context="context" type="headers" title="Headers" enable-custom-parameters></named-parameters>

          <named-parameters src="methodInfo.queryParameters" context="context" type="queryParameters" title="Query Parameters" enable-custom-parameters></named-parameters>

          <section id="sidebar-body" ng-if="methodInfo.body">
            <header class="raml-console-sidebar-row raml-console-sidebar-subheader">
              <h4 class="raml-console-sidebar-subhead">Body</h4>
            </header>

            <div class="raml-console-sidebar-row" style="padding-bottom: 0;">
              <select ng-change="requestBodySelectionChange(context.bodyContent.selected)" class="raml-console-sidebar-input" ng-model="context.bodyContent.selected" style="margin-bottom: 0;">
               <option ng-repeat="(key, scheme) in methodInfo.body" value="{{key}}">{{key}}</option>
              </select>
            </div>

            <div class="raml-console-sidebar-row" ng-switch="context.bodyContent.isForm(context.bodyContent.selected)">
              <div ng-switch-when="false">
                <div class="raml-console-codemirror-body-editor" ui-codemirror="{ lineNumbers: true, tabSize: 2, theme : 'raml-console', mode: context.bodyContent.selected }" ng-model="context.bodyContent.definitions[context.bodyContent.selected].value"></div>
                <div class="raml-console-sidebar-prefill raml-console-sidebar-row" align="right" ng-if="context.bodyContent.definitions[context.bodyContent.selected].hasExample()">
                  <button class="raml-console-sidebar-action-prefill" ng-click="prefillBody(context.bodyContent.selected)">Prefill with example</button>
                </div>
              </div>


              <div ng-switch-when="true">
                <p class="raml-console-sidebar-input-container" ng-repeat="param in context.bodyContent.definitions[context.bodyContent.selected].plain">
                  <span class="raml-console-sidebar-input-tooltip-container" ng-if="param.definitions[0].description">
                    <button tabindex="-1" class="raml-console-sidebar-input-tooltip"><span class="raml-console-visuallyhidden">Show documentation</span></button>
                    <span class="raml-console-sidebar-tooltip-flyout">
                      <span markdown="param.definitions[0].description" class="raml-console-marked-content"></span>
                    </span>
                  </span>

                  <raml-field param="param.definitions[0]" model="context.bodyContent.definitions[context.bodyContent.selected].values[param.definitions[0].id]"></raml-field>
                </p>
              </div>
            </div>
          </section>

          <section>
            <div class="raml-console-sidebar-row">
              <div class="raml-console-sidebar-action-group">
                <button ng-hide="showSpinner" type="submit" class="raml-console-sidebar-action raml-console-sidebar-action-{{methodInfo.method}}" ng-click="tryIt($event)" ng-class="{'raml-console-sidebar-action-force':context.forceRequest}"><span ng-if="context.forceRequest">Force</span> {{methodInfo.method.toUpperCase()}}
                </button>
                <button ng-if="showSpinner" type="submit" class="raml-console-sidebar-action raml-console-sidebar-action-{{methodInfo.method}} raml-console-sidebar-action-cancel-request" ng-click="cancelRequest()">Cancel <div class="raml-console-spinner-request" ng-if="showSpinner">Loading ...</div></button>
                <button class="raml-console-sidebar-action raml-console-sidebar-action-clear" ng-click="clearFields()">Clear</button>
                <button class="raml-console-sidebar-action raml-console-sidebar-action-reset" ng-click="resetFields()">Reset</button>
              </div>
            </div>
          </section>

          <div ng-if="responseDetails">
            <section id="request_{{generateId(resource.pathSegments)}}" class="raml-console-side-bar-try-it-description">
              <header class="raml-console-sidebar-row raml-console-sidebar-header">
                <h3 class="raml-console-sidebar-head raml-console-sidebar-head-expand">
                  <button ng-class="{'raml-console-is-open':showRequestMetadata, 'raml-console-is-collapsed':!showRequestMetadata}" class="raml-console-sidebar-expand-btn" ng-click="toggleRequestMetadata()">
                    Request
                  </button>
                </h3>
              </header>
              <div class="raml-console-sidebar-request-metadata" ng-class="{'raml-console-is-active':showRequestMetadata}">

                <div class="raml-console-sidebar-row">
                  <div ng-if="requestOptions.url">
                    <h3 class="raml-console-sidebar-response-head raml-console-sidebar-response-head-pre">Request URL</h3>
                    <div class="raml-console-sidebar-response-item">
                      <p class="raml-console-sidebar-response-metadata raml-console-sidebar-request-url">{{requestOptions.url}}</p>
                    </div>
                  </div>

                  <div ng-if="requestOptions.headers">
                    <h3 class="raml-console-sidebar-response-head">Headers</h3>
                    <div class="raml-console-sidebar-response-item">
                      <p class="raml-console-sidebar-response-metadata" ng-repeat="(key, value) in requestOptions.headers">
                        <b>{{key}}:</b> <br>{{getHeaderValue(value)}}
                      </p>
                    </div>
                  </div>

                  <div ng-if="requestOptions.data">
                    <h3 class="raml-console-sidebar-response-head raml-console-sidebar-response-head-pre">Body</h3>
                    <div ng-switch="context.bodyContent.isForm(context.bodyContent.selected)">
                      <div ng-switch-when="false" class="raml-console-sidebar-pre raml-console-sidebar-request-body">
                        <div ui-codemirror="{ readOnly: 'nocursor', tabSize: 2, lineNumbers: true, theme : 'raml-console', mode: context.bodyContent.selected }" ng-model="requestOptions.data"></div>
                      </div>
                      <div ng-switch-when="true" class="raml-console-sidebar-response-item">
                        <p class="raml-console-sidebar-response-metadata" ng-repeat="(key, value) in context.bodyContent.definitions[context.bodyContent.selected].values">
                          <b>{{key}}:</b> <br>{{value}}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <section class="raml-console-side-bar-try-it-description">
              <header class="raml-console-sidebar-row raml-console-sidebar-header">
                <h3 class="raml-console-sidebar-head">
                  <button ng-class="{'raml-console-is-open':showResponseMetadata, 'raml-console-is-collapsed':!showResponseMetadata}" class="raml-console-sidebar-expand-btn" ng-click="toggleResponseMetadata()">
                    Response
                  </button>
                </h3>
              </header>

              <div class="raml-console-sidebar-row raml-console-sidebar-response" ng-class="{'raml-console-is-active':showResponseMetadata}">
                <h3 class="raml-console-sidebar-response-head">Status</h3>
                <p class="raml-console-sidebar-response-item">{{response.status}}</p>

                <h3 class="raml-console-sidebar-response-head" ng-if="response.headers">Headers</h3>
                <div class="raml-console-sidebar-response-item">
                  <p class="raml-console-sidebar-response-metadata" ng-repeat="(key, value) in response.headers">
                    <b>{{key}}:</b> <br>{{value}}
                  </p>
                </div>
                <div ng-if="response.body">
                  <h3 class="raml-console-sidebar-response-head raml-console-sidebar-response-head-pre">Body</h3>
                  <div class="raml-console-sidebar-pre">
                    <div ui-codemirror="{ readOnly: true, tabSize: 2, lineNumbers: true, theme : 'raml-console', mode: response.contentType }" ng-model="response.body" ng-style="editorStyle">
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </div>
      </div>
    </div>
  </div>
</form>
