<section>
  <header class="raml-console-sidebar-row raml-console-sidebar-subheader">
    <h4 class="raml-console-sidebar-subhead">{{title}}</h4>
    <button class="raml-console-sidebar-add-btn" ng-click="addCustomParameter()" ng-if="enableCustomParameters"></button>
  </header>

  <div class="raml-console-sidebar-row">
    <p class="raml-console-sidebar-input-container raml-console-sidebar-input-container-custom" ng-repeat="customParam in context.customParameters[type]">
      <button class="raml-console-sidebar-input-delete" ng-click="removeCutomParam(customParam)"></button>
      <label for="custom-header" class="raml-console-sidebar-label raml-console-sidebar-label-custom">
        <input class="raml-console-sidebar-custom-input-for-label" ng-model="customParam.name" placeholder="custom key">
      </label>
      <input name="custom-header" class="raml-console-sidebar-input raml-console-sidebar-input-custom" placeholder="custom value" ng-model="customParam.value">
    </p>

    <p ng-show="showBaseUrl" class="raml-console-sidebar-method">{{$parent.methodInfo.method.toUpperCase()}}</p>
    <div ng-show="showBaseUrl" class="raml-console-sidebar-method-content">
      <div class="raml-console-sidebar-url" ng-repeat="segment in segments">
        <div ng-hide="segment.templated">{{segment.name}}</div>
        <div ng-show="segment.templated" ng-if="context[type].values[segment.name][0]" class="raml-console-sidebar-url-segment">{{context[type].values[segment.name][0]}}</div>
        <div ng-show="segment.templated" ng-if="!context[type].values[segment.name][0]" class="raml-console-sidebar-url-segment"><span ng-non-bindable>&#123;</span>{{segment.name}}<span ng-non-bindable>&#125;</span></div>
      </div>
    </div>

    <p class="raml-console-sidebar-input-container" ng-repeat="param in context[type].plain">
      <span class="raml-console-sidebar-input-tooltip-container" ng-if="param.definitions[0].description" ng-class="{'raml-console-sidebar-input-tooltip-container-enum': param.definitions[0].enum}">
        <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[type].values[param.definitions[0].id]"></raml-field>
    </p>
  </div>
</section>
