{% extends "base.html" %}
{% load static %}

{% block title %}Content Browser — {{ playbook.name }}{% endblock %}

{% block body_class %}mm-content-browser{% endblock %}

{% block content %}
{# Three-panel layout shell — playbook is always set via /browser/<pk>/ #}
<div id="browser-root"
     data-playbook-pk="{{ playbook_pk }}"
     data-playbook-phases="{{ phases_json }}"
     class="d-flex align-items-stretch position-relative overflow-hidden">

  <button data-testid="browser-toggle-left-panel"
          title="Toggle left panel"
          data-bs-toggle="tooltip"
          data-bs-placement="left"
          class="mm-browser-panel-toggle position-absolute top-50 btn btn-sm btn-outline-secondary border border-secondary rounded-circle p-0"
          style="left: 280px;">
    ‹
  </button>

  {# ── Left panel ── #}
  <div id="browser-left-panel"
       data-testid="browser-left-panel"
       class="mm-browser-left-panel border-end bg-body-secondary flex-shrink-0">

    <div id="browser-left-panel-content" class="mm-browser-left-panel-content">
    <div class="p-3">
      <div class="fw-bold mb-1" data-testid="browser-playbook-title">
        {{ playbook.name }}
      </div>
      <div class="mb-2">
        <span data-testid="browser-playbook-status"
              class="badge bg-{{ playbook.get_status_badge_color|default:'secondary' }} small">
          {{ playbook.get_status_display }}
        </span>
      </div>

      <div data-testid="browser-panel-compact" class="mm-browser-panel-compact">
        <div class="mt-2 mb-1">
          <input data-testid="browser-search-input"
                 type="text"
                 class="form-control form-control-sm"
                 placeholder="Search nodes…"
                 autocomplete="off">
        </div>

        <div data-testid="browser-structure-tree" class="mt-1"></div>
      </div>

      <div data-testid="browser-resource-tree" class="mt-3 text-muted" style="font-size: 0.875rem;">
        <span class="text-muted">Select a Workflow to see its resources.</span>
      </div>
    </div>
    </div>
  </div>

  {# ── Canvas ── #}
  <div id="browser-canvas-wrapper"
       class="mm-browser-canvas-wrapper flex-grow-1 position-relative">

    <div class="mm-browser-canvas-header position-absolute top-0 start-0 mt-2 ms-2 z-3">
      <a href="{% url 'playbook_detail' pk=playbook.pk %}"
         class="btn btn-sm btn-outline-secondary"
         data-testid="browser-back-to-playbook"
         data-bs-toggle="tooltip"
         title="Return to playbook detail">
        <i class="fa-solid fa-arrow-left"></i> Back to playbook
      </a>
    </div>

    <div data-testid="browser-loading"
         class="mm-browser-overlay-state d-none">
      <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">Loading graph…</span>
      </div>
    </div>

    <div data-testid="browser-no-content-state"
         class="mm-browser-overlay-state position-absolute d-none">
      <div class="mm-browser-empty-card text-center">
        <div class="mm-browser-empty-icon-wrap" aria-hidden="true">
          <i class="fa-solid fa-inbox"></i>
        </div>
        <h5 class="mb-2">This playbook has no content yet.</h5>
        <p class="text-muted mb-3">Add workflows and activities to see the graph.</p>
        <a data-testid="browser-go-to-playbook"
           href="{% url 'playbook_detail' pk=playbook.pk %}"
           class="btn btn-outline-primary">Go to Playbook</a>
      </div>
    </div>

    <div data-testid="browser-error-state"
         class="mm-browser-overlay-state position-absolute d-none">
      <div class="mm-browser-empty-card text-center">
        <p class="text-danger mb-3">Could not load graph data.</p>
        <button data-testid="browser-retry" class="btn btn-outline-danger btn-sm">Retry</button>
      </div>
    </div>

    <div class="mm-browser-canvas-controls position-absolute bottom-0 end-0 mb-3 me-3"
         data-testid="browser-canvas-controls">

      <div class="text-end mb-1">
        <span data-testid="browser-node-count" class="badge bg-secondary"></span>
      </div>

      <div class="d-flex justify-content-end mb-1">
        <label class="mm-browser-custom-layout-label d-flex align-items-center gap-1 text-secondary">
          <input type="checkbox"
                 data-testid="browser-custom-layout-toggle">
          Custom layout
        </label>
      </div>

      <div class="d-flex gap-1 mb-1 browser-custom-controls d-none">
        <button data-testid="browser-layout-btn"
                class="mm-browser-btn-compact btn btn-outline-secondary"
                title="Switch layout"
                data-bs-toggle="tooltip"
                data-bs-placement="left">Layered ▾</button>
        <button data-testid="browser-routing-btn"
                class="mm-browser-btn-compact btn btn-outline-secondary"
                title="Switch edge routing style"
                data-bs-toggle="tooltip"
                data-bs-placement="left">Bezier ▾</button>
      </div>

      <div class="d-flex gap-1 mb-1 browser-custom-controls d-none">
        <button data-testid="browser-compound-btn"
                class="mm-browser-btn-compact btn btn-outline-secondary"
                title="Select workflow grouping mode"
                data-bs-toggle="tooltip"
                data-bs-placement="left">No grouping ▾</button>
        <button data-testid="browser-node-size-toggle"
                class="mm-browser-btn-compact btn btn-outline-secondary active"
                title="Toggle node size mode: Fixed size vs Auto-width"
                data-bs-toggle="tooltip"
                data-bs-placement="left">Fixed ✓</button>
      </div>

      <div class="d-flex gap-1">
        <button data-testid="browser-replot-btn"
                class="mm-browser-btn-compact btn btn-outline-secondary"
                title="Re-plot graph"
                data-bs-toggle="tooltip"
                data-bs-placement="left">↺</button>
        <button data-testid="browser-zoom-in"
                class="mm-browser-btn-compact btn btn-outline-secondary"
                title="Zoom in"
                data-bs-toggle="tooltip"
                data-bs-placement="left">+</button>
        <button data-testid="browser-zoom-out"
                class="mm-browser-btn-compact btn btn-outline-secondary"
                title="Zoom out"
                data-bs-toggle="tooltip"
                data-bs-placement="left">−</button>
        <button data-testid="browser-zoom-fit"
                class="mm-browser-btn-compact btn btn-outline-secondary"
                title="Fit graph"
                data-bs-toggle="tooltip"
                data-bs-placement="left">⊡</button>
      </div>
    </div>

    <div data-testid="browser-canvas" id="cy" class="mm-browser-canvas"></div>
  </div>

  {# ── Detail panel ── #}
  <div id="browser-detail-panel"
       data-testid="browser-detail-panel"
       class="mm-browser-detail-panel border-start bg-body d-none">

    <div class="d-flex justify-content-between align-items-center p-2 border-bottom">
      <div>
        <button data-testid="browser-panel-open-tab" class="btn btn-sm btn-outline-secondary me-1">
          Open new tab
        </button>
        <button data-testid="browser-panel-open-full" class="btn btn-sm btn-outline-secondary">
          Open full
        </button>
      </div>
      <button data-testid="browser-panel-close" class="btn btn-sm btn-close"></button>
    </div>

    <div data-testid="browser-panel-content" id="browser-panel-content"></div>
  </div>

</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/dagre@0.8.5/dist/dagre.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape@3.30.4/dist/cytoscape.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-dagre@2.5.0/cytoscape-dagre.js"></script>
<script src="https://cdn.jsdelivr.net/npm/elkjs@0.9.3/lib/elk.bundled.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-elk@2.2.0/cytoscape-elk.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-navigator@2.0.2/cytoscape-navigator.js"></script>
<script src="https://cdn.jsdelivr.net/npm/webcola@3.4.0/WebCola/cola.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-cola@2.5.1/cytoscape-cola.js"></script>
<script src="https://cdn.jsdelivr.net/npm/klayjs@0.4.1/klay.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-klay@3.1.4/cytoscape-klay.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-cise@2.2.2/dist/cytoscape-cise.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-euler@1.2.2/cytoscape-euler.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-avsdf@1.2.1/src/avsdf.js"></script>
<script src="https://cdn.jsdelivr.net/npm/layout-base@2.0.1/layout-base.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cose-base@2.2.0/cose-base.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-cose-bilkent@4.1.0/cytoscape-cose-bilkent.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-fcose@2.2.0/cytoscape-fcose.js"></script>
<script>
  if (typeof window.cytoscape === 'undefined') {
    var cyEl = document.getElementById('cy');
    if (cyEl) cyEl.style.display = 'none';
    var err = document.querySelector('[data-testid="browser-error-state"]');
    if (err) {
      err.classList.remove('d-none');
      var errP = err.querySelector('p');
      if (errP) errP.textContent = 'The graph view failed to load.';
    }
    var retry = document.querySelector('[data-testid="browser-retry"]');
    if (retry) {
      retry.textContent = 'Reload page';
      retry.onclick = function() { window.location.reload(); };
    }
  }
</script>
<script src="{% static 'js/content-browser.js' %}"></script>
{% endblock %}