<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>API User</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css"/>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
    <!--<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.min.js"></script>-->
    <link rel="stylesheet" href=" http://twitter.github.com/bootstrap/assets/css/bootstrap.css"/>
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"/>

    <script>
        $(function () {
            {{#apiDocuments}}
                {{#apis}}
                    {{#operations}}
                        $("#tabs{{index}}{{apiIndex}}{{opIndex}}").tabs();
                    {{/operations}}
                {{/apis}}

                $("#accordion{{index}}api").accordion({
                    collapsible: true,
                    active: false,
                    header: "h5",
                    heightStyle: "content"
                });
            {{/apiDocuments}}
        });
    </script>
    <style type="text/css">
        td, th {
            padding: 2px 4px;
        }

        table {
            border-collapse: collapse;
        }

        table, th, td {
            border: 1px solid black;
        }

        #notes {
            position: absolute;
            right: 10px;
            top: 4px;
            font-size: 9px;
        }

        #main_container {
            position: relative;
            width: 958px;
        }
    </style>
</head>
<body>
<div id="main_container">
    <h3>BasePath: {{basePath}}</h3>

    <h3> Api Version: {{apiVersion}}</h3>

    <div id="api_container">
        <h3>Resources</h3>
        {{#apiDocuments}}
            <h4>{{resourcePath}}</h4>

            <div class='content'>
                {{{description}}}


                <div id="accordion{{index}}api">
                    {{#apis}}
                        {{#operations}}
                            <h5><span style="font-weight: bold;">{{httpMethod}} </span><span>{{{path}}}</span>

                                <div id="notes">{{{summary}}}</div>
                            </h5>
                            <div>
                                <p>{{notes}}</p>

                                <div id="tabs{{index}}{{apiIndex}}{{opIndex}}">

                                    <ul>
                                        <li><a href="#tabs{{index}}{{apiIndex}}{{opIndex}}-1">Request Parameters</a>
                                        </li>
                                        <li><a href="#tabs{{index}}{{apiIndex}}{{opIndex}}-2">Response Body</a></li>
                                        <li><a href="#tabs{{index}}{{apiIndex}}{{opIndex}}-3">Response Status Codes</a>
                                        </li>
                                        <li><a href="#tabs{{index}}{{apiIndex}}{{opIndex}}-4">Examples</a>
                                        </li>
                                    </ul>
                                    <div id="tabs{{index}}{{apiIndex}}{{opIndex}}-1">
                                        <ul>
                                            {{#parameters}}
                                                <li>
                                                    <h7>{{paramType}}</h7>
                                                    <table>
                                                        <tr>
                                                            <th>Name</th>
                                                            <th>Required</th>
                                                            <th>Data Type</th>
                                                            <th>Description</th>
                                                        </tr>
                                                        {{#paras}}
                                                            <tr>
                                                                <th>{{name}}</th>
                                                                <td>{{#required}}required{{/required}}
                                                                    {{^required}}optional{{/required}}</td>
                                                                <td>{{type}}</td>
                                                                <td>{{description}}</td>
                                                            </tr>
                                                        {{/paras}}
                                                    </table>
                                                </li>
                                            {{/parameters}}
                                        </ul>
                                    </div>
                                    <div id="tabs{{index}}{{apiIndex}}{{opIndex}}-2">
                                        <p>{{#responseClass}}<a
                                                href="#{{{classLinkName}}}">{{className}}</a>{{/responseClass}}
                                            {{^responseClass}}No Content{{/responseClass}}
                                        </p>
                                    </div>
                                    <div id="tabs{{index}}{{apiIndex}}{{opIndex}}-3">
                                        <table>
                                            <tr>
                                                <th>Status Code</th>
                                                <th>Reason</th>
                                            </tr>
                                            {{#errorResponses}}
                                                <tr>
                                                    <td>{{code}}</td>
                                                    <td>{{{message}}}</td>
                                                </tr>
                                            {{/errorResponses}}
                                        </table>
                                    </div>
                                    <div id="tabs{{index}}{{apiIndex}}{{opIndex}}-4">
                                        <p>{{#samples}}
                                            Sample Request

                                            <pre>
                                            {{{sampleRequest}}}
                                            </pre>

                                            - Sample Response

                                            <pre>
                                            {{{sampleResponse}}}
                                            </pre>
                                           {{/samples}}
                                           {{^samples}}No Samples{{/samples}}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        {{/operations}}
                    {{/apis}}
                </div>
            </div>
        {{/apiDocuments}}
    </div>
    <h3>Data Types</h3>
    {{#dataTypes}}
        <h4><a name="{{name}}">{{name}}</a></h4>

        <div>
            <table>
                <th>Name</th>
                <th>Type</th>
                <th>Required</th>
                <th>Access</th>
                <th>Schema</th>
                <th>Notes</th>
                {{#items}}
                    <tr>
                        <th>{{name}}</th>
                        <td>{{#linkType}}<a href="#{{{linkType}}}">{{type}}</a>{{/linkType}}{{^linkType}}{{type}}{{/linkType}}</td>
                        <td>{{required}}</td>
                        <td>{{access}}</td>
                        <td>{{{description}}}</td>
                        <td>{{{notes}}}</td>
                    </tr>
                {{/items}}
            </table>
        </div>
    {{/dataTypes}}
</div>
</body>
</html>
