{% load static %}

<!-- This template is the base template where all other tempaltes inherit from.
It defines the basic page strucutre (header,main, footer etc) and also defines
the navigation menu for desktop and mobile devices.
Also all needes JavaScript and CSS is laoded here.-->

<!DOCTYPE html>
<html lang="ger">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="{% static "blog/materialize/css/materialize.css" %}" media="screen,projection" />
  <!-- import materialize icons css -->
  <link type="text/css" rel="stylesheet" href="{% static "blog/material-design-icons/iconfont/material-icons.css"%}">
  <!-- Import own css -->
  <link type="text/css" rel="stylesheet" href="{% static "blog/main.css" %}" media="screen,projection" />
  {% if title %}
  <title>Bundesdata – {{ title }}</title>
  {% else %}
  <title>Bundesdata</title>
  {% endif %}
  <link rel="apple-touch-icon" sizes="180x180" href="{% static "blog/images/favicon/apple-touch-icon.png" %}">
  <link rel="icon" type="image/png" sizes="32x32" href="{% static "blog/images/favicon/favicon-32x32.png" %}">
  <link rel="icon" type="image/png" sizes="16x16" href="{% static "blog/images/favicon/favicon-16x16.png" %}">
  <link rel="manifest" href="{% static "blog/images/favicon/site.webmanifest" %}">
</head>

<body class="blue-grey lighten-5">
  <!-- Dropdown Structure -->
  <ul id="dropdown_protocols" class="dropdown-content">
    <li><a href="{% url "Protokoll-list" %}"><i class="material-icons left"">insert_drive_file</i>Protokolle</a></li>
    <li><a href="{% url "Reden" %}"><i class="material-icons left"">insert_comment</i>Reden</a></li>
  </ul>
  <nav class="light-green darken-1 nav-extended">
    <div class="container">
      <div class="nav-wrapper">
        <a href="/" class="brand-logo">Bundesdata</a>
        <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
        <ul class="right hide-on-med-and-down">
          <li><a href="{% url "MdBs" %}"><i class="material-icons left"">account_circle</i>MdBs</a></li>
          <!-- Dropdown Trigger -->
          <li><a class="dropdown-trigger" href="#!" data-target="dropdown_protocols"><i class="material-icons left"">insert_drive_file</i>Dokumente<i class="material-icons right">arrow_drop_down</i></a></li>
          <li><a href="{% url "ngram-viewer-jahr" %}"><i class="material-icons left"">trending_up</i>Ngram Viewer</a></li>
          <li><a href="{% url "about-page" %}"><i class="material-icons left"">info_outline</i>Info</a></li>
        </ul>
      </div>
      {% block nav-tabs %}
      {% endblock nav-tabs %}
  </nav>
  <ul id="dropdown_protocols_side" class="dropdown-content">
    <li><a href="{% url "Protokoll-list" %}"><i class="material-icons left"">insert_drive_file</i>Protokolle</a></li>
    <li><a href="{% url "Reden" %}"><i class="material-icons left"">insert_comment</i>Reden</a></li>
  </ul>
  <ul class="sidenav" id="mobile-demo">
    <li><a href="/" class="brand-logo">Bundesdata</a></li>
    <li><a href="{% url "MdBs" %}}"><i class="material-icons"">account_circle</i>MdBs</a></li>
    <li><a class="dropdown-trigger" href="#!" data-target="dropdown_protocols_side"><i class="material-icons left"">insert_drive_file</i>Dokumente<i class="material-icons right">arrow_drop_down</i></a></li>
    <li><a href="{% url "ngram-viewer-jahr" %}"><i class="material-icons"">trending_up</i>Ngram Viewer</a></li>
    <li><a href="{% url "about-page" %}"><i class="material-icons"">info_outline</i>Info</a></li>
  </ul>

  <main>
    {% block content %}
    {% endblock content %}
  </main>

  <footer class="page-footer light-green darken-1">
    <div class="container">
      <div class="row">
        <div class="col s12">
          <h5 class="white-text">Bundesdata</h5>
          <p class="grey-text text-lighten-4">Ein Projekt für Politikinteressierte.</p>
        </div>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="container">
        © 2019 Copyright <a class="grey-text text-lighten-4" href="#">Stephan Porada</a>
        <a class="grey-text text-lighten-4 right" href="{% url "impressum" %}">Impressum</a>
      </div>
    </div>
  </footer>
  <!-- Optional JavaScript -->
  <script src="{% static "blog/materialize/js/materialize.min.js" %}"></script>
  <script>
    M.AutoInit();
    M.Dropdown.init(
      document.querySelectorAll('.dropdown-trigger'),
      {"coverTrigger": false}
    )
    document.addEventListener('DOMContentLoaded', function() {
    M.Slider.init(document.querySelectorAll('.slider'), {});
    });
  </script>
  <script src="{% static "blog/chartjs/Chart.bundle.js"%}"></script>
</body>
</html>
