{% extends "admin/base_site.html" %}
{% load i18n static notification_tags %}

{% block extrastyle %}
  {{ block.super }}
  <link rel="stylesheet" type="text/css" href="{% static 'openwisp-notifications/css/loader.css' %}" />
  <link rel="stylesheet" type="text/css" href="{% static 'openwisp-notifications/css/notifications.css' %}" />
{% endblock extrastyle %}

{% block extrahead %}
  {{ block.super }}
  {% if not media.js and 'jquery' not in block.super %}
    <script src="{% static 'admin/js/vendor/jquery/jquery.min.js' %}"></script>
    <script src="{% static 'admin/js/jquery.init.js' %}"></script>
  {% endif %}
{% endblock %}

{% block user-tools %}
  {{ block.super }}
  <button class="ow-notifications toggle-btn" id="openwisp_notifications">
    <span id="ow-notification-btn"></span>
    {% unread_notifications %}
  </button>
  {% csrf_token %}
  <div class="ow-notification-toast-wrapper"></div>
  <div class="ow-notification-dropdown ow-hide">
    <div class="filters">
      <span class="toggle-btn" id="ow-mark-all-read" tabindex="0" role="button">{% trans 'Mark all as read' %}</span>
      <span class="toggle-btn" id="ow-show-unread" tabindex="0" role="button">{% trans 'Show unread only' %}</span>
    </div>
    <div class="ow-notification-wrapper ow-round-bottom-border">
      <div id="ow-notifications-loader" class="ow-hide"><div class="loader"></div></div>
    </div>
    <div class="ow-no-notifications ow-round-bottom-border ow-hide">
        <p>{% trans 'No new notification.' %}</p>
    </div>
  </div>
{% endblock  %}

{% block footer %}
  <div class="ow-overlay ow-overlay-notification ow-overlay-inner ow-hide">
      <div class="ow-dialog-notification">
          <span class="ow-dialog-close ow-dialog-close-x">&times;</span>
          <div class="ow-notification-level-wrapper ow-dialog-notification-level-wrapper"></div>
          <h2 class="ow-message-title"></h2>
          <div class="ow-message-description"></div>
          <div class="ow-dialog-buttons">
            <button class="ow-message-target-redirect ow-hide button default success-btn">
              {% trans 'Open' %}
            </button>
            <button class="ow-dialog-close button default">
              {% trans 'Close' %}
            </button>
          </div>
      </div>
  </div>
  {{ block.super }}
  {% if request.user.is_authenticated %}
    <script type="text/javascript" src="{% static 'openwisp-notifications/js/vendor/reconnecting-websocket.min.js' %}"></script>
    <script type="text/javascript">
      {% if OPENWISP_NOTIFICATIONS_HOST %}
        const notificationApiHost = new URL('{{ OPENWISP_NOTIFICATIONS_HOST }}');
      {% else %}
        const notificationApiHost = window.location;
      {% endif %}
      const webSocketProtocol = notificationApiHost.protocol === 'http:' ? 'ws' : 'wss';
      const notificationSound = new Audio('{{ OPENWISP_NOTIFICATIONS_SOUND | default:"" }}');
      // Create websocket connection
      const notificationSocket = new ReconnectingWebSocket(
          `${webSocketProtocol}://${notificationApiHost.host}/ws/notification/`,
          null, {
              debug: false,
              // The library re-connects if it fails to establish a connection in "timeoutInterval".
              // On slow internet connections, the default value of "timeoutInterval" will
              // keep terminating and re-establishing the connection.
              timeoutInterval: 7000,
          }
      );
    </script>
    <script type="text/javascript" src="{% static 'openwisp-notifications/js/notifications.js' %}"></script>
  {% endif %}
{% endblock footer %}