{% load i18n %}

{% block html %}
  <div id="ilmoitukset-rivi">
    <div id="ilmoitukset"></div>
  </div>
{% endblock html %}

{% block css %}
  <style>
    #ilmoitukset-rivi {
      display: inline;
      z-index: 1000;
      position: absolute;
      left: 50%;
      bottom: -90px;
    }
    #ilmoitukset {
      display: inline-block;
      margin-left: -50%;
    }
    #ilmoitukset >div {
      float: left;
    }
  </style>
{% endblock css %}

{% block js %}
  <script>
    function nayta_ilmoitus(ilmoitus) {
      $("#ilmoitukset").append(
        $("<div/>", {
          class: ilmoitus.tags + " alert alert-dismissible",
          role: "alert",
        }).append(
          $("<button/>", {
            type: "button",
            class: "close",
            "data-dismiss": "alert",
            "aria-label": "{% trans "Sulje" %}"
          }).append(
            $("<span/>", {"aria-hidden": true, text: "⨉"})
          ),
          ilmoitus.message
        )
      );
    }

    {% comment %}
      Vastaanotetaan viestejä reaaliaikaisesti Websocket-yhteyden kautta,
      jos se on käytettävissä.
      Muuten haetaan yhdellä Ajax-pyynnöllä kaikki olemassaolevat viestit.
    {% endcomment %}

    {% if request.websocket %}
    var viestit = new WebSocket("{{ request.websocket }}{% url "ilmoitukset" %}");
    $.extend(viestit, {
      onmessage: function (e) {
        const ilmoitus = JSON.parse(e.data);
        nayta_ilmoitus(ilmoitus);
      }
    });

    {% else %}
    $.ajax({
      url: "{% url "ilmoitukset" %}",
      success: function (sanoma) {
        for (const ilmoitus of sanoma) {
          nayta_ilmoitus(ilmoitus);
        }
      }
    });
    {% endif %}
  </script>
{% endblock js %}