<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <title>Api Documentation</title>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" >


    <style type="text/css" media="all">
      [data-collapsed="1"] + pre.language-javascript {
        display : block;
      }
      .code-example > h4:not( [data-collapsed="1"] ) + pre {
        display: none;
      }
      .code-example > h4 {
        cursor: pointer;
        color: rgb(206, 0, 211);
        font-weight: bold;
      }
      table thead {
        background: #F5F5F5;
      }
      body .table {
        width: inherit;
      }
    </style>
  </head>

  <body>

    <div class="container-fluid" >

      <div class="col-md-12">
        <% for api in @apiData : %>
        <div class="panel panel-info" id="<%- @genId api %>" >
          <div class="panel-heading">
            <h3 class="panel-title">
              <a href="#<%- @genId api %>" class="self-collapse" >
                <strong class="label label-success"><%- api.method %> </strong>
              </a>
              &nbsp;<code><%- api.action %></code>
            </h3>
          </div>
          <div class="panel-body ">
            <p>
            <div > <%- @markdown api.description %> </div>
            <h4>Query Params</h4>
            <% include 'param-list-table.ect', { params : api.query, markdown: @markdown } %>
            <h4>Body</h4>
            <% include 'param-list-table.ect', { params : api.body, markdown: @markdown } %>
            <h4>Response</h4>
            <% include 'param-list-table.ect', { params : api.resBody, markdown: @markdown } %>
            <div class="code-example">
              <h4>Example Req</h4>
              <pre class="language-javascript" ><code class="language-javascript" ><%- @highlight api.exampleReq  %></code></pre>
            </div>
            <div class="code-example">
              <h4>Example Response</h4>
              <pre class="language-javascript" ><code class="language-javascript" ><%- @highlight api.exampleRes  %></code></pre>
            </div>
            </p>
          </div>
        </div>
        <% end %>
      </div>

    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
    <script type="text/javascript" charset="utf-8">
      $(function(){
        $('div.panel-body > .code-example > h4').click(function(){
          var el = $(this);
          el.attr('data-collapsed', el.attr('data-collapsed') == '1' ? '0' : '1' );
        });

        $('table').addClass('table table-bordered');
      });
    </script>
  </body>
</html>
