{% load static %}
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Gulashromstore :: {% block title %}{% endblock %}</title>
		<link rel="stylesheet" type="text/css" href="{% static "css/gulash_bulma.css" %}">
		<link rel="stylesheet" type="text/css" href="{% static "fontawsome/css/font-awesome.min.css" %}">

		<script src="{% static "jquery-3.2.1.slim.min.js" %}"></script>
	</head>

	<body>
		<nav class="nav has-shadow">
			<div class="container">
				<div class="nav-left">
					<a class="nav-item">
						<img src="{% static "images/logo.png" %}"/>
					</a>
					<a class="nav-item is-tab is-hidden-mobile is-active">Roms</a>
					<a class="nav-item is-tab is-hidden-mobile">Upload Rom</a>
				</div>
				<span class="nav-toggle">
					<span></span>
				<span></span>
				<span></span>
				</span>

				<div class="nav-right nav-menu">
					<a class="nav-item is-tab is-hidden-tablet is-active">Roms</a>
					<a class="nav-item is-tab is-hidden-tablet">Rom Hochladen</a>

					<a class="nav-item is-tab">Registrieren</a>
					<a class="nav-item is-tab">
						Einstellungen
					</a>
					<a class="nav-item is-tab">Login</a>
				</div>
			</div>
		</nav>

        {% block content %}

        {% endblock %}

        <footer class="footer">
            <div class="container">
                <div class="content has-text-centered">
                    <strong>Gulasch R0MSTØRE</strong> by Sebastian 2017
                </div>
            </div>
        </footer>

        <script type="text/javascript">
            $('.nav-toggle').on('click', function(event) {
                $('.nav-toggle').toggleClass('is-active');
                $('.nav-menu').toggleClass('is-active');
            });
        </script>
    </body>
</html>
