{% extends 'generic/_base.html' %}
{% load helpers %}
{% load i18n %}
{% load static %}

{% block title %}{% trans "Geo-View" %}{% endblock title %}

{% block subtitle %}
  <div class="text-secondary">{% trans "Geospatial view with map and filter tabs" %}</div>
{% endblock subtitle %}

{% block tabs %}
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link{% if active_tab == 'map' %} active{% endif %}" id="map-tab" data-bs-toggle="tab" data-bs-target="#map-panel" type="button" role="tab" aria-controls="map-panel" aria-selected="{% if active_tab == 'map' %}true{% else %}false{% endif %}">
        {% trans "Map" %}
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link{% if active_tab == 'filter' %} active{% endif %}" id="filter-tab" data-bs-toggle="tab" data-bs-target="#filter-panel" type="button" role="tab" aria-controls="filter-panel" aria-selected="{% if active_tab == 'filter' %}true{% else %}false{% endif %}">
        {% trans "Filter" %}
        {% if active_filter_count %}
          {% badge active_filter_count bg_color="primary" %}
        {% endif %}
      </button>
    </li>
  </ul>
{% endblock tabs %}

{% block head %}
  {{ block.super }}
  <link rel="stylesheet" href="{% static 'netbox_geoview/vendor/leaflet/leaflet.css' %}">
  <link rel="stylesheet" href="{% static 'netbox_geoview/geoview.css' %}?v={{ asset_version }}">
{% endblock head %}

{% block javascript %}
  {{ block.super }}
  <script src="{% static 'netbox_geoview/vendor/leaflet/leaflet.js' %}"></script>
  <script src="{% static 'netbox_geoview/geoview.js' %}?v={{ asset_version }}"></script>
{% endblock javascript %}