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

{% block extrastyle %}
  {{ block.super }}
  {% if request|should_load_notifications_widget %}
    <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' %}" />
  {% endif %}
{% endblock extrastyle %}

{% block extrahead %}
  {{ block.super }}
  {% if request|should_load_notifications_widget and 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 }}
  {% if request|should_load_notifications_widget %}
    <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>
        <a class="toggle-btn" href="{% url 'notifications:notification_preference' %}">
          {% trans 'Notification Preferences' %}
        </a>
      </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>
  {% endif %}
{% endblock  %}

{% block footer %}
  {{ block.super }}
  {% if request|should_load_notifications_widget %}
    <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>
    <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 %}