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

{% block extrastyle %}
  {{ block.super }}
  <link rel="stylesheet" type="text/css" href="{% static "admin/css/dashboard.css" %}">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/rrweb-player@0.7.14/dist/style.css">
  <style>
   #player { font-family: sans-serif !important }
  </style>
{% endblock %}

{% block extrahead %}
  {{ block.super }}
  <script src="https://cdn.jsdelivr.net/npm/rrweb-player@0.7.14/dist/index.js"></script>
{% endblock %}

{% block coltype %}colMS{% endblock %}

{% block bodyclass %}{{ block.super }} dashboard{% endblock %}

{% block breadcrumbs %}
  <div class="breadcrumbs">
    <a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
    &rsaquo; <a href="{% url 'admin:app_list' 'django_rrweb' %}">Django_Rrweb</a>
    &rsaquo; <a href="{% url 'admin:django_rrweb_session_changelist' %}">Sessions</a>
    &rsaquo; <a href="{% url 'admin:django_rrweb_session_change' session.id %}">{{ session }}</a>
    &rsaquo; Replay
  </div>
{% endblock %}

{% block content %}
  <div id="content-main">
    <div id="player"></div>
    <script>
     const events = [
         {% for event in events %}
         {
             'type': {{ event.kind }},
             'data': {{ event.data|safe }},
             'timestamp': {{ event.timestamp }},
         },
         {% endfor %}
     ];
     let divPlayer = document.getElementById("player");
     let player = new rrwebPlayer({
         target: divPlayer,
         props: {
             events,
         },
     });
    </script>
  </div>
{% endblock %}