<!DOCTYPE html>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<html lang="en">
<head>
    {% block head %}
    <link rel="stylesheet" href="/static/css/style.css" />
    <link rel="icon" href="/static/tentacles.svg" type="image/svg+xml">
    <title>Tentacles{% block title %}{% endblock %}</title>
    {% endblock %}
</head>
<body>
  <nav class="container navbar">
    <span class="logo">
      <a class="row" href="/">
        <img src="/static/tentacles.svg" alt="Tentacles">
        <span class="name color-yellow">Tentacles</span>
      </a>
    </span>

    <input id="menu-toggle" type="checkbox" />
    <label class="menu-button-container" for="menu-toggle">
      <div class="menu-button">
      </div>
    </label>

    <ul class="menu container">
      {% if not ctx.uid %}
      <li><a class="twelve columns button slide" href="/user/login">Log in</a></li>
      <li><a class="twelve columns button slide" href="/user/register">Register</a></li>
      {% else %}
      <li><a class="twelve columns button slide" href="/">Overview</a></li>
      <li><a class="twelve columns button slide" href="/jobs">Jobs</a></li>
      <li><a class="twelve columns button slide" href="/files">Files</a></li>
      {% if ctx.is_admin %}
      <li><a class="twelve columns button slide" href="/admin">Administration</a></li>
      {% endif %}
      <li><a class="twelve columns button slide" href="/user">Settings</a></li>
      <li><a class="twelve columns button slide" href="/user/logout">Log out</a></li>
      {% endif %}
    </ul>
  </nav>
  </div>
  <div class="container content">
    {% with messages = get_flashed_messages(with_categories=True) %}
    {% if messages %}
    <div class="flashes">
      {% for category, message in messages %}
        <div class="alert {{ category }}">
          <input type="checkbox" id="alert{{ loop.index }}" />
          <label class="close" title="close" for="alert{{loop.index}}">
            <div class="timer">
              <div class="mask">
              </div>
            </div>
          </label>
          <center><p class="inner">{{ message }}</p></center>
        </div>
      {% endfor %}
    </div>
    {% endif %}
    {% endwith %}

    {% block content %}Oops, an empty page :/{% endblock %}
  </div>
  <div class="container footer">
    {% block footer %}
      &copy; Copyright 2023 by <a href="https://arrdem.com/">@arrdem</a>.
    {% endblock %}
  </div>
</body>
<footer>
  <script type="text/javascript">
    document.querySelectorAll('.alert input[type=checkbox]').forEach(($el) => {
      document.querySelectorAll(`.alert label[for=${$el.id}] .timer`).forEach(($it) => {
        $it.addEventListener("animationend", () => {
          $el.click();
        }, {once: true});
      });
    });
  </script>
</footer>
</html>
