{% extends 'base/layout.html' %}
{% load static %}
{% load i18n %}

{% block title %}{% trans "Site Map" %}{% endblock %}

{% block header %}
  <h1><span class="mdi mdi-map-marker-multiple-outline"></span> {% trans "Site Map" %}</h1>
{% endblock %}

{% block head %}
  <link rel="stylesheet" href="{% static 'netbox_map/css/leaflet-1.9.4.min.css' %}">
  <link rel="stylesheet" href="{% static 'netbox_map/css/floorplan.css' %}">
  <link rel="stylesheet" href="{% static 'netbox_map/css/site_map.css' %}">
{% endblock %}

{% block content %}
{# Combined header bar: edit toggle + toolbar controls #}
<div class="site-map-header mb-3">
  {% if can_edit %}
  <button class="btn btn-sm btn-outline-warning" id="edit-mode-btn">
    <i class="mdi mdi-pencil-lock-outline"></i> {% trans "Edit Mode" %}
  </button>
  <div class="toolbar-divider"></div>
  <div id="site-map-toolbar-controls" class="d-none d-flex align-items-center gap-2 flex-wrap">
    <div class="toolbar-group">
      <label class="toolbar-label">{% trans "Place Existing" %}</label>
      <select id="unplaced-sites-select" class="form-select form-select-sm">
        <option value="">{% trans "Site..." %}</option>
      </select>
      <button class="btn btn-sm btn-primary" id="place-site-btn" disabled>
        <i class="mdi mdi-map-marker-plus"></i> {% trans "Place" %}
      </button>
      <select id="unplaced-locations-select" class="form-select form-select-sm">
        <option value="">{% trans "Location..." %}</option>
      </select>
      <button class="btn btn-sm btn-outline-primary" id="place-location-btn" disabled>
        <i class="mdi mdi-map-marker-outline"></i> {% trans "Place" %}
      </button>
      <select id="unplaced-tiles-select" class="form-select form-select-sm">
        <option value="">{% trans "Tile..." %}</option>
      </select>
      <button class="btn btn-sm btn-outline-secondary" id="place-tile-btn" disabled>
        <i class="mdi mdi-crosshairs-gps"></i> {% trans "Place" %}
      </button>
    </div>
    <div class="toolbar-divider"></div>
    <div class="toolbar-group">
      <button class="btn btn-sm btn-outline-info" id="draw-cable-btn">
        <i class="mdi mdi-vector-polyline"></i> {% trans "Draw Cable" %}
      </button>
    </div>
    <div class="toolbar-divider"></div>
    <div class="toolbar-group">
      <label class="toolbar-label">{% trans "New Marker" %}</label>
      <select id="new-marker-type" class="form-select form-select-sm">
        {% for tc in type_configs %}
        <option value="{{ tc.slug }}">{{ tc.name }}</option>
        {% endfor %}
      </select>
      <input type="text" id="new-marker-label" class="form-control form-control-sm" placeholder="{% trans 'Label...' %}">
      <button class="btn btn-sm btn-success" id="add-marker-btn">
        <i class="mdi mdi-plus"></i> {% trans "Add Marker" %}
      </button>
    </div>
    <div class="site-map-toolbar-status ms-auto">
      <span id="placement-status" class="text-muted small"></span>
      <button id="cancel-placement-btn" class="btn btn-sm btn-outline-danger d-none">{% trans "Cancel" %}</button>
    </div>
  </div>
  {% endif %}
</div>

<div class="site-map-layout">
  <div id="site-map-container"
       class="site-map-container"
       data-placed-sites='{{ placed_sites_json }}'
       data-unplaced-sites='{{ unplaced_sites_json }}'
       data-locations='{{ locations_json }}'
       data-unplaced-locations='{{ unplaced_locations_json }}'
       data-tiles='{{ tiles_json }}'
       data-unplaced-tiles='{{ unplaced_tiles_json }}'
       data-markers='{{ markers_json }}'
       data-cable-paths='{{ cable_paths_json }}'
       data-type-configs='{{ type_configs_json }}'
       data-csrf-token="{{ csrf_token }}"
       data-can-edit="{{ can_edit|yesno:'true,false' }}"
       data-site-api-url="/api/dcim/sites/"
       data-loc-coords-api-url="{% url 'plugins-api:netbox_map-api:locationcoordinates-list' %}"
       data-tile-api-url="{% url 'plugins-api:netbox_map-api:floorplantile-list' %}"
       data-marker-api-url="{% url 'plugins-api:netbox_map-api:mapmarker-list' %}"
       data-cable-api-url="{% url 'plugins-api:netbox_map-api:cablepath-list' %}"
       data-cable-split-base-url="/plugins/map/cable-paths/"
       data-detail-base-url="/plugins/map/marker-detail/"
       {% if focus_lat %}data-focus-lat="{{ focus_lat }}" data-focus-lng="{{ focus_lng }}"{% endif %}>
  </div>

  <div class="site-map-sidebar" id="site-map-sidebar">
    <div class="sidebar-tiles-section">
      <div class="sidebar-header">
        <div class="sidebar-search-wrap">
          <i class="mdi mdi-magnify"></i>
          <input type="text" id="sidebar-search" class="form-control form-control-sm" placeholder="{% trans 'Search markers...' %}">
        </div>
      </div>
      <div class="sidebar-toggles" id="sidebar-toggles"></div>
      <div class="sidebar-filter-row">
        <span id="sidebar-count" class="text-muted" style="font-size:11px"></span>
      </div>
      <div class="sidebar-tile-list" id="sidebar-list"></div>
    </div>
    <div class="sidebar-context-section" id="sidebar-detail">
      <div class="sidebar-empty-state">
        <i class="mdi mdi-cursor-default-click-outline"></i>
        <span>{% trans "Click a marker to see details" %}</span>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block javascript %}
  <script src="{% static 'netbox_map/js/leaflet-1.9.4.min.js' %}"></script>
  <script src="{% static 'netbox_map/js/site_map.js' %}"></script>
{% endblock %}