<div class="raml-console-resource-panel-primary" ng-if="documentationEnabled">
  <!-- Request -->
  <header class="raml-console-resource-header">
    <h3 class="raml-console-resource-head">
      Request
    </h3>
  </header>
  <div id="request-documentation" class="raml-console-resource-panel-primary-row raml-console-resource-panel-content raml-console-is-active" ng-class="{'raml-console-is-active':showRequestDocumentation}">
    <h3 class="raml-console-resource-heading-a">Description</h3>

    <p markdown="methodInfo.description" class="raml-console-marked-content"></p>

    <section class="raml-console-resource-section" id="docs-uri-parameters" ng-if="resource.uriParametersForDocumentation">
      <h3 class="raml-console-resource-heading-a">URI Parameters</h3>

      <div class="raml-console-resource-param" id="docs-uri-parameters-{{uriParam[0].displayName}}" ng-repeat="uriParam in resource.uriParametersForDocumentation">
        <h4 class="raml-console-resource-param-heading">{{uriParam[0].displayName}}<span class="raml-console-resource-param-instructional">{{parameterDocumentation(uriParam[0])}}</span></h4>
        <p markdown="uriParam[0].description" class="raml-console-marked-content"></p>

        <p ng-if="uriParam[0].example">
          <span class="raml-console-resource-param-example"><b>Example:</b> {{uriParam[0].example}}</span>
        </p>
      </div>
    </section>

    <section class="raml-console-resource-section" id="docs-headers" ng-if="methodInfo.headers.plain">
      <h3 class="raml-console-resource-heading-a">Headers</h3>

      <div class="raml-console-resource-param" ng-repeat="header in methodInfo.headers.plain" ng-if="!header[0].isFromSecurityScheme">
        <h4 class="raml-console-resource-param-heading">{{header[0].displayName}}<span class="raml-console-resource-param-instructional">{{parameterDocumentation(header[0])}}</span></h4>

        <p markdown="header[0].description" class="raml-console-marked-content"></p>

        <p ng-if="header[0].example">
          <span class="raml-console-resource-param-example"><b>Example:</b> {{header[0].example}}</span>
        </p>
      </div>
    </section>

    <section class="raml-console-resource-section" id="docs-query-parameters" ng-if="methodInfo.queryParameters">
      <h3 class="raml-console-resource-heading-a">Query Parameters</h3>

      <div class="raml-console-resource-param" ng-repeat="queryParam in methodInfo.queryParameters" ng-if="!queryParam[0].isFromSecurityScheme">
        <h4 class="raml-console-resource-param-heading">{{queryParam[0].displayName}}<span class="raml-console-resource-param-instructional">{{parameterDocumentation(queryParam[0])}}</span></h4>

        <p markdown="queryParam[0].description" class="raml-console-marked-content"></p>

        <p ng-if="queryParam[0].example">
          <span class="raml-console-resource-param-example"><b>Example:</b> {{queryParam[0].example}}</span>
        </p>
      </div>
    </section>

    <section class="raml-console-resource-section raml-console-documentation-schemes">
      <h3 class="raml-console-resource-heading-a">Security Schemes</h3>
      <ol class="raml-console-documentation-security-scheme">
        <li class="raml-console-documentation-scheme" ng-class="{'raml-console-is-active':isSchemeSelected(value)}" ng-click="selectDocumentationScheme(value)" ng-repeat="(key, value) in securitySchemes">{{value.name}}</li>
      </ol>

      <p ng-if"documentationSchemeSelected.description" markdown="documentationSchemeSelected.description" class="raml-console-marked-content"></p>

      <section class="raml-console-resource-section raml-console-scheme-headers" ng-if="documentationSchemeSelected.describedBy.headers">
        <h4 class="raml-console-resource-heading-a">Headers</h4>

        <div class="raml-console-resource-param" ng-repeat="(key, header) in documentationSchemeSelected.describedBy.headers">
          <h4 class="raml-console-resource-param-heading">{{key}}<span class="raml-console-resource-param-instructional">{{parameterDocumentation(header)}}</span></h4>

          <p markdown="header.description" class="raml-console-marked-content"></p>

          <p ng-if="header.example">
            <span class="raml-console-resource-param-example"><b>Example:</b> {{header.example}}</span>
          </p>
        </div>
      </section>

      <section class="raml-console-resource-section raml-console-scheme-query-parameters" ng-if="documentationSchemeSelected.describedBy.queryParameters">
        <h4 class="raml-console-resource-heading-a">Query Parameters</h4>

        <div class="raml-console-resource-param" ng-repeat="(key, queryParameter) in documentationSchemeSelected.describedBy.queryParameters">
          <h4 class="raml-console-resource-param-heading">{{key}}<span class="raml-console-resource-param-instructional">{{parameterDocumentation(queryParameter)}}</span></h4>

          <p markdown="queryParameter.description" class="raml-console-marked-content"></p>

          <p ng-if="queryParameter.example">
            <span class="raml-console-resource-param-example"><b>Example:</b> {{queryParameter.example}}</span>
          </p>
        </div>
      </section>

      <section class="raml-console-resource-section raml-console-scheme-responses" ng-if="documentationSchemeSelected.describedBy.responses">
        <h4 class="raml-console-resource-heading-a">Responses</h4>

        <div class="raml-console-resource-param" ng-repeat="(code, info) in documentationSchemeSelected.describedBy.responses">
          <h4 class="raml-console-resource-param-heading">{{code}}</h4>
          <p markdown="info.description" class="raml-console-marked-content"></p>
        </div>
      </section>

      <section class="raml-console-resource-section raml-console-scheme-settings" ng-if="documentationSchemeSelected.settings">
        <h4 class="raml-console-resource-heading-a">Settings</h4>

        <div class="raml-console-resource-param" ng-repeat="(key, config) in documentationSchemeSelected.settings">
          <h4 class="raml-console-resource-param-heading">{{key}}</h4>
          <p>{{schemaSettingsDocumentation(config)}}</p>
        </div>
      </section>
    </section>


    <section class="raml-console-resource-section" ng-if="methodInfo.body">
      <h3 class="raml-console-resource-heading-a">
        Body
      </h3>

      <h4 class="raml-console-request-body-heading">
        <span ng-click="changeResourceBodyType($event, key)" ng-class="{ 'raml-console-is-active' : bodySelected(key)}" class="raml-console-flag raml-console-body-{{getBodyId(key)}}" ng-repeat="(key, value) in methodInfo.body">{{key}}</span>
      </h4>

      <section ng-if="methodInfo.body[currentBodySelected].formParameters">
         <div class="raml-console-resource-param" ng-repeat="formParam in methodInfo.body[currentBodySelected].formParameters">
          <h4 class="raml-console-resource-param-heading">{{formParam[0].displayName}}<span class="raml-console-resource-param-instructional">{{parameterDocumentation(formParam[0])}}</span></h4>

          <p markdown="formParam[0].description" class="raml-console-marked-content"></p>

          <p ng-if="formParam[0].example">
            <span class="raml-console-resource-param-example"><b>Example:</b> {{formParam[0].example}}</span>
          </p>
        </div>
      </section>

      <div ng-if="methodInfo.body[currentBodySelected].example">
        <span>Example:</span>
        <pre class="raml-console-resource-pre"><code class="raml-console-hljs" hljs source="getBeatifiedExample(methodInfo.body[currentBodySelected].example)"></code></pre>
      </div>

      <div class="raml-console-schema-container" ng-if="methodInfo.body[currentBodySelected].schema">
        <p><button ng-click="showSchema($event)" class="raml-console-resource-btn">Show Schema</button></p>
        <pre class="raml-console-resource-pre raml-console-resource-pre-toggle"><code class="raml-console-hljs" hljs source="getBeatifiedExample(methodInfo.body[currentBodySelected].schema)"></code></pre>
      </div>
    </section>
  </div>

  <!-- Response -->
  <div ng-if="methodInfo.responseCodes">
    <header class="raml-console-resource-header">
      <h3 class="raml-console-resource-head">
        Response
      </h3>
    </header>

    <div class="raml-console-resource-response-jump">
      <ul class="raml-console-resource-menu">
        <li class="raml-console-resource-btns raml-console-resource-menu-item" ng-repeat="code in methodInfo.responseCodes">
          <button ng-click="showCodeDetails(code)" class="raml-console-resource-btn raml-console-resource-menu-button raml-console-resource-menu-btn-{{getColorCode(code)}}" ng-class="{ 'raml-console-button-is-active': isActiveCode(code) }" href="#code{{code}}">{{code}}</button>
        </li>
      </ul>
    </div>

    <div class="raml-console-resource-panel-primary-row raml-console-resource-panel-content raml-console-is-active raml-console-response-container" ng-class="{'raml-console-is-active':showResponseDocumentation}">
      <section ng-if="isActiveCode(code)" class="raml-console-resource-section raml-console-resource-response-section" ng-repeat="code in methodInfo.responseCodes">
        <a name="code{{code}}"></a>
        <h3 class="raml-console-resource-heading-a">Status {{code}}</h3>

        <div class="raml-console-resource-response">
          <p markdown="methodInfo.responses[code].description" class="raml-console-marked-content"></p>
        </div>

        <div class="raml-console-resource-response" ng-if="methodInfo.responses[code].headers">
          <h4 class="raml-console-resource-body-heading">Headers</h4>

          <div class="raml-console-resource-param" ng-repeat="header in methodInfo.responses[code].headers">
            <h4 class="raml-console-resource-param-heading">{{header[0].displayName}} <span class="raml-console-resource-param-instructional">{{header[0].type}}</span></h4>

            <p markdown="header[0].description" class="raml-console-marked-content"></p>
          </div>
        </div>

        <div class="raml-console-resource-response" ng-if="methodInfo.responses[code].body">
          <h4 class="raml-console-resource-body-heading">
            Body
            <span ng-click="changeType($event, key, code)" ng-class="{ 'raml-console-is-active': $first}" class="raml-console-flag" ng-repeat="(key, value) in methodInfo.responses[code].body">{{key}}</span>
          </h4>

          <div ng-if="responseInfo[code][responseInfo[code].currentType].example">
            <span>Example:</span>
            <pre class="raml-console-resource-pre"><code class="raml-console-hljs" hljs source="getBeatifiedExample(responseInfo[code][responseInfo[code].currentType].example)"></code></pre>
          </div>

          <div class="raml-console-schema-container" ng-if="responseInfo[code][responseInfo[code].currentType].schema">
            <p><button ng-click="showSchema($event)" class="raml-console-resource-btn">Show Schema</button></p>
            <pre class="raml-console-resource-pre raml-console-resource-pre-toggle"><code class="raml-console-hljs" hljs source="getBeatifiedExample(responseInfo[code][responseInfo[code].currentType].schema)"></code></pre>
          </div>
        </div>
      </section>

    </div>
  </div>
</div>
