<link rel="stylesheet" href="app/api/css/api.css" type="text/css"/>

<div class="row-fluid" ng-controller="API.WadlViewController">

  <div class="log-main">
    <div ng-class="isInDashboardClass()">

      <div class="swagger-ui-wrap">
        <div class="info">
          <div ng-repeat="root in apidocs.resources  | filter:searchText">
            <div ng-repeat="resource in root.resource | filter:searchText">
              <ng-include src="'resourceTemplate'"/>
            </div>

            <div class="footer">
              <br>
              <br>
              <h4 style="color: #999">[ <span style="font-variant: small-caps">base url</span>: {{root.base}},
                <!--
                                <span style="font-variant: small-caps">api version</span>: 1.0.0
                -->
                ]</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/ng-template" id="resourceTemplate">
  <ul class="resources">
    <li class="resource active">
      <div class="heading">
        <h2>
          <a ng-click="toggleResourcesFor(resource)">{{resource.path}}</a>
        </h2>
        <ul class="options">
          <li>
            <a ng-click="showHide(resource)">Show/Hide</a>
          </li>
          <li>
            <a ng-click="showOperations(resource)">
              List Operations
            </a>
          </li>
          <li>
            <a ng-click="expandOperations(resource)">
              Expand Operations
            </a>
          </li>
          <li>
            <a target="raw" href="{{url}}">Raw</a>
          </li>
        </ul>
      </div>

      <ul class="endpoints" style="display: block;">
        <li class="endpoint" ng-hide="resource.hide">
          <ul class="operations">
            <li ng-repeat="method in resource.method" class="{{method.name | lowercase}} operation">
              <div class="expandable closed" model="method">
                <div class="heading title">
                  <h3>
                    <span class="http_method">{{method.name}}</span>
                    <span class="path">{{resource.path}}</span>
                  </h3>
                  <ul class="options">
                    <li>
                      <a href="#" class="toggleOperation">{{method.description}}</a>
                    </li>
                  </ul>
                </div>

                <div class="content expandable-body">
                  <form accept-charset="UTF-8" class="sandbox" ng-submit="tryInvoke(root.base, resource, method)">
                    <div class="parameters">
                      <div style="margin:0;padding:0;display:inline"></div>

                      <h4>Parameters</h4>
                      <table class="fullwidth">
                        <thead>
                        <tr>
                          <th style="width: 100px; max-width: 100px">Parameter</th>
                          <th style="width: 310px; max-width: 310px">Value</th>
                          <th style="width: 200px; max-width: 200px">Description</th>
                          <th style="width: 100px; max-width: 100px">Parameter Type</th>
                          <th style="width: 220px; max-width: 230px">Data Type</th>
                        </tr>
                        </thead>
                        <tbody class="operation-params">

                        <tr ng-repeat="param in resource.param">
                          <td class="code required">{{param.name}}</td>
                          <td>
                            <input class="parameter required" minlength="1" name="{{param.name}}"
                                   placeholder="(required)"
                                   type="text" ng-model="param.value">
                          </td>
                          <td>
                            <strong>{{param.description}}</strong>
                          </td>
                          <td>{{param.style}}</td>
                          <td><span class="model-signature">{{param.type}}</span></td>
                        </tr>

                        <tr ng-repeat="step in method.request"">
                          <td class="code required">{{step.element}}</td>
                          <td>
                            <textarea class="body-textarea" name="body" ng-model="step.value"></textarea>

                            <div class="control-group" ng-show="step.mediaTypes.length > 1">
                            <label class="inline">Content type: </label>
                            <select ng-model="step.contentType" required ng-options="mediaType for mediaType in step.mediaTypes"></select>
                            </div>
                          </td>
                          <td>
                            <strong>{{param.description}}</strong>
                          </td>
                          <td>body</td>
                          <td>
                            <div class="tabbable signature-nav" type="pills">
                              <div ng-repeat="rep in step.representation" value="{{rep.mediaType}}" class="tab-pane"
                                   title="{{rep.mediaType}}">
                                <div class="model-signature" ng-show="rep.schema">
                                  <div class="signature-container">
                                    <div class="description" style="display: block;">
                                <span class="strong" title="java class: {{rep.javaClass}}
  element name: {{rep.element}}">{{rep.typeName}} {</span>

                                      <div ng-repeat="(key, value) in rep.schema.properties">
                                        <span class="propName propOpt">{{key}}</span>
                                        (<span class="propType">{{value.type}}</span><span class="propOptKey"
                                                                                           ng-show="value.optional">, optional</span>)
                                        <span class="propDesc"
                                              ng-show="value.description">: {{value.description}}</span>
                                      </div>
                                      <span class="strong">}</span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </td>
                        </tr>
                        </tbody>
                      </table>
                    </div>

                    <div class="responses" ng-show="method.response.length">
                      <h4>Response</h4>
                      <ul>
                        <li class="response" ng-repeat="step in method.response">
                          <div class="tabbable signature-nav">
                            <div ng-repeat="rep in step.representation" value="{{rep.mediaType}}" class="tab-pane"
                                 title="{{rep.mediaType}}">
                              <div class="model-signature" ng-show="rep.schema">
                                <div class="signature-container">
                                  <div class="description" style="display: block;">
                              <span class="strong" title="java class: {{rep.javaClass}}
element name: {{rep.element}}">{{rep.typeName}} {</span>

                                    <div ng-repeat="(key, value) in rep.schema.properties">
                                      <span class="propName propOpt">{{key}}</span>
                                      (<span class="propType">{{value.type}}</span><span class="propOptKey"
                                                                                         ng-show="value.optional">, optional</span>)
                                      <span class="propDesc" ng-show="value.description">: {{value.description}}</span>
                                    </div>
                                    <span class="strong">}</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </li>
                      </ul>
                    </div>

                    <div class="errorCodes">
<!--
                      <h4>Error Status Codes</h4>
                      <table class="fullwidth">
                        <thead>
                        <tr>
                          <th>HTTP Status Code</th>
                          <th>Reason</th>
                        </tr>
                        </thead>
                        <tbody class="operation-status">

                        <tr>
                          <td width="15%" class="code">400</td>
                          <td>Invalid username supplied</td>
                        </tr>
                        <tr>
                          <td width="15%" class="code">404</td>
                          <td>User not found</td>
                        </tr>
                        </tbody>
                      </table>
-->
                    </div>


                    <div class="sandbox_header">
                      <input class="btn" name="commit" type="submit" value="Try it out!">
                      <span ng-show="method.invoke.running" class="progress" title="Processing request">
                        <i class="icon-refresh icon-spin"></i>
                      </span>
                      <a class="response_hider" ng-show="method.invoke" ng-click="method.invoke = null">Hide Response</a>

                      <div class="response" ng-show="method.invoke.status">
                        <h4>Request URL</h4>

                        <div class="block request_url">
                          <a class="request_url" target="request" href="{{method.invoke.realUrl}}">{{method.invoke.realUrl}}</a>
                        </div>

                        <h4>Response Body</h4>

                        <div class="tabbable signature-nav">
                          <div value="source" class="tab-pane" title="Source">
                            <div class="block response_body">
                              <div class="row-fluid signature-nav-buttons">
                                <div class="control-group">
                                  <button class="btn autoformat pull-right" ng-click="autoFormat(method.codeMirror)"
                                          title="Automatically pretty prints the response so its easier to read">Format
                                  </button>
                                </div>
                              </div>
                            </div>
                            <div class="row-fluid">
                              <div class="control-group">
                                <div hawtio-editor="method.invoke.data" read-only="true" mode="method.invoke.dataMode"
                                     dirty="method.editorDirty" output-editor="method.codeMirror"></div>
                              </div>
                            </div>
                          </div>
                          <div value="form" class="tab-pane" title="Form">
                          </div>
                        </div>

                        <h4>Response Code</h4>

                        <div class="block response_code">
                          <pre class="response_code">{{method.invoke.status}}</pre>
                        </div>

                        <h4>Response Headers</h4>

                        <div class="block response_headers">
                          <pre class="header" ng-repeat="(headerName, headerValue) in method.invoke.headers">{{headerName}}: {{headerValue}}</pre>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
                </div>
              </div>
            </li>
          </ul>
          <ul>
            <li class="resource" ng-repeat="resource in resource.resource">
              <ng-include src="'resourceTemplate'"/>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</script>

