<html>
    <head>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
        <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>

        <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <title>
            {% if title is defined -%}
                {{title}}
            {% else -%}
                Documentation
            {% endif -%}
        </title>
        <style>


            div.mapping {
                margin: 20px 20px;
            }

            ul.methods:before { content: "Methods: "; }
            ul.methods li {
                display: inline;
                list-style: none;
            }
            ul.methods li:after { content: ","; }
            ul.methods li:last-child:after { content: ""; }

            ul.arguments:before { content: "Arguments: "; }
            ul.arguments li {
                display: inline;
                list-style: none;
            }
            ul.arguments .argument { font-style:italic }
            ul.arguments .default:not(:empty):before { content: "("; }
            ul.arguments .default:not(:empty):after { content: ")"; }
            ul.arguments li:after { content: ","; }
            ul.arguments li:last-child:after { content: ""; }

            .docstring:before { content: "Description: "; }
        </style>
    </head>
    <body>
    <div class="navbar-fixed">
    <nav>
      <div class="nav-wrapper">
        <a href="#!" class="brand-logo center">SE-Hub API</a>
          <ul id="nav-mobile" class="left hide-on-med-and-down">
            <li><a href="/api/help">Home</a></li>
          </ul>
      </div>
    </nav>
  </div>

        <h1>
            {% if title is defined -%}
                {{title}}
            {% else -%}
                Documentation
            {% endif -%}
        </h1>

        {% for doc in autodoc %}
    <div style="margin-left: auto;margin-right: auto">
      <div class="row" >
        <div class="col s12 m6">
          <div class="card blue-grey darken-1">
            <div class="card-content white-text">
              <span class="card-title">{{doc.rule|escape}}</span>
                <ul class="methods">
                    {% for method in doc.methods -%}
                    <li class="method">{{method}}</li>
                    {% endfor %}
            </ul>
                <ul class="arguments">
                {% for arg in doc.args %}
                <li>
                    <span class="argument">{{arg}}</span>
                    <span class="default">{{doc.defaults[arg]}}</span>
                </li>
                {% endfor %}
            </ul>
              {{doc.docstring|safe}}
            </div>
            <div class="card-action">
              <a href="#">This is a link</a>
              <a href='#'>This is a link</a>
            </div>
          </div>
        </div>
      </div>
        </div>
        {% endfor %}

     <footer class="page-footer">
          <div class="container">
            <div class="row">
              <div class="col l6 s12">
                <h5 class="white-text">Footer Content</h5>
                <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
              </div>
              <div class="col l4 offset-l2 s12">
                <h5 class="white-text">Links</h5>
                <ul>
                  <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
                  <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
                  <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
                  <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="footer-copyright">
            <div class="container">
            SE-Hub (c) 2015 Niptop Team
            <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
            </div>
          </div>
        </footer>
    </body>
</html>