<head>
    {% load static %}
    <!-- Prism CSS -->
    <link href="{% static "tinymce/css/prism.css" %}" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <!-- Compiled and minified JavaScript -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<nav>
    <div class="nav-wrapper amber darken-3">
      <a href="#" class="brand-logo ">Jfs</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="about">Me</a></li>
        <li><a href="/">Home</a></li>
		 <li><a href="/admin/">ADMIN</a></li>
        {% if user.is_authenticated %}
             <li><a href="/profile">{{user.username|title}}</a></li>
             <li><a href="/logout">Logout</a></li>
        {% else %}
            <li><a href="/login">Login</a></li>
            <li><a href="/register">Register</a></li>
        {% endif %}
      </ul>
    </div>
	<div class="fixed-action-btn">
  <a class="btn-floating btn-large red">
    <i class="large material-icons">mode_edit</i>
  </a>
  <ul>
	<li><a href="{% url 'keller-list' %}" class="btn-floating red"><i class="material-icons">opacity</i></a></li>
    <li><a href="{% url 'chemie-video-list' %}" class="btn-floating red"><i class="material-icons">video_library</i></a></li>
    <li><a href="{% url 'chemie-gallery' %}" class="btn-floating yellow darken-1"><i class="material-icons">apps</i></a></li>
    <li><a href="{% url 'chemie-upload' %}" class="btn-floating green"><i class="material-icons">photo</i></a></li>
    <li><a href="{% url 'chemie-book-list' %}" class="btn-floating blue"><i class="material-icons">cloud_upload</i></a></li>
    <li><a href="http://www.endmemo.com/chem/" class="btn-floating red" target="_blank"><i class="material-icons">local_bar</i></a></li>
  </ul>
</div>
 </nav>
  {% if messages %}
        {% for message in messages %}
            {% if message.tags == 'success'%}
                <script>M.toast({html: "{{message}}", classes: 'green rounded', displayLength:2000});</script>
            {% elif message.tags == 'info'%}
                <script>M.toast({html: "{{message}}", classes: 'blue rounded', displayLength:2000});</script>
            {% elif message.tags == 'warning'%}
                <script>M.toast({html: "{{message}}", classes: 'orange rounded', displayLength:10000});</script>
            {% elif message.tags == 'error'%}
                <script>M.toast({html: "{{message}}", classes: 'red rounded', displayLength:10000});</script>
            {% endif %}
        {% endfor %}
  {% endif %}
  <div class="container">
	{% block content %}
	{% endblock %}
  </div>
</body>

<!-- Prism JS -->
<script src="{% static "tinymce/js/prism.js" %}"></script>
<script>M.AutoInit();</script>