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

{% block content %}
{% if zone %}
<div class="row">
  <div class="col col-md-8">
    <div class="card">
      <h5 class="card-header d-flex justify-content-between align-items-center">
        <span>{% blocktrans with number=zone.number %}Location plan — zone {{ number }}{% endblocktrans %}</span>
        <div class="d-flex gap-2">
          <button type="button" id="np-loc-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-loc-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">
        <p class="text-muted px-3 pt-3 mb-0">
          {% trans "Plan" %} : <a href="{{ zone.plan.get_absolute_url }}">{{ zone.plan.name }}</a>
        </p>
        {{ objects|json_script:"np-loc-objects-data" }}
        {{ polygon|json_script:"np-loc-polygon-data" }}
        {{ inner_polygons|json_script:"np-loc-inner-polygons" }}
        <div id="np-loc-canvas"
             data-width="{{ width_px }}"
             data-height="{{ height_px }}"
             data-offset-x="{{ offset_x }}"
             data-offset-y="{{ offset_y }}"
             data-mm-per-px="{{ mm_per_px|default_if_none:'' }}"
             data-plan-width="{{ zone.plan.width_px }}"
             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:700px; overflow:hidden; position:relative;"></div>
      </div>
    </div>
  </div>

  <div class="col col-md-4">
    <div class="card mb-3">
      <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:zone_pickable_objects' zone.pk %}"
             data-place-url="{% url 'plugins:netbox_cadplan:place_object' zone.pk %}"></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-loc-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>

<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>
{% else %}
<div class="row">
  <div class="col col-md-12">
    <div class="card">
      <h5 class="card-header">{% trans "Location plan" %}</h5>
      <div class="card-body">
        <p class="text-muted mb-0">{% trans "No plan zone is associated with this location." %}</p>
      </div>
    </div>
  </div>
</div>
{% endif %}
{% endblock %}