{#
/**
 * @file
 * FlowDrop Schema Form Component
 *
 * A dynamic JSON Schema-driven form component that renders forms based on
 * JSON Schema definitions with validation and interactive field types.
 *
 * Available variables:
 * - schema: (required) The JSON Schema object defining the form structure
 * - values: The current form values as a key-value object (default: {})
 * - form_id: Unique identifier for the form instance
 * - container_class: Additional CSS class(es) for the form container
 * - enable_code_editor: Register code editor field type (default: false)
 * - show_actions: Whether to show Save/Cancel buttons (default: false)
 * - save_label: Label for save button (default: "Save")
 * - cancel_label: Label for cancel button (default: "Cancel")
 * - attributes: Additional HTML attributes for the container
 *
 * @example
 * {{ include('flowdrop_ui_components:schema-form', {
 *   schema: {
 *     type: 'object',
 *     properties: {
 *       name: { type: 'string', title: 'Name' },
 *       email: { type: 'string', format: 'email', title: 'Email' }
 *     },
 *     required: ['name', 'email']
 *   },
 *   values: { name: '', email: '' },
 *   form_id: 'contact-form',
 *   enable_code_editor: false,
 *   show_actions: true
 * }) }}
 */
#}

{% set form_id = form_id|default('schema-form-' ~ random()) %}
{% set values = values|default({}) %}
{% set enable_code_editor = enable_code_editor|default(false) %}
{% set show_actions = show_actions|default(false) %}
{% set save_label = save_label|default('Save') %}
{% set cancel_label = cancel_label|default('Cancel') %}

{# Build container classes #}
{% set classes = [
  'fd-schema-form',
  'fd-schema-form-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', form_id) %}
{% set container_attributes = container_attributes.setAttribute('data-schema-form', '') %}
{% set container_attributes = container_attributes.setAttribute('data-schema', schema|json_encode) %}
{% set container_attributes = container_attributes.setAttribute('data-values', values|json_encode) %}
{% if enable_code_editor %}
  {% set container_attributes = container_attributes.setAttribute('data-enable-code-editor', 'true') %}
{% endif %}
{% if show_actions %}
  {% set container_attributes = container_attributes.setAttribute('data-show-actions', 'true') %}
  {% set container_attributes = container_attributes.setAttribute('data-save-label', save_label) %}
  {% set container_attributes = container_attributes.setAttribute('data-cancel-label', cancel_label) %}
{% endif %}

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