{% comment %}
Shared panel layout include.
Context vars:
  layout_json, sub_layouts_json, connections_json,
  highlight_port, edit_mode, can_edit, save_url, object_type, object_pk
{% endcomment %}

{# ---- Toolbar ------------------------------------------------------------ #}
<div class="dv2-toolbar d-flex align-items-center gap-2 mb-2 flex-wrap">
  {% if edit_mode %}
    <button id="dv2-add-layout-btn" class="btn btn-sm btn-outline-secondary ms-auto">+ Add Layout</button>
    <button id="dv2-clone-btn" class="btn btn-sm btn-outline-secondary">+ Clone</button>
    <button id="dv2-import-btn" class="btn btn-sm btn-outline-secondary">Import</button>
    <button id="dv2-save-btn" class="btn btn-sm btn-primary">
      <i class="mdi mdi-content-save"></i> Save Layout
    </button>
    <a href="?" class="btn btn-sm btn-outline-secondary">Cancel</a>
  {% else %}
    {% if can_edit %}
      {% if layout_source == "device_type" %}
        <div class="btn-group ms-auto">
          <button type="button" class="btn btn-sm btn-outline-primary dropdown-toggle"
                  data-bs-toggle="dropdown" aria-expanded="false">
            <i class="mdi mdi-pencil"></i> Edit
          </button>
          <ul class="dropdown-menu dropdown-menu-end">
            <li>
              <a class="dropdown-item" href="?edit=1">
                <i class="mdi mdi-content-copy"></i> Clone from Device Type Layout and Edit
              </a>
            </li>
            <li>
              <a class="dropdown-item" href="/dcim/device-types/{{ device_type_pk }}/layout/?edit=1">
                <i class="mdi mdi-pencil"></i> Edit Device Type Layout
              </a>
            </li>
          </ul>
        </div>
      {% else %}
        <a href="?edit=1" class="btn btn-sm btn-outline-primary ms-auto">
          <i class="mdi mdi-pencil"></i> Edit Layout
        </a>
      {% endif %}
    {% endif %}
  {% endif %}
</div>

{# ---- Main editor area (sidebar + panels column) ------------------------- #}
<div class="dv2-editor-layout{% if edit_mode %} dv2-edit-mode{% endif %}">

  {# Left sidebar — only in edit mode #}
  {% if edit_mode %}
  <aside class="dv2-sidebar" id="dv2-sidebar">
    <div class="dv2-sidebar-header">Available Items</div>

    <select id="dv2-sidebar-type" class="dv2-select dv2-sidebar-select">
      <option value="module-bay">Module Bays</option>
      <option value="interface">Interfaces</option>
      <option value="front-port">Front Ports</option>
      <option value="rear-port">Rear Ports</option>
      {% if object_type != "module_type" %}
      <option value="device-bay">Device Bays</option>
      {% endif %}
      <option value="console-port">Console Ports</option>
      <option value="console-server-port">Console Server Ports</option>
      <option value="power-port">Power Ports</option>
      <option value="power-outlet">Power Outlets</option>
    </select>

    <input id="dv2-sidebar-filter" type="search" class="dv2-sidebar-filter"
           placeholder="Filter…" autocomplete="off">

    <div id="dv2-sidebar-list" class="dv2-sidebar-list">
      <div class="dv2-sidebar-loading">Loading…</div>
    </div>
  </aside>

  {# Resize bar between sidebar and panels column #}
  <div class="dv2-resize-bar" id="dv2-resize-bar"><span></span></div>
  {% endif %}

  {# Panels column — JS creates dv2-panel divs inside here #}
  <div class="dv2-panels-column"
       id="dv2-panels-column"
       data-layouts="{{ layout_json }}"
       data-sub-layouts="{{ sub_layouts_json }}"
       data-connections="{{ connections_json }}"
       data-device-bays="{{ device_bays_json }}"
       data-edit="{{ edit_mode|yesno:'true,false' }}"
       data-highlight-port="{{ highlight_port|default:'' }}"
       data-object-type="{{ object_type }}"
       data-object-pk="{{ object_pk }}">
  </div>

</div>{# .dv2-editor-layout #}

{# ---- Hidden save form --------------------------------------------------- #}
{% if edit_mode %}
<form id="dv2-save-form" method="post" action="{{ save_url }}">
  {% csrf_token %}
  <input type="hidden" id="dv2-layout-data" name="layout_data" value="">
</form>

{# ---- Zone EDIT modal (for editing existing zones, not creating) --------- #}
<div id="dv2-zone-modal">
  <div class="dv2-modal-dialog">
    <div class="dv2-modal-header">
      <span>Edit Zone</span>
      <button class="dv2-modal-close" id="dv2-modal-close-btn" type="button">&#x2715;</button>
    </div>
    <div class="dv2-modal-body">

      <div class="mb-3">
        <label class="form-label" for="dv2-modal-label">Label</label>
        <input type="text" id="dv2-modal-label" class="form-control">
      </div>

      <div class="mb-3">
        <label class="form-label" for="dv2-modal-type">Type</label>
        <select id="dv2-modal-type" class="dv2-select">
          <option value="module_bay">Module Bay</option>
          <option value="device_bay">Device Bay</option>
          <option value="port_group">Port Group</option>
          <option value="power">Power</option>
          <option value="custom">Custom</option>
        </select>
      </div>

      <div class="row">
        <div class="col-6 mb-3">
          <label class="form-label" for="dv2-modal-colspan">Column Span</label>
          <input type="number" id="dv2-modal-colspan" class="form-control" min="1" value="1">
        </div>
        <div class="col-6 mb-3">
          <label class="form-label" for="dv2-modal-rowspan">Row Span</label>
          <input type="number" id="dv2-modal-rowspan" class="form-control" min="1" value="1">
        </div>
      </div>

      <div class="mb-3">
        <label class="form-label">Background</label>
        <div class="d-flex align-items-center gap-2 flex-wrap">
          <button type="button" class="dv2-bg-opt btn btn-sm btn-outline-secondary" data-bg="">Default</button>
          <button type="button" class="dv2-bg-opt btn btn-sm btn-outline-secondary" data-bg="none">None</button>
          <button type="button" class="dv2-bg-opt btn btn-sm btn-outline-secondary" data-bg="custom">Custom</button>
          <input type="color" id="dv2-modal-color-picker" class="dv2-color-picker" value="#4a7acc" title="Pick background color">
        </div>
      </div>

      <div class="mb-3">
        <label class="form-label">Border</label>
        <div class="d-flex align-items-center gap-2 flex-wrap">
          <button type="button" class="dv2-border-opt btn btn-sm btn-outline-secondary" data-border="">Default</button>
          <button type="button" class="dv2-border-opt btn btn-sm btn-outline-secondary" data-border="none">None</button>
          <button type="button" class="dv2-border-opt btn btn-sm btn-outline-secondary" data-border="custom">Custom</button>
          <input type="color" id="dv2-modal-border-picker" class="dv2-color-picker" value="#4a7acc" title="Pick border color">
        </div>
      </div>

      {# Port list — shown when type = port_group #}
      <div id="dv2-modal-ports-section" style="display:none">
        <label class="form-label">Ports in this zone</label>
        <div class="dv2-modal-ports-header">
          <span>Name</span>
          <span>Label (display override)</span>
        </div>
        <div id="dv2-modal-ports-list" class="mb-2"></div>
        <div class="dv2-form-hint">Drag items from the sidebar to add ports. Leave label blank to use name.</div>
      </div>

    </div>
    <div class="dv2-modal-footer">
      <button type="button" class="btn btn-sm btn-outline-danger me-auto" id="dv2-modal-delete-btn">Delete Zone</button>
      <button type="button" class="btn btn-secondary btn-sm" id="dv2-modal-cancel-btn">Cancel</button>
      <button type="button" class="btn btn-primary btn-sm" id="dv2-modal-save-btn">Save</button>
    </div>
  </div>
</div>

{# ---- Clone modal -------------------------------------------------------- #}
<div id="dv2-clone-modal">
  <div class="dv2-modal-dialog">
    <div class="dv2-modal-header">
      <span>Clone Layout From</span>
      <button class="dv2-modal-close" id="dv2-clone-close-btn" type="button">&#x2715;</button>
    </div>
    <div class="dv2-modal-body">

      <div class="mb-3">
        <label class="form-label" for="dv2-clone-source-type">Clone from</label>
        <select id="dv2-clone-source-type" class="dv2-select">
          {% if object_type == "device" %}
            <option value="device">Another Device</option>
            <option value="device_type">Another Device Type</option>
          {% elif object_type == "module_type" %}
            <option value="module_type">Another Module Type</option>
          {% else %}
            <option value="device_type">Another Device Type</option>
          {% endif %}
        </select>
      </div>

      <div id="dv2-clone-list" class="dv2-clone-list">
        <div class="dv2-sidebar-loading">Loading…</div>
      </div>

    </div>
    <div class="dv2-modal-footer">
      <button type="button" class="btn btn-secondary btn-sm" id="dv2-clone-cancel-btn">Cancel</button>
      <button type="button" class="btn btn-primary btn-sm" id="dv2-clone-apply-btn" disabled>Clone</button>
    </div>
  </div>
</div>

{# ---- Import modal ------------------------------------------------------- #}
<div id="dv2-import-modal">
  <div class="dv2-modal-dialog">
    <div class="dv2-modal-header">
      <span>Import Layout</span>
      <button class="dv2-modal-close" id="dv2-import-close-btn" type="button">&#x2715;</button>
    </div>
    <div class="dv2-modal-body">

      <div class="mb-3">
        <label class="form-label" for="dv2-import-file">Upload JSON file</label>
        <input type="file" id="dv2-import-file" accept=".json,.yaml,.yml" class="form-control">
      </div>

      <div class="mb-3">
        <label class="form-label" for="dv2-import-text">Or paste JSON / YAML</label>
        <textarea id="dv2-import-text" class="form-control dv2-import-textarea"
                  rows="8" placeholder='{"layouts": [...]}  or  layouts: [...]'></textarea>
      </div>

      <div id="dv2-import-error" class="text-danger small" style="display:none"></div>

    </div>
    <div class="dv2-modal-footer">
      <button type="button" class="btn btn-secondary btn-sm" id="dv2-import-cancel-btn">Cancel</button>
      <button type="button" class="btn btn-primary btn-sm" id="dv2-import-apply-btn">Import</button>
    </div>
  </div>
</div>

{% endif %}