{% extends 'generic/object.html' %}
{% load render_table from django_tables2 %}
{% load static %}

{% block extra_css %}
    <link rel="stylesheet" type="text/css" href="{% static 'netbox_network_canvas_plugin/topology.css' %}">
{% endblock %}

{% block content %}
  <div class="row mb-3">
    <div class="col col-md-6">
      <div class="card">
        <h5 class="card-header">Network Topology Canvas: {{ object.name }}</h5>
        <table class="table table-hover attr-table">
          <tr>
            <th scope="row">Name</th>
            <td>{{ object.name }}</td>
          </tr>
          <tr>
            <th scope="row">Description</th>
            <td>{{ object.description|default:"—" }}</td>
          </tr>
          <tr>
            <th scope="row">Created</th>
            <td>{{ object.created|date:"M d, Y H:i" }}</td>
          </tr>
          <tr>
            <th scope="row">Last Updated</th>
            <td>{{ object.updated|date:"M d, Y H:i" }}</td>
          </tr>
          <tr>
            <th scope="row">Topology Data</th>
            <td>
              {% if object.topology_data %}
                <span class="badge badge-success">Available</span>
              {% else %}
                <span class="badge badge-warning">Not configured</span>
              {% endif %}
            </td>
          </tr>
        </table>
      </div>
      {% include 'inc/panels/custom_fields.html' %}
    </div>
    <div class="col col-md-6">
      {% include 'inc/panels/tags.html' %}
      {% include 'inc/panels/comments.html' %}
      
      <!-- Quick Actions -->
      <div class="card mt-3">
        <h5 class="card-header">Actions</h5>
        <div class="card-body">
          <a href="{% url 'plugins:netbox_network_canvas_plugin:networktopologycanvas_edit' pk=object.pk %}" class="btn btn-warning btn-sm">
            <i class="mdi mdi-pencil"></i> Edit Canvas
          </a>
          <a href="{% url 'plugins:netbox_network_canvas_plugin:dashboard' %}" class="btn btn-info btn-sm">
            <i class="mdi mdi-chart-network"></i> View Dashboard  
          </a>
          <a href="{% url 'plugins:netbox_network_canvas_plugin:api_topology_data' %}" class="btn btn-outline-secondary btn-sm">
            <i class="mdi mdi-api"></i> API Data
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Visualization Section -->
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
          <h5 class="card-title mb-0">Canvas Visualization</h5>
          <div>
            <button class="btn btn-outline-primary btn-sm" onclick="refreshCanvas()">
              <i class="mdi mdi-refresh"></i> Refresh
            </button>
          </div>
        </div>
        <div class="card-body">
          <div id="canvas-container" class="topology-container" style="height: 500px;">
            <div class="topology-loading">
              <div class="spinner"></div>
              <p class="mt-3">Loading canvas visualization...</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock content %}

{% block javascript %}
<script>
function refreshCanvas() {
    location.reload();
}

// Initialize canvas-specific visualization if needed
document.addEventListener('DOMContentLoaded', function() {
    console.log('Canvas detail view loaded for: {{ object.name }}');
    
    // Show placeholder or load specific canvas data
    const container = document.getElementById('canvas-container');
    if (container) {
        // For now, show a placeholder
        container.innerHTML = `
            <div class="d-flex justify-content-center align-items-center h-100 text-muted">
                <div class="text-center">
                    <i class="mdi mdi-chart-network" style="font-size: 64px;"></i>
                    <h5 class="mt-3">Canvas: {{ object.name }}</h5>
                    <p>Canvas-specific visualization will be implemented here.</p>
                    <a href="{% url 'plugins:netbox_network_canvas_plugin:dashboard' %}" class="btn btn-primary">
                        View Live Dashboard
                    </a>
                </div>
            </div>
        `;
    }
});
</script>
{% endblock %}