{% extends "admin/base_site.html" %}
{% load static %}

{% block title %}Workflow Builder - {{ form_definition.name }}{% endblock %}

{% block extrastyle %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<style>
    body {
        background: #f5f7fa;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    }
    
    .workflow-builder-container {
        display: flex;
        height: calc(100vh - 100px);
        gap: 1rem;
        padding: 1rem;
    }
    
    /* Node Palette */
    .node-palette {
        width: 250px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        padding: 1.5rem;
        overflow-y: auto;
    }
    
    .palette-header {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 1rem;
        color: #2c3e50;
    }
    
    .palette-node {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 0.75rem 1rem;
        margin-bottom: 0.75rem;
        border-radius: 8px;
        cursor: grab;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .palette-node:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }
    
    .palette-node:active {
        cursor: grabbing;
    }
    
    .palette-node.form { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
    .palette-node.stage { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
    .palette-node.approval { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
    .palette-node.condition { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
    .palette-node.action { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
    .palette-node.email { background: linear-gradient(135deg, #fa8bff 0%, #2bd2ff 100%); }
    .palette-node.sub_workflow { background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); }
    .palette-node.end { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
    
    /* Workflow Canvas */
    .workflow-canvas-container {
        flex: 1;
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        position: relative;
        overflow: hidden;
    }
    
    .canvas-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 1rem 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .workflow-canvas {
        width: 100%;
        height: calc(100% - 60px);
        min-height: 600px;
        position: relative;
        overflow: hidden;
        background-image:
            linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
        background-size: 20px 20px;
        overflow: auto;
    }
    
    /* Workflow Nodes */
    .workflow-node {
        position: absolute;
        background: white;
        border: 2px solid #dee2e6;
        border-radius: 12px;
        padding: 1rem;
        min-width: 180px;
        cursor: move;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transition: all 0.2s;
        overflow: visible;
    }
    
    .workflow-node:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        border-color: #667eea;
    }
    
    .workflow-node.selected {
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
    }

    .workflow-node.has-validation-error {
        border-color: #dc3545;
        box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.12);
    }

    .workflow-node.has-validation-warning {
        border-color: #fd7e14;
        box-shadow: 0 0 0 2px rgba(253, 126, 20, 0.10);
    }
    
    .workflow-node.start {
        border-color: #28a745;
        background: linear-gradient(135deg, #f0fff4 0%, #e6f9ea 100%);
    }

    .workflow-node.form {
        border-color: #667eea;
        background: linear-gradient(135deg, #f0f3ff 0%, #e6eaff 100%);
        min-width: 220px;
    }

    .workflow-node.approval_config {
        border-color: #ffc107;
        background: linear-gradient(135deg, #fffbf0 0%, #fff8e6 100%);
        min-width: 240px;
    }

    .workflow-node.approval {
        border-color: #f5576c;
        background: linear-gradient(135deg, #fff0f3 0%, #ffe6ea 100%);
    }

    .workflow-node.condition {
        border-color: #00f2fe;
        background: linear-gradient(135deg, #f0fcff 0%, #e6f9ff 100%);
    }

    .workflow-node.action {
        border-color: #38f9d7;
        background: linear-gradient(135deg, #f0fff9 0%, #e6fff5 100%);
    }

    .workflow-node.email {
        border-color: #2bd2ff;
        background: linear-gradient(135deg, #f0f9ff 0%, #e6f5ff 100%);
    }

    .workflow-node.sub_workflow {
        border-color: #a18cd1;
        background: linear-gradient(135deg, #f5f0ff 0%, #fdf2ff 100%);
        min-width: 220px;
        box-shadow: 0 10px 24px rgba(118, 75, 162, 0.12);
    }

    .workflow-node.stage {
        box-shadow: 0 10px 24px rgba(232, 62, 140, 0.12);
    }

    .workflow-node.join {
        border-color: #6c757d;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        min-width: 100px;
        max-width: 140px;
        text-align: center;
    }

    .workflow-node.end {
        border-color: #fee140;
        background: linear-gradient(135deg, #fffef0 0%, #fffce6 100%);
    }
    
    .node-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
        font-weight: 600;
        padding-bottom: 0.4rem;
        border-bottom: 1px solid rgba(44, 62, 80, 0.08);
    }

    .node-header span {
        color: #243b53;
        font-size: 0.92rem;
    }
    
    .node-icon {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
    }
    
    .node-icon.start { background: #28a745; color: white; }
    .node-icon.form { background: #667eea; color: white; }
    .node-icon.workflow_settings { background: #6c757d; color: white; }
    .node-icon.stage { background: #e83e8c; color: white; }
    .node-icon.approval_config { background: #ffc107; color: #333; }
    .node-icon.approval { background: #f5576c; color: white; }
    .node-icon.condition { background: #00f2fe; color: white; }
    .node-icon.action { background: #38f9d7; color: white; }
    .node-icon.email { background: #2bd2ff; color: white; }
    .node-icon.sub_workflow { background: #a18cd1; color: white; }
    .node-icon.join { background: #6c757d; color: white; }
    .node-icon.end { background: #fee140; color: #333; }
    
    .node-content {
        font-size: 0.875rem;
        color: #52606d;
        line-height: 1.45;
        min-height: 1.5rem;
    }

    .node-content .badge {
        margin-bottom: 0.35rem;
    }

    .workflow-node.stage .node-content,
    .workflow-node.sub_workflow .node-content {
        color: #3e4c59;
    }
    
    .node-actions {
        margin-top: 0.75rem;
        display: flex;
        gap: 0.5rem;
    }
    
    .node-actions button {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    
    /* Connection Points */
    .connection-point {
        width: 12px;
        height: 12px;
        background: #667eea;
        border: 2px solid white;
        border-radius: 50%;
        position: absolute;
        cursor: crosshair;
        transition: all 0.2s;
        z-index: 100;
    }

    .connection-point:hover {
        background: #28a745;
        transform: translateY(-50%) scale(1.3);
        box-shadow: 0 0 8px rgba(40, 167, 69, 0.5);
    }

    .connection-point.input {
        left: -6px;
        top: 50%;
        transform: translateY(-50%);
    }

    .connection-point.output {
        right: -6px;
        top: 50%;
        transform: translateY(-50%);
    }

    .connection-point.output:hover {
        background: #667eea;
        box-shadow: 0 0 8px rgba(102, 126, 234, 0.5);
    }

    .workflow-node.stage .connection-point.directional-handle,
    .workflow-node.sub_workflow .connection-point.directional-handle {
        width: 26px;
        height: 26px;
        border-radius: 999px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: 2px solid #fff;
        box-shadow: 0 3px 10px rgba(102, 126, 234, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .workflow-node.stage .connection-point.directional-handle::before,
    .workflow-node.sub_workflow .connection-point.directional-handle::before {
        color: #fff;
        font-size: 0.9rem;
        font-weight: 700;
        line-height: 1;
    }

    .workflow-node.stage .connection-point.input.directional-handle,
    .workflow-node.sub_workflow .connection-point.input.directional-handle {
        left: -13px;
    }

    .workflow-node.stage .connection-point.output.directional-handle,
    .workflow-node.sub_workflow .connection-point.output.directional-handle {
        right: -13px;
    }

    .workflow-node.stage .connection-point.input.directional-handle::before,
    .workflow-node.sub_workflow .connection-point.input.directional-handle::before {
        content: '←';
    }

    .workflow-node.stage .connection-point.output.directional-handle::before,
    .workflow-node.sub_workflow .connection-point.output.directional-handle::before {
        content: '→';
    }

    .workflow-node.stage .connection-point.directional-handle:hover,
    .workflow-node.sub_workflow .connection-point.directional-handle:hover {
        background: linear-gradient(135deg, #5568d3 0%, #653a8b 100%);
        transform: translateY(-50%) scale(1.08);
        box-shadow: 0 6px 14px rgba(102, 126, 234, 0.3);
    }
    
    /* SVG Connections */
    .connections-svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 5;
    }

    .connections-svg * {
        pointer-events: auto;
    }

    .workflow-node {
        z-index: 10;
    }
    
    .connection-line {
        stroke: #667eea;
        stroke-width: 2.5;
        fill: none;
        marker-end: url(#arrowhead);
        cursor: pointer;
        transition: all 0.2s;
        pointer-events: stroke;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .connection-backdrop {
        stroke: rgba(102, 126, 234, 0.14);
        stroke-width: 8;
        fill: none;
        pointer-events: none;
        stroke-linecap: round;
    }

    .connection-hitbox {
        stroke: transparent;
        stroke-width: 14;
        fill: none;
        pointer-events: stroke;
    }

    .connection-line.hovered,
    .connection-line:hover {
        stroke: #dc3545;
        stroke-width: 3;
    }

    .connection-backdrop.hovered {
        stroke: rgba(220, 53, 69, 0.16);
    }

    .connection-backdrop.selected {
        stroke: rgba(220, 53, 69, 0.2);
        stroke-width: 10;
    }

    .connection-line.selected {
        stroke: #f5576c;
        stroke-width: 3;
    }
    
    /* Properties Panel */
    .properties-panel {
        width: 320px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        padding: 1.5rem;
        overflow-y: auto;
    }
    
    .properties-header {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 1rem;
        color: #2c3e50;
    }
    
    .properties-empty {
        text-align: center;
        color: #6c757d;
        padding: 2rem 0;
    }

    /* Properties Panel Form Controls */
    .properties-panel .form-select[multiple] {
        min-height: 120px;
        padding: 0.5rem;
        overflow-y: auto;
        width: 100%;
        background-color: #fff;
        color: #212529;
        border-color: #ced4da;
    }

    .properties-panel .form-control,
    .properties-panel .form-select,
    .properties-panel textarea,
    .properties-panel input[type="text"],
    .properties-panel input[type="number"],
    .properties-panel input[type="time"] {
        background-color: #fff !important;
        color: #212529 !important;
        border-color: #ced4da;
    }

    .properties-panel .form-control::placeholder,
    .properties-panel textarea::placeholder {
        color: #6c757d;
        opacity: 1;
    }

    .properties-panel .form-control:focus,
    .properties-panel .form-select:focus,
    .properties-panel textarea:focus,
    .properties-panel input[type="text"]:focus,
    .properties-panel input[type="number"]:focus,
    .properties-panel input[type="time"]:focus {
        background-color: #fff !important;
        color: #212529 !important;
        border-color: #86b7fe;
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
    }

    .properties-panel .form-check-input {
        background-color: #fff;
        border-color: #adb5bd;
    }

    .properties-panel .form-check-input:checked {
        background-color: #667eea;
        border-color: #667eea;
    }

    .properties-panel .card,
    .properties-panel .list-group-item,
    .properties-panel .trigger-condition-row,
    .properties-panel .notification-rule-card {
        background: #fff;
        color: #212529;
        border-color: #dee2e6;
    }

    .properties-panel .card .text-muted,
    .properties-panel .list-group-item .text-muted,
    .properties-panel .trigger-condition-row .text-muted {
        color: #6c757d !important;
    }

    .properties-panel .btn-outline-secondary,
    .properties-panel .btn-outline-primary,
    .properties-panel .btn-outline-danger {
        background-color: #fff;
    }

    .properties-panel .alert {
        border-radius: 12px;
    }

    .property-section {
        border: 1px solid #e7ebf0;
        border-radius: 14px;
        background: linear-gradient(180deg, #fbfcfe 0%, #ffffff 100%);
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
        margin-bottom: 1rem;
        overflow: hidden;
    }

    .property-section-header {
        padding: 0.85rem 1rem 0.6rem;
        background: linear-gradient(180deg, rgba(102, 126, 234, 0.06) 0%, rgba(102, 126, 234, 0.02) 100%);
        border-bottom: 1px solid #eef2f7;
    }

    .property-section-header h6 {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.88rem;
        font-weight: 700;
        color: #334e68;
        border: 0;
        padding: 0;
    }

    .property-section-description {
        margin: 0.35rem 0 0;
        font-size: 0.78rem;
        line-height: 1.45;
        color: #627d98;
    }

    .property-section-body {
        padding: 0.95rem 1rem 1rem;
    }

    .property-section-body .mb-3:last-child,
    .property-section-body .row.g-2:last-child,
    .property-section-body .list-group:last-child {
        margin-bottom: 0 !important;
    }

    .properties-panel h6 {
        font-size: 0.85rem;
        font-weight: 700;
        color: #486581;
        margin-bottom: 0.65rem;
    }

    .properties-panel hr {
        margin: 1rem 0;
        border-color: #edf2f7;
        opacity: 1;
    }

    .properties-panel .form-select[multiple] option {
        padding: 0.5rem 0.75rem;
        border-radius: 4px;
        margin-bottom: 2px;
        cursor: pointer;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        line-height: 1.4;
        min-height: 2.5rem;
        display: block;
        background: #fff;
        color: #212529;
    }

    .properties-panel .form-select[multiple] option:checked {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        color: white !important;
        font-weight: 500;
        box-shadow: none !important;
    }

    .properties-panel .form-select[multiple] option:hover {
        background: #f0f3ff;
    }

    .properties-panel .form-select[multiple] option:checked:hover {
        background: linear-gradient(135deg, #5568d3 0%, #653a8b 100%) !important;
    }

    /* Override Bootstrap default select styling */
    .properties-panel select[multiple] {
        background-image: none;
        padding-right: 0.75rem;
    }

    /* Regular select dropdowns in properties panel */
    .properties-panel .form-select:not([multiple]) {
        width: 100%;
        padding: 0.5rem 2.5rem 0.5rem 0.75rem;
        height: auto;
        min-height: 38px;
        line-height: 1.5;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        display: flex;
        align-items: center;
    }

    .properties-panel .form-select:not([multiple]) option {
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding: 0.5rem;
        line-height: 1.5;
    }

    /* Toolbar */
    .workflow-toolbar {
        display: flex;
        gap: 0.5rem;
    }
    
    .toolbar-btn {
        background: rgba(255,255,255,0.2);
        border: 1px solid rgba(255,255,255,0.3);
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .toolbar-btn:hover {
        background: rgba(255,255,255,0.3);
    }

    .toolbar-btn-sm {
        padding: 0.3rem 0.5rem;
        font-size: 0.85rem;
    }

    .zoom-controls {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        margin-right: 0.75rem;
        background: rgba(0,0,0,0.15);
        border-radius: 6px;
        padding: 0.15rem 0.35rem;
    }

    .zoom-level {
        color: rgba(255,255,255,0.9);
        font-size: 0.8rem;
        min-width: 3rem;
        text-align: center;
        font-weight: 500;
    }

    .save-status {
        color: rgba(255,255,255,0.8);
        font-size: 0.875rem;
    }

    .save-status[data-tone="success"] { color: #d1f7dd; }
    .save-status[data-tone="danger"] { color: #ffd6d6; }
    .save-status[data-tone="info"] { color: #d9ecff; }
    .save-status[data-tone="warning"] { color: #ffe7b3; }

    .dirty-indicator {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.25rem 0.6rem;
        border-radius: 999px;
        background: rgba(255, 193, 7, 0.18);
        border: 1px solid rgba(255, 193, 7, 0.35);
        color: #fff3cd;
        font-size: 0.8rem;
        font-weight: 600;
    }

    .dirty-indicator[hidden] {
        display: none;
    }

    .builder-status-panels {
        padding: 0.75rem 1.5rem 0;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .builder-help-strip {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .builder-help-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.35rem 0.7rem;
        border-radius: 999px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        color: #475569;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .builder-selection-status .alert {
        border-radius: 12px;
        border-color: rgba(13, 110, 253, 0.18);
        background: #f7fbff;
    }

    .validation-summary ul,
    #builderMessage ul {
        padding-left: 1.1rem;
    }

    .node-issue-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .toolbar-btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }
</style>
{% endblock %}

{% block content %}
<div class="workflow-builder-container">
    <!-- Node Palette -->
    <div class="node-palette">
        <div class="palette-header">
            <i class="bi bi-box"></i> Workflow Nodes
        </div>

        <div class="palette-node stage" draggable="true" data-node-type="stage">
            <i class="bi bi-layers"></i>
            <span>Approval Stage</span>
        </div>

        <div class="palette-node action" draggable="true" data-node-type="action">
            <i class="bi bi-lightning"></i>
            <span>Action</span>
        </div>

        <div class="palette-node email" draggable="true" data-node-type="email">
            <i class="bi bi-envelope"></i>
            <span>Email</span>
        </div>

        <div class="palette-node sub_workflow" draggable="true" data-node-type="sub_workflow">
            <i class="bi bi-diagram-2"></i>
            <span>Sub-Workflow</span>
        </div>

        <div class="palette-node end" draggable="true" data-node-type="end">
            <i class="bi bi-flag"></i>
            <span>End</span>
        </div>
    </div>
    
    <!-- Workflow Canvas -->
    <div class="workflow-canvas-container">
        <div class="canvas-header">
            <div>
                <h5 class="mb-0">{{ form_definition.name }} - {{ selected_workflow_label }}</h5>
                <small class="text-muted">
                    Visual workflow builder •
                    {% if workflow_id %}
                    <a href="{% url 'admin:django_forms_workflows_workflowdefinition_change' workflow_id %}" target="_blank" style="color: #667eea;">
                        <i class="bi bi-gear"></i> Advanced Settings
                    </a>
                    {% endif %}
                </small>
                {% if workflow_count > 1 %}
                <div class="mt-2" style="max-width: 360px;">
                    <label for="workflowTrackSelect" class="form-label form-label-sm mb-1 text-white-50">Workflow track</label>
                    <select class="form-select form-select-sm" id="workflowTrackSelect">
                        {% for track in workflow_tracks %}
                        <option value="{{ track.id }}" {% if track.id == workflow_id %}selected{% endif %}>{{ track.label }}</option>
                        {% endfor %}
                    </select>
                    <small class="text-white-50">Existing tracks can be edited one at a time.</small>
                </div>
                {% endif %}
            </div>
            <div class="workflow-toolbar">
                <div class="zoom-controls">
                    <button class="toolbar-btn toolbar-btn-sm" onclick="workflowBuilder.setZoom(workflowBuilder.zoom - 0.1)" title="Zoom out">
                        <i class="bi bi-dash-lg"></i>
                    </button>
                    <span class="zoom-level" id="zoomLevel">100%</span>
                    <button class="toolbar-btn toolbar-btn-sm" onclick="workflowBuilder.setZoom(workflowBuilder.zoom + 0.1)" title="Zoom in">
                        <i class="bi bi-plus-lg"></i>
                    </button>
                    <button class="toolbar-btn toolbar-btn-sm" onclick="workflowBuilder.resetView()" title="Reset view">
                        <i class="bi bi-arrows-fullscreen"></i>
                    </button>
                </div>
                <span class="save-status" id="saveStatus">Ready</span>
                <span class="dirty-indicator" id="dirtyIndicator" hidden>
                    <i class="bi bi-dot"></i> Unsaved edits
                </span>
                <button class="toolbar-btn" id="btnDeleteConnection" disabled>
                    <i class="bi bi-scissors"></i> Remove Connection
                </button>
                <button class="toolbar-btn" id="btnSave">
                    <i class="bi bi-save"></i> Save Workflow
                </button>
                <button class="toolbar-btn" id="btnBack" onclick="window.location.href='{% url 'admin:django_forms_workflows_formdefinition_change' form_id %}'">
                    <i class="bi bi-arrow-left"></i> Back
                </button>
            </div>
        </div>
        <div class="builder-status-panels">
            <div id="builderMessage"></div>
            <div id="validationSummary"></div>
            <div class="builder-help-strip" id="builderHelpStrip">
                <span class="builder-help-chip"><i class="bi bi-arrow-left-right"></i> Drag from the right arrow handle into a left arrow handle to connect steps</span>
                <span class="builder-help-chip"><i class="bi bi-exclamation-triangle"></i> Red nodes block save; orange nodes are warnings</span>
                <span class="builder-help-chip"><i class="bi bi-scissors"></i> Click a connection, then press Delete or use Remove Connection</span>
            </div>
            <div id="selectionStatus" class="builder-selection-status"></div>
        </div>
        <div class="workflow-canvas" id="workflowCanvas">
            <svg class="connections-svg" id="connectionsSvg">
                <defs>
                    <marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
                        <polygon points="0 0, 10 3, 0 6" fill="#667eea" />
                    </marker>
                </defs>
            </svg>
        </div>
    </div>
    
    <!-- Properties Panel -->
    <div class="properties-panel">
        <div class="properties-header">
            <i class="bi bi-sliders"></i> Properties
        </div>
        <div id="propertiesContent">
            <div class="properties-empty">
                <i class="bi bi-info-circle" style="font-size: 2rem; color: #dee2e6;"></i>
                <p>Select a node to edit its properties</p>

                <hr class="my-4" />

                <div class="text-start">
                    <h6><i class="bi bi-info-circle"></i> Visual Builder Scope</h6>
                    <p class="small text-muted mb-2">This visual builder configures:</p>
                    <ul class="small text-muted">
                        <li>Approval stages and stage routing basics</li>
                        <li>Workflow/stage trigger conditions</li>
                        <li>Notification rules and cadence</li>
                        <li>Approval-group ordering and approval-only fields</li>
                        <li>Post-submission actions</li>
                        <li>Email actions</li>
                        <li>Sub-workflow configuration</li>
                    </ul>

                    <p class="small text-muted mb-2 mt-3">For advanced settings, use the
                        {% if workflow_id %}
                        <a href="{% url 'admin:django_forms_workflows_workflowdefinition_change' workflow_id %}" target="_blank">
                            Admin Panel
                        </a>
                        {% else %}
                        Admin Panel
                        {% endif %}:
                    </p>
                    <ul class="small text-muted">
                        <li>Any advanced configuration not shown in the builder</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extrahead %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="{% static 'django_forms_workflows/js/workflow-builder.js' %}"></script>
<script>
    const WORKFLOW_CONFIG = {
        formId: {{ form_id }},
        currentWorkflowId: {{ workflow_id }},
        workflowBuilderUrl: '{% url "admin:workflow_builder" form_id %}',
        csrfToken: '{{ csrf_token }}',
        apiUrls: {
            load: '{% url "admin:workflow_builder_load" form_id %}?workflow_id={{ workflow_id }}',
            save: '{% url "admin:workflow_builder_save" %}',
        }
    };

    document.addEventListener('DOMContentLoaded', function() {
        console.log('DOM loaded, initializing workflow builder...');
        console.log('WORKFLOW_CONFIG:', WORKFLOW_CONFIG);
        window.workflowBuilder = new WorkflowBuilder(WORKFLOW_CONFIG);
    });
</script>
{% endblock %}