{% load static %}
<section
    id="id_applet_my_sky"
    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
>
    <h2><a href="{% url 'sky' %}">My Sky</a></h2>
    {% if request.user.sky_chart_data %}
    <svg id="id_my_sky_svg" class="natus-svg"></svg>
    {{ request.user.sky_chart_data|json_script:"id_my_sky_data" }}
    {% endif %}
</section>

{% if request.user.sky_chart_data %}
<div id="id_natus_tooltip" class="tt" style="display:none;"></div>
<script src="{% static 'apps/gameboard/d3.min.js' %}"></script>
<script src="{% static 'apps/gameboard/natus-wheel.js' %}"></script>
<script>
(function () {
  'use strict';
  const data  = JSON.parse(document.getElementById('id_my_sky_data').textContent);
  const svgEl = document.getElementById('id_my_sky_svg');
  NatusWheel.preload().then(function () { NatusWheel.draw(svgEl, data); });
})();
</script>
{% endif %}