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

{% block title %}Live attack map · HoneyDjango{% endblock %}
{% block heading %}Live Attack Map{% endblock %}

{% block content %}
  {% include "dashboard/partials/_stats.html" %}

  {% comment %}
  The map is a self-contained JS island: all logic lives in map.js, which reads
  its config from these data-* attributes (URLs reversed by Django) rather than
  from inlined script. Re-skinning this page never touches the map logic.
  The flex-1 + min-h-0 wrapper gives Leaflet a deterministic height; map.js
  calls invalidateSize once layout settles and on every resize.
  {% endcomment %}
  <div
    id="attack-map"
    class="min-h-[400px] flex-1 overflow-hidden rounded-lg border border-slate-800"
    data-map-data-url="{% url 'dashboard:map_data' %}"
    data-ws-path="/ws/events/"
  ></div>

  {% include "dashboard/partials/_event_table.html" %}
{% endblock %}

{% block body_scripts %}
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <script src="{% static 'dashboard/map.js' %}" defer></script>
  <script src="{% static 'dashboard/event_table.js' %}" defer></script>
{% endblock %}