{#
/**
 * @file
 * FlowDrop Playground Component Template
 *
 * An interactive playground for testing FlowDrop workflows with a
 * chat-like interface.
 *
 * Available variables:
 * - workflow: Workflow data object.
 * - endpoint_config: API endpoint configuration.
 * - container_id: Unique ID for the playground container.
 * - height: Container height (CSS value).
 * - width: Container width (CSS value).
 * - back_url: URL for back navigation.
 * - workflow_name: Display name of the workflow.
 * - show_header: Whether to display the header (default: true).
 * - initial_session_id: Session ID (UUID) to auto-select when playground loads.
 * - show_chat_input: Whether to show the text input (default: true).
 * - show_run_button: Whether to show the Run button (default: true).
 * - predefined_message: Custom message for Run button click.
 * - auto_run: Auto-execute workflow on load (default: false).
 * - initial_pipeline_open: Whether the pipeline panel starts open (default: true).
 * - attributes: Additional HTML attributes.
 */
#}
{% set show_navbar = show_navbar is not defined ? false : show_navbar %}
{% set show_header = show_navbar ? false : (show_header is not defined ? true : show_header) %}
{% set header_height = show_header ? '56px' : '0px' %}
{%
  set classes = [
    'fd-playground',
    'fd-fullscreen-layout',
    show_header ? 'fd-playground--with-header' : '',
    show_navbar ? 'fd-playground--with-navbar' : '',
  ]
%}

<div{{ attributes.addClass(classes) }}
  id="{{ container_id|default('flowdrop-playground') }}"
  data-flowdrop-playground
  data-workflow="{{ workflow|json_encode|e('html_attr') }}"
  data-endpoint-config="{{ endpoint_config|json_encode|e('html_attr') }}"
  data-mode="{{ mode|default('standalone') }}"
  data-back-url="{{ back_url|default('/admin/flowdrop/workflows') }}"
  data-workflow-name="{{ workflow_name|default('Workflow') }}"
  data-show-navbar="{{ show_navbar ? 'true' : 'false' }}"
  {% if navbar_tasks %}data-navbar-tasks="{{ navbar_tasks|json_encode|e('html_attr') }}"{% endif %}
  {% if navbar_actions %}data-navbar-actions="{{ navbar_actions|json_encode|e('html_attr') }}"{% endif %}
  data-navbar-title="{{ navbar_title|default(workflow_name)|default('Workflow') }}"
  {% if ui_config %}data-ui-config="{{ ui_config|e('html_attr') }}"{% endif %}
  {% if initial_session_id %}data-initial-session-id="{{ initial_session_id }}"{% endif %}
  {% if show_chat_input is defined %}data-show-chat-input="{{ show_chat_input ? 'true' : 'false' }}"{% endif %}
  {% if show_run_button is defined %}data-show-run-button="{{ show_run_button ? 'true' : 'false' }}"{% endif %}
  {% if show_session_header is defined %}data-show-session-header="{{ show_session_header ? 'true' : 'false' }}"{% endif %}
  {% if show_new_session_button is defined %}data-show-new-session-button="{{ show_new_session_button ? 'true' : 'false' }}"{% endif %}
  {% if show_session_list is defined %}data-show-session-list="{{ show_session_list ? 'true' : 'false' }}"{% endif %}
  {% if predefined_message %}data-predefined-message="{{ predefined_message }}"{% endif %}
  {% if auto_run %}data-auto-run="true"{% endif %}
  {% if initial_pipeline_open is defined and not initial_pipeline_open %}data-initial-pipeline-open="false"{% endif %}
  {% if height or width %}style="{% if height %}height: {{ height }};{% endif %}{% if width %} width: {{ width }};{% endif %}"{% endif %}>

  {# Header with back navigation - shown for standalone mode by default #}
  {% if show_header and mode|default('standalone') != 'modal' %}
  <header class="fd-playground__header">
    <div class="fd-playground__header-start">
      {# Back button - links to workflow listing #}
      <a href="{{ back_url|default('/admin/flowdrop/workflows') }}" class="fd-playground__back-btn" title="Back to Workflows">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M19 12H5"/>
          <path d="M12 19l-7-7 7-7"/>
        </svg>
      </a>
      
      {# Divider #}
      <div class="fd-playground__header-divider"></div>
      
      {# Workflow name #}
      <div class="fd-playground__workflow-info">
        <span class="fd-playground__workflow-label">Playground</span>
        <h1 class="fd-playground__workflow-name">{{ workflow_name|default('Workflow') }}</h1>
      </div>
    </div>
    
    <div class="fd-playground__header-end">
      {# Edit workflow button - links to workflow editor #}
      <a href="{{ editor_url|default(back_url|default('/admin/flowdrop/workflows')) }}" class="fd-playground__action-btn" title="Edit Workflow">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
        </svg>
        <span>Edit Workflow</span>
      </a>
    </div>
  </header>
  {% endif %}

  {# Loading state for non-modal modes. When show_navbar is true the Svelte
     app mounts directly into this container, so the loading indicator lives
     here at the top level. When show_navbar is false it lives inside the
     .fd-playground__content wrapper (for correct dark-header layout). #}
  {% if show_navbar %}
    {% if mode|default('standalone') != 'modal' %}
    <div class="fd-playground__loading">
      <div class="fd-playground__loading-spinner">
        <svg class="fd-playground__spinner-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="31.416" stroke-dashoffset="10" stroke-linecap="round"/>
        </svg>
      </div>
      <p class="fd-playground__loading-text">Loading Playground...</p>
    </div>
    {% endif %}
  {% else %}
  {# Main playground container — only needed when using the dark header #}
  <div class="fd-playground__content" style="height: calc(100% - {{ header_height }});">
    {% if mode|default('standalone') != 'modal' %}
    <div class="fd-playground__loading">
      <div class="fd-playground__loading-spinner">
        <svg class="fd-playground__spinner-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="31.416" stroke-dashoffset="10" stroke-linecap="round"/>
        </svg>
      </div>
      <p class="fd-playground__loading-text">Loading Playground...</p>
    </div>
    {% endif %}
  </div>
  {% endif %}

</div>
