
{% extends 'generic/object.html' %}
{% load render_table from django_tables2 %}
{% load static %}


{% block head %}
<meta charset="UTF-8">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🗺️</text></svg>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css" rel="stylesheet" />
<link rel="stylesheet" href="{% static 'netbox_sitemap/styles.css' %}">
{% endblock head %}

{% block content %}

<!--- start js vars -->
<input type="hidden" id="obj_id" value="{{ object.id }}">
<input type="hidden" id="obj" value="{{ object }}">
<!--- end js vars -->

  <div class="row mb-3">
    <div class="col col-md-12">
      <div class="card">
        <h5 class="card-header">NetBox Sitemap Plugin</h5>
          <table class="table table-hover attr-table">
            <tr>
              <th scope="row">Name</th>
              <td>{{ object.name }}</td>
            </tr>
          </table>
      </div>
      <div class="card">
        <h5 class="card-header">Map</h5>
        <div class="card-body" id="content-container">
          <div id="map"></div>
          <script type="module" src="{% static 'netbox_sitemap/app.js' %}"></script>
        </div>
      </div>
      <div class="card">
        <h5 class="card-header">Tests</h5>
        <div class="card-body" id="content-container">
          <div id="tests-card"></div>
          <script type="module" src="{% static 'netbox_sitemap/app.js' %}"></script>
        </div>
      </div>
    </div>
  </div>
{% endblock content %}