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

{% block extra_controls %}
  {% if object.dxf_file and object.selected_layer %}
    <a href="{% url 'plugins:netbox_cadplan:plan_export_dxf' object.pk %}" class="btn btn-outline-secondary">
      <i class="mdi mdi-download" aria-hidden="true"></i> {% trans "Export as DXF" %}
    </a>
  {% endif %}
  {% if object.dxf_file %}
    <a href="{% url 'plugins:netbox_cadplan:plan_reimport_dxf' object.pk %}" class="btn btn-outline-secondary">
      <i class="mdi mdi-upload" aria-hidden="true"></i> {% trans "Update the Plan" %}
    </a>
  {% endif %}
{% endblock %}

{% block content %}
<div class="row">
  <div class="col col-md-12">
    <div class="card">
      <h5 class="card-header">{% trans "Plan" %}</h5>
      <div class="card-body">
        <table class="table table-hover attr-table">
          <tr>
            <th scope="row">{% trans "Name" %}</th>
            <td>{{ object.name }}</td>
          </tr>
          <tr>
            <th scope="row">{% trans "Site" %}</th>
            <td>{{ object.site|linkify }}</td>
          </tr>
          <tr>
            <th scope="row">{% trans "Location" %}</th>
            <td>{{ object.location|linkify|placeholder }}</td>
          </tr>
          <tr>
            <th scope="row">{% trans "DXF file" %}</th>
            <td>
              {% if object.dxf_file %}
                <a href="{{ object.dxf_file.url }}">{{ object.dxf_file.name }}</a>
              {% else %}
                {{ ''|placeholder }}
              {% endif %}
            </td>
          </tr>
          <tr>
            <th scope="row">{% trans "Selected layer" %}</th>
            <td>{{ object.selected_layer|placeholder }}</td>
          </tr>
          <tr>
            <th scope="row">{% trans "Zones" %}</th>
            <td>{{ zones.count }}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

{% if object.dxf_file and not object.selected_layer %}
<div class="row mt-3">
  <div class="col col-md-12">
    <div class="card">
      <div class="card-body">
        <p class="text-muted mb-0">{% trans "Choose a layer from the list to preview its content, then confirm the one that contains the location boundaries." %}</p>
      </div>
    </div>
  </div>
</div>

<div class="row mt-3">
  <div class="col col-md-4">
    <div class="card">
      <h5 class="card-header">{% trans "Layer selection" %}</h5>
      <div class="card-body">
        <div id="np-layer-panel"
             data-layers-url="{% url 'plugins:netbox_cadplan:plan_layers' object.pk %}"
             data-confirm-url="{% url 'plugins:netbox_cadplan:plan_confirm_layer' object.pk %}"
             data-confirm-preview-url="{% url 'plugins:netbox_cadplan:plan_confirm_layer_preview' object.pk %}"></div>
      </div>
    </div>
  </div>

  <div class="col col-md-8">
    <div class="card">
      <h5 class="card-header">{% trans "Layer preview" %}</h5>
      <div class="card-body p-0">
        <div id="np-preview-canvas"
             data-width="{{ object.width_px }}"
             data-height="{{ object.height_px }}"
             data-preview-url="{% url 'plugins:netbox_cadplan:plan_layer_preview' object.pk %}"
             style="width:100%; max-height:{{ object.height_px }}px; overflow:hidden; position:relative;">
          <p class="text-muted p-3 mb-0">{% trans "Waiting for a selection…" %}</p>
        </div>
      </div>
    </div>
  </div>
</div>
{% endif %}

{% if zones %}
<div class="row mt-3">
  <div class="col col-md-8">
    <div class="card">
      <h5 class="card-header d-flex justify-content-between align-items-center">
        <span>{% blocktrans with layer=object.selected_layer %}Plan ({{ layer }}){% endblocktrans %}</span>
        <div class="d-flex gap-2">
          <button type="button" id="np-position-tool-btn" class="btn btn-sm btn-outline-secondary">
            <i class="mdi mdi-ruler" aria-hidden="true"></i> {% trans "Position by distance" %}
          </button>
          <button type="button" id="np-center-view-btn" class="btn btn-sm btn-outline-secondary">
            <i class="mdi mdi-image-filter-center-focus" aria-hidden="true"></i> {% trans "Center view" %}
          </button>
        </div>
      </h5>
      <div class="card-body p-0">
        {{ zones_data|json_script:"np-zones-data" }}
        <div id="np-canvas"
             data-width="{{ object.width_px }}"
             data-height="{{ object.height_px }}"
             data-mm-per-px="{{ object.mm_per_px|default_if_none:'' }}"
             data-update-url-template="{% url 'plugins:netbox_cadplan:update_placed_object' 999999 %}"
             data-remove-url-template="{% url 'plugins:netbox_cadplan:remove_placed_object' 999999 %}"
             style="width:100%; max-height:{{ object.height_px }}px; overflow:hidden; position:relative;"></div>
      </div>
    </div>
  </div>

  <div class="col col-md-4">
    <div class="card mb-3">
      <h5 class="card-header">{% trans "Associate a location" %}</h5>
      <div class="card-body">
        <div id="np-association-panel"
             data-locations-api-url="{% url 'plugins:netbox_cadplan:plan_locations' object.pk %}"
             data-save-url="{% url 'plugins:netbox_cadplan:plan_save_associations' object.pk %}">
          <p class="text-muted mb-0">{% trans "Click a zone on the plan to associate it with a location." %}</p>
        </div>
        <button type="button" id="np-save-associations-btn" class="btn btn-primary mt-3">{% trans "Save" %}</button>
        <div id="np-save-feedback" class="mt-2"></div>
      </div>
    </div>
    <div class="card mb-3">
      <h5 class="card-header">{% trans "Properties" %}</h5>
      <div class="card-body" id="np-properties-panel">
        <p class="text-muted mb-0">{% trans "Click an object placed on the plan to view its properties." %}</p>
      </div>
    </div>
    <div class="card">
      <h5 class="card-header">{% trans "Position by distance" %}</h5>
      <div class="card-body" id="np-position-tool-panel">
        <p class="text-muted mb-0">{% trans "Activate the tool above the plan, then click the device to move." %}</p>
      </div>
    </div>
  </div>
</div>

<div class="row mt-3">
  <div class="col col-md-12">
    <div class="card">
      <h5 class="card-header">{% trans "Objects to place" %}</h5>
      <div class="card-body">
        <div id="np-pickable-panel"
             data-pickable-url="{% url 'plugins:netbox_cadplan:plan_pickable_objects' object.pk %}"
             data-place-url-template="{% url 'plugins:netbox_cadplan:place_object' 999999 %}"></div>
      </div>
    </div>
  </div>
</div>
{% endif %}

{% comment %}
?v=N as a manual cache-buster: static files are served with cache-control: max-age=86400
and without ETag/Last-Modified, so the browser never re-downloads the old version without this.
Increment N on every change to plan_editor.js / plan.css.
{% endcomment %}
<link rel="stylesheet" href="{% static 'netbox_cadplan/css/plan.css' %}?v=75">
<script src="https://unpkg.com/konva@9/konva.min.js"></script>
<script src="{% url 'plugins:netbox_cadplan:javascript-catalog' %}"></script>
<script src="{% static 'netbox_cadplan/js/plan_editor.js' %}?v=75"></script>
{% endblock %}