{% load static %}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>GraphQL API Documentation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" media="screen" href="{% static "css/main.css" %}" />

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"/>
  </head>

  <body>
    <header>
      <nav class="top-nav indigo lighten-1">
        <div>
          <div class="nav-wrapper">
            <a href="{%url 'graphqldoc:index' %}" class="brand-logo">{{ gdoc_title }}</a>
            <ul class="left hide-on-med-and-down">
              <!-- Dropdown Trigger -->
              <li>
                <a class="dropdown-trigger btn" href="#!" data-target="dropdown1">Category<i class="material-icons right">arrow_drop_down</i></a>
                <ul id="dropdown1" class="dropdown-content" tabindex="0">
                  <li tabindex="0"><a href="{%url 'graphqldoc:index' %}">Home</a></li>
                  <li class="divider"></li>
                  <li tabindex="0"><a href="{%url 'graphqldoc:detail' 'Query' %}">Query</a></li>
                  <li tabindex="0"><a href="{%url 'graphqldoc:detail' 'Mutation' %}">Mutation</a></li>
                  <li class="divider"></li>
                  {% for key, value in menu.items %}
                  <li>
                    <a href="{%url 'graphqldoc:detail' key|lower|capfirst %}">{{ key|lower|capfirst }}</a>
                  </li>
                  {% endfor %}
                </ul>                
              </li>
            </ul>
          </div>    
        </div>
      </nav>
    </header>
    
    <main>
      <div class="row">
        <div class="col s2 gdoc-sidenav">
          {% block sidenav %} {% endblock %}
        </div>
        <div class="col s10">
          <div class="container">
            {% block content %} {% endblock %}
          </div>
        </div>
      </div>
    </main>
        
    <footer class="page-footer indigo lighten-1">
      <div class="footer-copyright">
        <div class="container">
          © 2019-
          <noscript>2019</noscript>
          <script type="text/javascript">
            document.write(new Date().getFullYear());
          </script>
          Generated by
          <a class="grey-text text-lighten-4" href="#!">graphqldoc</a>
          <a class="grey-text text-lighten-4 right" href="https://github.com/thecylax/django-graphqldoc/blob/development/LICENSE">BSD License</a>
        </div>
      </div>
    </footer>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script type="text/javascript" src="{% static 'js/main.js' %}"></script>
  </body>
</html>
