{% load static bulma_utils i18n %}

<!DOCTYPE html>
<html>

<head>
  <title>Kadenios</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  {# CSS #}
  <link rel="stylesheet" href="{% static 'css/main.css' %}">
  <link rel="stylesheet" href="{% static 'vendor/font-awesome/css/font-awesome.min.css' %}">
  <link rel="stylesheet" href="{% static 'vendor/font-awesome/css/solid.min.css' %}">

  {# Javascript #}
  <script src="{% static 'vendor/jquery/jquery-3.5.1.min.js' %}"></script>
  {# <script src="{% static 'elections/js/main.js' %}"></script> #}

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      // Delete notifications
      (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
        var $notification = $delete.parentNode;

        $delete.addEventListener('click', () => {
          $notification.parentNode.removeChild($notification);
        });
      });

      // Interact with dropdowns
      var $dropdowns = document.querySelectorAll('.dropdown:not(.is-hoverable)') || [];

      $dropdowns.forEach(($dropdown) => {
        $dropdown.addEventListener('click', (event) => {
          event.stopPropagation();
          $dropdown.classList.toggle('is-active');
        });
      });

      document.addEventListener('click', () => {
        $dropdowns.forEach(($dropdown) => {
          $dropdown.classList.remove('is-active');
        });
      });

      document.addEventListener('keydown', (event) => {
        var e = event || window.event;
        if (e.keyCode === 27) {
          $dropdowns.forEach(($dropdown) => {
            $dropdown.classList.remove('is-active');
          });
        }
      });
    });

  </script>

  {% block extra_head %}{% endblock extra_head %}
</head>

<body>
  <nav class="level has-background-primary">
    <div class="level-left px-4">
      <div class="level-item">
        <a href="{% url "kadenios" %}">
          <h1 class="has-text-primary-light is-size-1 is-family-secondary">Kadenios</h1>
        </a>
      </div>

      <div class="level-item px-4">
        <a href="{% url "election.list" %}">
          <h3 class="has-text-primary-light has-text-weight-semibold is-size-3">{% trans "Élections" %}</h3>
        </a>
      </div>
    </div>

    {% block auth %}
    <div class="level-right px-5">
      {% if user.is_authenticated %}
      <div class="level is-mobile">
        <div class="level-item mr-5">
          <div class="tag">
            {% blocktrans with name=user.get_username connection=user.connection_method %}Connecté·e en tant que {{ name }} par {{ connection }}{% endblocktrans %}
          </div>
        </div>

        <div class="level-item ml-3 py-4">
          <a class="icon is-size-1 has-text-white" href="{% url 'authens:logout' %}?next={% if view.get_next_url %}{{ view.get_next_url }}{% else %}/{% endif %}">
            <i class="fas fa-sign-out-alt"></i>
          </a>
        </div>
      </div>
      {% else %}

      <div class="level-item py-2">
        <a class="tag has-text-primary is-size-5" href="{% url 'authens:login' %}?next={{ request.path }}">
          <span>{% trans "Se connecter" %}</span>
          <span class="icon">
            <i class="fas fa-sign-in-alt"></i>
          </span>
        </a>
      </div>
      {% endif %}
    </div>
    {% endblock %}
  </nav>
  {% block layout %}
  <div class="main-content">
    <div class="columns is-centered">
      <div class="column is-two-thirds-fullhd is-12-desktop is-12-widescreen">
        <section class="section pt-3">

          {% if messages %}
          {% for message in messages %}
          <div class="notification is-{{ message.level_tag|bulma_message_tag }} is-light">
            {% if 'safe' in message.tags %}
            {{ message|safe }}
            {% else %}
            {{ message }}
            {% endif %}
            <button class="delete"></button>
          </div>
          {% endfor %}
          {% endif %}

          <div class="box">
            {% block content %}
            {% endblock content %}
          </div>
        </section>
      </div>
    </div>
  </div>
  {% endblock layout %}
  <footer class="footer">
    <p class="has-text-centered">
      {% blocktrans %}Développé par <a class="tag is-light is-danger" href="https://www.eleves.ens.fr/kde">KDEns</a>. En cas de pépin, contacter <span class="tag is-info is-light">klub-dev [at] ens [dot] fr</span>.{% endblocktrans %}
    </p>
  </footer>
</body>

</html>
