<!doctype html>
<html>
	<head>{% load static %}
		{% block stylesheet %}{% endblock stylesheet %}
		<link rel="stylesheet" href="{% static 'css/navbar-static-top.css' %}">
		<link rel="stylesheet" href="{% static 'css/navbar-top.css' %}">
		<link rel="stylesheet" href='{% static "css/bootstrap.css" %}' type="text/css"/>
		<link rel="stylesheet" href='{% static "css/bootstrap-icons.css" %}' type="text/css"/>
		<link rel="stylesheet" href='{% static "css/all.css" %}' type="text/css"/>
		<link rel="stylesheet" href='{% static "css/animate.css" %}' type="text/css"/>
		<link rel="shortcut icon" href="{% static 'images/favicon.ico' type='image/x-icon' %}">
		<style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
			::-webkit-scrollbar {
				width: 1px;
			}

			[data-notify="progressbar"]
			{
				margin-bottom: 0px;
				position: absolute;
				bottom: 0px;
				left: 0px;
				width: 100%;
				height: 5px;
			}
    </style>
		{% block javascript %}{% endblock javascript %}
		<script type="text/javascript" src='{% static "javascript/jquery.js" %}'></script>
    <script type="text/javascript" src='{% static "javascript/bootstrap.js" %}'></script>
    <script type="text/javascript" src='{% static "javascript/bootstrap-notify.js" %}'></script>
		{% if messages %}
		<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
		  <symbol id="success" fill="currentColor" viewBox="0 0 16 16">
		    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
		  </symbol>
		  <symbol id="primary" fill="currentColor" viewBox="0 0 16 16">
		    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
		  </symbol>
		  <symbol id="info" fill="currentColor" viewBox="0 0 16 16">
		    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
		  </symbol>
		  <symbol id="warning" fill="currentColor" viewBox="0 0 16 16">
		    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
		  </symbol>
		</svg>
		<script>
			$(document).ready(function() {
				{% for message in messages %}
					$.notify('{{ message }}',
						{
							type: '{{ message.tags }}',
							showProgressbar: true,
							placement: {
								from: "top",
								align: "center"
							},
							delay: 5000,
							animate: {
								enter: "animate__animated animate__flipInX",
								exit: "animate__animated animate__fadeOutUp"
							},
						});
				{% endfor %}
			});
		</script>
		{% endif %}
		<title>{% block title %}eSpace{% endblock title %}</title>
	</head>
	<body class="text-white bg-dark" id="bgTag" {% block bodyTag %}{% endblock bodyTag %}>
		{% block javascriptEnd %}{% endblock javascriptEnd %}
		{% include 'navbar.html' %}
    <main role="main" class="container">
			{% block content %}{% endblock content %}
		</main>
		<script type="text/javascript">
      const btn = document.querySelector('#darkMode')
      const bg = document.querySelector('#bgTag')
      btn.onclick = () => {
          darkModeOn = bg.classList.contains("bg-dark")
          if(darkModeOn === true){
						btn.classList.remove("bi-lightbulb-off")
						btn.classList.add("bi-lightbulb")
            bg.classList.remove("bg-dark")
            bg.classList.remove("text-white")
          }else if(darkModeOn === false){
						btn.classList.remove("bi-lightbulb")
						btn.classList.add("bi-lightbulb-off")
            bg.classList.add("bg-dark")
            bg.classList.add("text-white")
          }
      }
    </script>
	</body>
</html>
