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

{% block head %}
{{ block.super }}
<script src="{% static 'netbox_dwg/js/vendor/fabric.min.js' %}"></script>
<script src="{% static 'netbox_dwg/js/vendor/jquery.min.js' %}"></script>
{% endblock head %}

{% block title %}{{ obj }}{% endblock title %}

{% block content %}
<style>
    #canvas-wrapper {
        box-sizing: content-box;
    }
</style>

<input type="hidden" id="floor_id" value="{{ obj.pk }}">
<input type="hidden" id="highlight_type" value="{{ highlight_type }}">
<input type="hidden" id="highlight_id"   value="{{ highlight_id }}">

<div class="row mb-3">
    <div class="col" id="view-canvas-col">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h4 class="mb-0">{{ obj }}</h4>
                    <div>
                        <button class="btn btn-outline-success" id="export_svg">
                            <i class="mdi mdi-file-export"></i> Export SVG
                        </button>
                        <a class="btn btn-warning" href="{% url 'plugins:netbox_dwg:floor_edit' pk=obj.pk %}">
                            <i class="mdi mdi-pencil"></i> Edit
                        </a>
                        <a class="btn btn-outline-secondary"
                            href="{% url 'plugins:netbox_dwg:floor_edit_form' pk=obj.pk %}">
                            <i class="mdi mdi-cog"></i> Settings
                        </a>
                        <a class="btn btn-danger" href="{% url 'plugins:netbox_dwg:floor_delete' pk=obj.pk %}">
                            <i class="mdi mdi-trash-can-outline"></i> Delete
                        </a>
                    </div>
                </div>

                <div class="row mb-2">
                    <div class="col-auto">
                        <span class="badge text-bg-secondary">Site: {{ site.name }}</span>
                        <span class="badge text-bg-info">Level: {{ obj.level }}</span>
                        {% if obj.width and obj.height %}
                        <span class="badge text-bg-warning">
                            {{ obj.width }}×{{ obj.height }} {{ obj.measurement_unit }}
                        </span>
                        {% endif %}
                    </div>
                </div>

                <div id="canvas-wrapper" style="overflow: hidden; position: relative;">
                    <canvas id="canvas" style="border:1px solid #dee2e6;"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Layer panel (right side) -->
    <div class="col-md-3" id="view-layers-col" style="display:none;">
        <div class="card">
            <h5 class="card-header">
                <i class="mdi mdi-layers"></i> Layers
            </h5>
            <div class="card-body p-2">
                <div id="view-layers-panel"></div>
            </div>
        </div>
    </div>
</div>

{% include 'netbox_dwg/inc/pro_tips.html' %}

<style>
#view-layers-panel .view-layer-group {
    margin-bottom: 2px;
}
#view-layers-panel .view-layer-item {
    display: flex;
    align-items: center;
    padding: 4px 6px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: #fff;
    font-size: 0.85rem;
    user-select: none;
}
#view-layers-panel .view-layer-item.layer-hidden {
    opacity: 0.5;
}
#view-layers-panel .view-layer-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 4px;
}
#view-layers-panel .view-layer-btn {
    border: none;
    background: none;
    padding: 0 3px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.6;
}
#view-layers-panel .view-layer-btn:hover {
    opacity: 1;
}
#view-layers-panel .view-layer-objects {
    margin-left: 16px;
    border-left: 2px solid #e9ecef;
    padding-left: 4px;
}
#view-layers-panel .view-obj-row {
    display: flex;
    align-items: center;
    padding: 2px 4px;
    font-size: 0.8rem;
    border-radius: 3px;
    color: #555;
}
#view-layers-panel .view-obj-row:hover {
    background: #f0f7ff;
}
#view-layers-panel .view-obj-row .view-obj-icon {
    margin-right: 4px;
    font-size: 0.9rem;
}
#view-layers-panel .view-obj-row .view-obj-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>

<script src="{% static 'netbox_dwg/js/utils.js' %}" defer></script>
<script src="{% static 'netbox_dwg/js/view.js' %}" defer></script>
{% endblock content %}