{% load static %}
<html>
  <head>
    {% include "head.html" %}
  </head>
  <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
    <div class="window" id="main-window">
      <div class="title-bar main-title-bar">
        <div class="title-bar-text">
          {% block window-title %}{% endblock %}
        </div>
        <div class="title-bar-controls">
          <button aria-label="Minimize" onclick="resetWindow()"></button>
          <button aria-label="Restore" onclick="resetWindow()"></button>
          <form action="{% url 'oidc_logout' %}" method="post">
            {% csrf_token %}
            <button aria-label="Close" onclick="hideWindow()"></button>
          </form>
        </div>
      </div>
      <div class="window-body">
        <menu role="tablist" hx-boost="true" class="multirows">
          <li role="tab" {% if request.path == '/vote/' %}aria-selected="true" {% endif %}>
            <a href="{% url 'vote' %}">Stemmen</a>
          </li>
          <li role="tab" {% if request.path == '/track/' %}aria-selected="true" {% endif %}>
            <a href="{% url 'nominate' %}">Nomineren</a>
          </li>
          <li role="tab" {% if request.path == '/overview/' %}aria-selected="true" {% endif %}>
            <a href="{% url 'overview' %}">Overzicht</a>
          </li>
          <li role="tab" {% if request.path == '/settings/' %}aria-selected="true" {% endif %}>
            <a href="{% url 'settings' %}">Instellingen</a>
          </li>
        </menu>
        {% block multi-row %}{% endblock %}
        <div class="window" role="tabpanel">
          <div class="window-body">
            {% if message_type %}
              <script>
                function hidePopup() {
                  document.getElementById("info-window").classList.add("hide");
                }
              </script>
              <div class="window popup" id="info-window">
                <div class="title-bar">
                  <div class="title-bar-text">
                    {% if message_title %}{{message_title}}{% else %}{{message_type | title}}{% endif %}
                  </div>
                  <div class="title-bar-controls">
                      <button aria-label="Close" onclick="hidePopup()"></button>
                  </div>
                </div>
                <div class="window-body">
                  <div class="icon {{message_type}}"></div>
                  <div class="text">
                      <div>
                        {{message}}
                      </div>
                      <section class="field-row" style="justify-content: flex-end">
                          <button onclick="hidePopup()">Ok</button>
                      </section>
                  </div>
                </div>
              </div>
            {% endif %}
            {% block main-content %}{% endblock %}
          </div>
        </div>
      </div>
      {% block status-bar %}{% endblock%}
    </div>
    {% block clippy %}{% endblock %}
    <script>
      position.get_pos(); // Gets position from localStorage
      clippy = document.getElementById("clippy")
      window.addEventListener('load', function () {
        interact('.main-title-bar').draggable({
          listeners: {
            move (event) {
              position.x += event.dx
              position.y += event.dy
              event.target.parentElement.style.transform = `translate(${position.x}px, ${position.y}px)`
              if (clippy) document.getElementById("clippy").style.transform = `translate(${position.x}px, ${position.y}px)`
            },
          }
        })
      })


      function hideWindow() {
        document.getElementById("main-window").classList.add("hide");
      }

      function resetWindow() {
        position.reset()
        document.getElementById("main-window").style.transform = '';
        if (clippy) document.getElementById("clippy").style.transform = '';
      }
    </script>

  </body>
</html>
