<!doctype html>
<html lang="en">
  <head>{% load static %}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% block stylesheet %}{% endblock stylesheet %}
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.css" integrity="sha384-WMgof6iSOcGGUSSHbZXThOpcZmVDpwSrc/X0L5IpeicPQn/qAkFwm5uwZZKx0SCS" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" integrity="sha384-tKLJeE1ALTUwtXlaGjJYM3sejfssWdAaWR2s97axw4xkiAdMzQjtOjgcyw0Y50KU" crossorigin="anonymous">
    <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;
        }
      }
    </style>
    {% if messages %}
		<script>
			$(document).ready(function() {
				{% for message in messages %}
					$.notify('{{ message }}',
						{
							type: '{{ message.tags }}',
							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"><!-- class="dark-mode"-->
    <main role="main" class="container">
			{% block content %}{% endblock content %}
		</main>
    <i class="bi bi-house-fill"></i>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" id="darkMode" checked>
      <label class="form-check-label" for="darkMode">Dark mode</label>
    </div>
    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.js" integrity="sha384-zlQmapo6noJSGz1A/oxylOFtN0k8EiXX45sOWv3x9f/RGYG0ECMxTbMao6+OLt2e" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.js" integrity="sha384-/DJx+Iu1blm34FpB0PqizFYVgJGpOh8hl3OWJLEKiqVMsLSW9cNjs9Y566t96ekj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.js" integrity="sha384-TwXPs96wsaE/FmWpxAx89Bmk0+jyVtezHCrozWgrsjzx2sxfoCy8DisIMEvoK1AG" crossorigin="anonymous"></script>
    -->
    <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){
            bg.classList.remove("bg-dark")
            bg.classList.remove("text-white")
          }else if(darkModeOn === false){
            bg.classList.add("bg-dark")
            bg.classList.add("text-white")
          }
      }
    </script>
  </body>
</html>
