{% extends "base.html" %}
{% load static %}

{% block head_extra %}
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/js/fontawesome.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/gh/centrifugal/centrifuge-js@2.8.4/dist/centrifuge.min.js"></script>
<script src="https://unpkg.com/alpinejs@3.2.1/dist/cdn.min.js" defer></script>
<link rel="stylesheet" href="{% static 'mqueue/mqueue.css' %}">
<style>
  .p-3 {
    padding: 0.75rem;
  }

  .space-y-3 {
    margin-top: 0.75rem;
  }

</style>
{% endblock %}

{% block content %}
<div class="p-3 space-y-3">
  {% include "mqueue/livefeed/messages.html" %}
</div>
{% endblock %}

{% block endbody %}
<script src="{% static 'instant/index.js' %}"></script>
<script src="{% static 'mqueue/livefeed/store.js' %}"></script>
<script>
  $instant.init(
    "http://localhost:8000", // Django backend's address
    "ws://localhost:8427", // Centrifugo server's address
    true, // verbosity (optional, default: false)
  );
  $instant.get_token().then(() => $instant.connect());
  var $livefeed;
  // init the store
  document.addEventListener('alpine:init', () => {
    $livefeed = livefeed();
    $livefeed.init();
  });
</script>
{% endblock %}