{% extends 'netbox_geoview/base.html' %}
{% load helpers %}
{% load i18n %}

{% block content %}
  {{ map_config|json_script:"geoview-map-config" }}
  {% if active_tab == 'map' and active_filter_badges %}
    <div class="mb-3">
      {% for badge in active_filter_badges %}
        <span class="badge rounded-pill text-bg-primary text-decoration-none me-1">
          <i class="mdi mdi-close"></i> {{ badge }}
        </span>
      {% endfor %}
      {% if save_filter_url %}
        <a href="{{ save_filter_url }}" class="badge rounded-pill text-bg-success text-decoration-none me-1">
          <i class="mdi mdi-content-save"></i> {% trans "Save" %}
        </a>
      {% endif %}
    </div>
  {% endif %}
  <div class="tab-pane geoview-viewport{% if active_tab == 'map' %} show active{% endif %}" id="map-panel" role="tabpanel" aria-labelledby="map-tab">
    <div class="alert alert-warning d-none mb-3" data-geoview-static-warning role="alert"></div>
    <div
      class="geoview-map-layout geoview-map-layout--panel-hidden"
      data-geoview-route-panel
      data-label-not-set="{% trans 'Not set' %}"
      data-label-start="{% trans 'Start' %}"
      data-label-end="{% trans 'Destination' %}"
      data-label-calculate-route="{% trans 'Calculate route' %}"
      data-label-clear-route="{% trans 'Clear' %}"
      data-label-calculating-route="{% trans 'Calculating route...' %}"
      data-label-route-error="{% trans 'Route could not be calculated.' %}"
      data-label-no-route="{% trans 'No route calculated yet.' %}"
      data-label-distance="{% trans 'Distance' %}"
      data-label-duration="{% trans 'Duration' %}"
      data-label-mode="{% trans 'Mode' %}"
      data-label-alternative="{% trans 'Alternative' %}"
      data-label-collapse-route-panel="{% trans 'Collapse route panel' %}"
      data-label-expand-route-panel="{% trans 'Expand route panel' %}"
      data-label-calculate-distance="{% trans 'Calculate distance' %}"
      data-label-direct-distance="{% trans 'Direct distance' %}"
      data-label-measure-not-set="{% trans 'No distance measured yet.' %}"
    >
      <aside class="geoview-route-panel is-hidden" data-route-panel>
        <div class="geoview-route-panel__head">
          <h3 class="geoview-route-panel__title">{% trans "Route planner" %}</h3>
          <button type="button" class="btn btn-sm btn-ghost-secondary geoview-route-panel__toggle" data-route-toggle aria-expanded="true" aria-label="{% trans 'Collapse route panel' %}">
            <i class="mdi mdi-chevron-left" aria-hidden="true"></i>
          </button>
        </div>
        <div class="geoview-route-panel__content">
          <div class="geoview-route-panel__row">
            <div class="geoview-route-panel__label">{% trans "Profile" %}</div>
            <select class="form-select form-select-sm geoview-route-panel__select" data-route-costing>
              {% for profile in routing_profiles %}
                <option value="{{ profile.value }}"{% if profile.value == routing_default_profile %} selected{% endif %}>{{ profile.label }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="geoview-route-panel__row">
            <div class="geoview-route-panel__label">{% trans "Start" %}</div>
            <div class="geoview-route-panel__value" data-route-start>{% trans "Not set" %}</div>
          </div>
          <div class="geoview-route-panel__row">
            <div class="geoview-route-panel__label">{% trans "Destination" %}</div>
            <div class="geoview-route-panel__value" data-route-end>{% trans "Not set" %}</div>
          </div>
          <div class="geoview-route-panel__actions">
            <button type="button" class="btn btn-primary btn-sm" data-route-open disabled>{% trans "Calculate route" %}</button>
            <button type="button" class="btn btn-outline-success btn-sm" data-route-distance disabled>{% trans "Calculate distance" %}</button>
            <button type="button" class="btn btn-outline-secondary btn-sm" data-route-clear>{% trans "Clear" %}</button>
          </div>
          <div class="geoview-route-panel__error alert alert-warning d-none" data-route-error></div>
          <div class="geoview-route-panel__summary" data-route-summary>{% trans "No route calculated yet." %}</div>
          <div class="geoview-route-panel__summary" data-measure-summary>{% trans "No distance measured yet." %}</div>
          <div class="geoview-route-panel__alternatives" data-route-alternatives></div>
          <div class="geoview-route-panel__hint text-secondary">{% trans "Set start and destination using marker popup actions." %}</div>
        </div>
      </aside>
      <div
        class="geoview-map geoview-map--fullscreen"
        data-geoview-map
        data-config-id="geoview-map-config"
      ></div>
    </div>
  </div>
  <div class="tab-pane{% if active_tab == 'filter' %} show active{% endif %}" id="filter-panel" role="tabpanel" aria-labelledby="filter-tab">
    {% include 'netbox_geoview/filter.html' %}
  </div>
  <script>
    (function () {
      document.addEventListener('DOMContentLoaded', function () {
        window.setTimeout(function () {
          var warning = document.querySelector('[data-geoview-static-warning]');
          var mapElement = document.querySelector('[data-geoview-map]');

          if (!warning || !mapElement || mapElement.dataset.geoviewRendered === '1') {
            return;
          }

          var message = '{% trans "Geo-View map could not be initialized. Please verify collectstatic output, static file permissions, and browser console errors." %}';
          if (!window.L || mapElement.dataset.geoviewRenderReason === 'leaflet-missing') {
            message = '{% trans "Geo-View map assets (Leaflet) are missing. Please run collectstatic and verify static file permissions for netbox_geoview." %}';
          }

          warning.textContent = message;
          warning.classList.remove('d-none');
        }, 1200);
      });
    }());
  </script>
{% endblock content %}