{% 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 %}
{# Site filter bar (#26) #}
<div class="site-map-filter-bar mb-2">
  <form method="get" action="">
    <div class="d-flex align-items-center gap-2 flex-wrap">
      <button class="btn btn-sm {% if active_filters %}btn-primary{% else %}btn-outline-secondary{% endif %}"
              type="button" data-bs-toggle="collapse" data-bs-target="#site-filter-collapse">
        <i class="mdi mdi-filter-outline"></i> {% trans "Filter Sites" %}
        {% if active_filters %}<span class="badge bg-white text-primary ms-1">ON</span>{% endif %}
      </button>
      {% if active_filters %}
      <a href="?" class="btn btn-sm btn-outline-danger"><i class="mdi mdi-close"></i> {% trans "Clear" %}</a>
      {% endif %}
    </div>
    <div class="collapse {% if active_filters %}show{% endif %} mt-2" id="site-filter-collapse">
      <div class="card card-body py-2 px-3" style="max-width:800px;">
        <div class="row g-3">
          <div class="col-12">
            <label class="form-label fw-semibold mb-1">{% trans "Status" %}</label>
            <div class="d-flex flex-wrap gap-2">
              {% for value, label in filter_form.fields.status.choices %}
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" name="status" value="{{ value }}"
                       id="filter-status-{{ value }}"
                       {% if value in active_statuses %}checked{% endif %}>
                <label class="form-check-label" for="filter-status-{{ value }}">{{ label }}</label>
              </div>
              {% endfor %}
            </div>
          </div>
          <div class="col-md-4">
            <label class="form-label fw-semibold mb-1">{% trans "Region" %}</label>
            {{ filter_form.region_id }}
          </div>
          <div class="col-md-4">
            <label class="form-label fw-semibold mb-1">{% trans "Site Group" %}</label>
            {{ filter_form.group_id }}
          </div>
          <div class="col-md-4">
            <label class="form-label fw-semibold mb-1">{% trans "Tenant" %}</label>
            {{ filter_form.tenant_id }}
          </div>
          <div class="col-md-4">
            <label class="form-label fw-semibold mb-1">{% trans "Device Role" %}</label>
            {{ filter_form.device_role_id }}
            <div class="form-text">{% trans "Sites with devices of these roles" %}</div>
          </div>
        </div>
        <div class="d-flex gap-2 mt-3">
          <button type="submit" class="btn btn-sm btn-primary">{% trans "Apply" %}</button>
          <a href="?" class="btn btn-sm btn-outline-secondary">{% trans "Reset" %}</a>
        </div>
      </div>
    </div>
  </form>
</div>

{# Toolbar: edit toggle + controls #}
<div class="site-map-header mb-3">
  {% if can_edit %}
  <div class="toolbar-top-row">
    <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="site-map-toolbar-status">
      <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>
  <div id="site-map-toolbar-controls" class="toolbar-controls d-none">
    <div class="toolbar-card">
      <div class="toolbar-card-label">{% trans "Place on Map" %}</div>
      <div class="toolbar-card-body">
        <div class="chip-tray" id="chip-tray-place">
          <span class="chip-tray-empty text-muted small">{% trans "All items placed" %}</span>
        </div>
        <div class="tile-place-row" id="tile-place-row">
          <input type="text" id="tile-search-input" class="form-control form-control-sm" placeholder="{% trans 'Search tiles...' %}" autocomplete="off">
          <div class="tile-search-results" id="tile-search-results"></div>
        </div>
      </div>
    </div>
    <div class="toolbar-card">
      <div class="toolbar-card-label">{% trans "Create" %}</div>
      <div class="toolbar-card-body toolbar-create-body">
        <div class="chip-tray chip-tray--create" id="chip-tray-create"></div>
        <button class="btn btn-sm btn-outline-info" id="draw-cable-btn">
          <i class="mdi mdi-vector-polyline"></i> {% trans "Cable" %}
        </button>
      </div>
    </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-panel sidebar-panel--list" id="sidebar-panel-list">
      <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-tabs" id="sidebar-tabs">
        <button class="sidebar-tab active" data-tab="markers"><i class="mdi mdi-map-marker"></i> {% trans "Markers" %}</button>
        <button class="sidebar-tab" data-tab="cables"><i class="mdi mdi-vector-polyline"></i> {% trans "Cables" %}</button>
      </div>
      <div class="sidebar-tab-content" id="sidebar-tab-markers">
        <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-tab-content d-none" id="sidebar-tab-cables"></div>
    </div>
    <div class="sidebar-panel sidebar-panel--detail d-none" id="sidebar-panel-detail">
      <div class="sidebar-detail-header" id="sidebar-detail-back">
        <i class="mdi mdi-arrow-left"></i>
        <span>{% trans "Back to list" %}</span>
        <span class="sidebar-detail-esc">Esc</span>
      </div>
      <div class="sidebar-detail-content" id="sidebar-detail"></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 %}