{% load i18n %}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Password reset</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
  </head>
  <body class="has-navbar-fixed-top">
  <section class="section">
    <div class="container">

      <nav class="navbar is-fixed-top pl-2 pr-2" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
          <a class="navbar-item" href="https://github.com/byoso/django_silly_auth" target="_blank">
            <h1 class="title">Django Silly Auth</h1>
          </a>
          <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
          </a>
        </div>

        <div id="navbarBasicExample" class="navbar-menu">
          <div class="navbar-start">
            <a class="navbar-item" href="{% url 'classic_index' %}">
              {% translate 'Home' %}
            </a>

            {% if user.is_authenticated %}
            <a class="navbar-item" href="{% url 'classic_account' %}">
              {% translate 'Account' %}
            </a>
            {% endif%}

            <div class="navbar-item has-dropdown is-hoverable">
              <a class="navbar-link">
                {% translate 'More' %}
              </a>

              <div class="navbar-dropdown">
                <a class="navbar-item" href="https://github.com/byoso/django_silly_auth/wiki" target="_blank">
                  {% translate 'Documentation' %}
                </a>
                <a class="navbar-item" href="https://www.buymeacoffee.com/byoso" target="_blank">
                  {% translate 'Buy me a coffee' %}
                </a>
                <a class="navbar-item" href="mailto:mail@mail.com">
                  {% translate 'Contact' %}
                </a>
                <hr class="navbar-divider">
                <a class="navbar-item" href="https://github.com/byoso/django_silly_auth/issues" target="_blank">
                  {% translate 'Report an issue' %}
                </a>
              </div>

            </div>
          </div>

          <div class="navbar-end">
            <div class="navbar-item">
              <div class="buttons">
                {% if user.is_authenticated %}
                <a class="button is-warning" href="{% url 'classic_logout' %}">
                  {% translate 'Log out' %}
                </a>
                {% else %}
                <a class="button is-primary" href="{% url 'classic_signup' %}">
                  <strong>{% translate 'Sign up' %}</strong>
                </a>
                <a class="button is-light" href="{% url 'classic_login' %}">
                  {% translate 'Log in' %}
                </a>
                {% endif %}
              </div>
            </div>
          </div>

        </div>
      </nav>
      <nav>

        <a href="{% url 'try_templates_view' %}">  {% translate 'Single page' %}</a>
        <a href="{% url 'try_users_view' %}"> :: {% translate 'Users page' %}</a>

      </nav>

      {% if messages %}

        {% for message in messages %}
          <div class="notification is-{{ message.tags }}">
            <button class="delete"></button>
            {{ message }}
          </div>
        {% endfor %}

      {% endif %}


      {% block content %}



      {% endblock content %}

    </div>
  </section>
  </body>

<script>
// Bulma - notifications delete button
document.addEventListener('DOMContentLoaded', () => {
  (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
    const $notification = $delete.parentNode;
    $delete.addEventListener('click', () => {
      $notification.parentNode.removeChild($notification);
    });
  });
});

// Bulma - navbar burger
document.addEventListener('DOMContentLoaded', () => {
  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
  $navbarBurgers.forEach( el => {
    el.addEventListener('click', () => {
      const target = el.dataset.target;
      const $target = document.getElementById(target);
      el.classList.toggle('is-active');
      $target.classList.toggle('is-active');
    });
  });
});
</script>

</html>
