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

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

{% block content %}
{% if not plan %}
<div class="row">
  <div class="col col-md-12">
    <div class="card">
      <h5 class="card-header">{% trans "Plan" %}</h5>
      <div class="card-body">
        <p class="text-muted mb-0">{% trans "No plan is associated." %}</p>
      </div>
    </div>
  </div>
</div>
{% elif zones %}
<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 layer=plan.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="{{ plan.width_px }}"
             data-height="{{ plan.height_px }}"
             data-mm-per-px="{{ plan.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:{{ plan.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' plan.pk %}"
             data-save-url="{% url 'plugins:netbox_cadplan:plan_save_associations' plan.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' plan.pk %}"
             data-place-url-template="{% url 'plugins:netbox_cadplan:place_object' 999999 %}"></div>
      </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 "Plan" %}</h5>
      <div class="card-body">
        <p class="text-muted mb-0">{% trans "This plan does not have any generated zones yet." %}</p>
      </div>
    </div>
  </div>
</div>
{% endif %}
{% endblock %}