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

{% block head %}
  {{ block.super }}
  <link rel="stylesheet" href="{% static 'netbox_deviceportvisualizer/portvisualizer.css' %}">
{% endblock %}

{% block content %}
  <div
    class="netbox-dpv"
    id="netbox-dpv"
    data-device-type-id="{{ object.pk }}"
    data-editable="{{ can_edit|yesno:"true,false" }}"
    data-api-url="{% url 'plugins-api:netbox_deviceportvisualizer-api:componentposition-list' %}"
    data-export-url="{% url 'dcim:devicetype_port_visualizer_export' pk=object.pk %}"
    data-import-url="{% url 'dcim:devicetype_port_visualizer_import' pk=object.pk %}"
    data-snap-x="{{ snap_x }}"
    data-snap-y="{{ snap_y }}"
    data-labels-mode="hover"
  >
    {% csrf_token %}

    <div class="d-flex justify-content-between align-items-center mb-3">
      <div class="d-flex gap-2">
        <div class="btn-group" role="group" aria-label="{% trans 'Face' %}">
          <button type="button" class="btn btn-outline-secondary face-toggle active" data-face="front">{% trans "Front" %}</button>
          <button type="button" class="btn btn-outline-secondary face-toggle" data-face="rear">{% trans "Rear" %}</button>
        </div>
        <div class="btn-group" role="group" aria-label="{% trans 'Image' %}">
          <button type="button" class="btn btn-outline-secondary image-mode-toggle active" data-image-mode="photo">{% trans "Photo" %}</button>
          <button type="button" class="btn btn-outline-secondary image-mode-toggle" data-image-mode="outline">{% trans "Outline" %}</button>
        </div>
        <div class="btn-group" role="group" aria-label="{% trans 'Labels' %}">
          <button type="button" class="btn btn-outline-secondary labels-mode-toggle" data-labels-mode="on">{% trans "Labels On" %}</button>
          <button type="button" class="btn btn-outline-secondary labels-mode-toggle active" data-labels-mode="hover">{% trans "Hover" %}</button>
          <button type="button" class="btn btn-outline-secondary labels-mode-toggle" data-labels-mode="off">{% trans "Off" %}</button>
        </div>
      </div>
      <div class="btn-list">
        <a class="btn btn-outline-primary" href="{% url 'dcim:devicetype_port_visualizer_export' pk=object.pk %}">
          <i class="mdi mdi-download"></i> {% trans "Export Layout" %}
        </a>
        {% if can_edit %}
          <a class="btn btn-outline-primary" href="{% url 'dcim:devicetype_port_visualizer_import' pk=object.pk %}">
            <i class="mdi mdi-upload"></i> {% trans "Import Layout" %}
          </a>
          <button type="button" class="btn btn-primary" id="dpv-save" disabled>
            <i class="mdi mdi-content-save"></i> {% trans "Save" %}
          </button>
          <button type="button" class="btn btn-outline-secondary" id="dpv-export-png">
            <i class="mdi mdi-image"></i> {% trans "Export PNG" %}
          </button>
        {% endif %}
      </div>
    </div>

    <div class="row">
      <div class="col-md-9">
        {% for face, image_url in faces %}
          <div class="dpv-face-panel{% if face != 'front' %} d-none{% endif %}" data-face="{{ face }}" data-image-mode="photo"
               {% if not image_url %}style="aspect-ratio: {{ aspect_width }} / {{ aspect_height|floatformat:2 }};"{% endif %}>
            {% if image_url %}
              <img src="{{ image_url }}" class="img-fluid dpv-photo" alt="{{ object }} ({{ face }})">
            {% else %}
              <div class="dpv-photo-placeholder text-muted">
                {% blocktrans with face_name=face %}No {{ face_name }} image set for this device type.{% endblocktrans %}
              </div>
            {% endif %}
            <div class="dpv-marker-layer">
              {% for item in placed %}
                {% if item.face == face %}
                  <div class="component-marker{% if item.highlighted %} dpv-highlighted{% endif %}" data-shape="{{ item.category }}"
                       data-position-id="{{ item.position_id }}"
                       data-content-type="{{ item.content_type }}"
                       data-object-id="{{ item.object_id }}"
                       data-name="{{ item.name }}"
                       data-face="{{ item.face }}"
                       style="left: {{ item.x }}%; top: {{ item.y }}%; width: {{ item.width }}%; height: {{ item.height }}%;"
                       {% if can_edit %}draggable="true"{% endif %}
                       title="{{ item.name }}">
                    <span class="component-marker-label">{{ item.short_name }}</span>
                  </div>
                {% endif %}
              {% endfor %}
            </div>
          </div>
        {% endfor %}

        {% if highlight and not placed_highlighted %}
          <div class="alert alert-info mt-3">
            {% blocktrans with name=highlight %}"{{ name }}" has not yet been positioned on this diagram.{% endblocktrans %}
          </div>
        {% endif %}
      </div>

      <div class="col-md-3">
        <div class="card mb-3">
          <h5 class="card-header">{% trans "Components" %}</h5>
          <div class="list-group list-group-flush dpv-component-list">
            {% for item in placed %}
              <button type="button" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center dpv-component-list-item"
                      data-content-type="{{ item.content_type }}" data-object-id="{{ item.object_id }}" data-face="{{ item.face }}">
                {{ item.short_name }}
                <span class="badge bg-secondary-lt text-uppercase">{{ item.face }}</span>
              </button>
            {% endfor %}
            {% for item in unplaced %}
              <button type="button" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center dpv-component-list-item text-muted"
                      data-content-type="{{ item.content_type }}" data-object-id="{{ item.object_id }}">
                {{ item.short_name }}
                <span class="badge bg-secondary-lt">{% trans "Unplaced" %}</span>
              </button>
            {% endfor %}
          </div>
        </div>

        {% if can_edit %}
          <div class="card">
            <h5 class="card-header">{% trans "Unplaced Components" %}</h5>
            <div class="card-body dpv-unplaced-tray" id="dpv-unplaced-tray">
              {% for item in unplaced %}
                <div class="component-marker-chip" draggable="true" data-shape="{{ item.category }}"
                     data-content-type="{{ item.content_type }}"
                     data-object-id="{{ item.object_id }}"
                     data-name="{{ item.name }}"
                     data-width="{{ item.width }}"
                     data-height="{{ item.height }}">
                  {{ item.short_name }}
                </div>
              {% empty %}
                <p class="text-muted mb-0">{% trans "Every component has been placed." %}</p>
              {% endfor %}
            </div>
          </div>
          <button type="button" class="btn btn-danger w-100 mt-2" id="dpv-clear-model">
            <i class="mdi mdi-delete-sweep"></i> {% trans "Clear Model" %}
          </button>
        {% endif %}
      </div>
    </div>
  </div>
{% endblock %}

{% block javascript %}
  {{ block.super }}
  <script src="{% static 'netbox_deviceportvisualizer/portvisualizer.js' %}"></script>
{% endblock %}