{#
/**
 * @file
 * FlowDrop Workflow Editor Component
 *
 * A visual workflow editor that provides a drag-and-drop interface for
 * creating and editing node-based workflows.
 *
 * Available variables:
 * - workflow: Initial workflow data object (id, name, nodes, edges, metadata)
 * - endpoint_config: API endpoint configuration for CRUD operations
 * - editor_id: Unique identifier for the editor instance
 * - container_class: Additional CSS class(es) for the container
 * - height: Editor height CSS value (default: "100%")
 * - width: Editor width CSS value (default: "100%")
 * - show_navbar: Whether to show the navigation bar (default: true)
 * - navbar_title: Title for the navigation bar
 * - back_url: URL for the back button (default: "/admin/flowdrop/workflows")
 * - show_save_button: Show save button in navbar (default: true)
 * - show_back_button: Show back button in navbar (default: true)
 * - enable_keyboard_shortcuts: Enable Ctrl+S etc. (default: true)
 * - attributes: Additional HTML attributes for the container
 *
 * @example
 * {{ include('flowdrop_ui_components:editor', {
 *   workflow: {
 *     id: 'my-workflow',
 *     name: 'My Workflow',
 *     nodes: [],
 *     edges: [],
 *     metadata: {}
 *   },
 *   endpoint_config: {
 *     baseUrl: '/api/flowdrop',
 *     endpoints: { ... }
 *   },
 *   editor_id: 'workflow-editor-1',
 *   show_navbar: true,
 *   navbar_title: 'Edit Workflow'
 * }) }}
 */
#}

{% set editor_id = editor_id|default('flowdrop-editor-' ~ random()) %}
{% set height = height|default('100%') %}
{% set width = width|default('100%') %}
{% set show_navbar = show_navbar is not defined ? true : show_navbar %}
{% set show_save_button = show_save_button is not defined ? true : show_save_button %}
{% set show_back_button = show_back_button is not defined ? true : show_back_button %}
{% set enable_keyboard_shortcuts = enable_keyboard_shortcuts is not defined ? true : enable_keyboard_shortcuts %}
{% set back_url = back_url|default('/admin/flowdrop/workflows') %}

{# Build container classes #}
{% set classes = [
  'fd-editor',
  'fd-editor-container',
  'flowdrop-editor-container',
  container_class
]|filter(v => v)|join(' ') %}

{# Merge attributes with defaults #}
{% set container_attributes = attributes|default(create_attribute()) %}
{% set container_attributes = container_attributes.addClass(classes) %}
{% set container_attributes = container_attributes.setAttribute('id', editor_id) %}
{% set container_attributes = container_attributes.setAttribute('data-flowdrop-editor', '') %}
{% set container_attributes = container_attributes.setAttribute('style', 'height: ' ~ height ~ '; width: ' ~ width ~ ';') %}

{# Pass configuration as data attributes #}
{% if workflow %}
  {% set container_attributes = container_attributes.setAttribute('data-workflow', workflow|json_encode) %}
{% endif %}
{% if endpoint_config %}
  {% set container_attributes = container_attributes.setAttribute('data-endpoint-config', endpoint_config|json_encode) %}
{% endif %}
{% set container_attributes = container_attributes.setAttribute('data-show-navbar', show_navbar ? 'true' : 'false') %}
{% if navbar_title %}
  {% set container_attributes = container_attributes.setAttribute('data-navbar-title', navbar_title) %}
{% endif %}
{% set container_attributes = container_attributes.setAttribute('data-back-url', back_url) %}
{% if playground_url %}
  {% set container_attributes = container_attributes.setAttribute('data-playground-url', playground_url) %}
{% endif %}
{% set container_attributes = container_attributes.setAttribute('data-show-save-button', show_save_button ? 'true' : 'false') %}
{% set container_attributes = container_attributes.setAttribute('data-show-back-button', show_back_button ? 'true' : 'false') %}
{% set container_attributes = container_attributes.setAttribute('data-enable-keyboard-shortcuts', enable_keyboard_shortcuts ? 'true' : 'false') %}

{# Render the editor container - JavaScript will mount the Svelte component here #}
<div{{ container_attributes }}>
  {# Loading state shown before JavaScript initializes #}
  <div class="fd-editor__loading">
    <div class="fd-editor__loading-content">
      <span class="fd-editor__loading-spinner"></span>
      <span class="fd-editor__loading-text">Loading workflow editor...</span>
    </div>
  </div>
</div>
