<!-- Standalone Chatbot -->
<div class="vf-content vf-chatbot-standalone-container"
     data-vf-js-chatbot-standalone-container
     data-vf-chatbot-config="{{ config | dump | escape }}">

  <div class="vf-chatbot-standalone__header">
    <div class="vf-chatbot-standalone__header-left">
      {% if config.selectorContext %}
        {% render "@vf-chatbot-selector", config.selectorContext %}
      {% else %}
        <div class="vf-chatbot-selector">
          <div class="vf-chatbot-selector__title">
            <img src="{{ config.selectorContext.selector_logo_url }}" alt="{{ config.selectorContext.selector_logo_title }}">
            <div class="vf-chatbot-selector__title-content">
              <span class="vf-chatbot-selector__main-text">{{ config.selectorContext.selector_logo_title }}</span>
            </div>
          </div>
        </div>
      {% endif %}
    </div>
  </div>

  <div class="vf-chatbot-standalone | vf-u-background-color-ui--grey--light vf-u-margin__bottom--400" data-vf-js-chatbot-standalone>
    <div class="vf-chatbot-standalone__content" data-vf-js-chatbot-standalone-content>

      <!-- Welcome Screen -->
      {% if config.features.enable_welcome %}
        {% render "@vf-chatbot-welcome", {
          welcome_logo: config.welcome_logo,
          welcome_logo_url: config.icons.main_logo_url,
          welcome_logo_alt: config.welcome_logo_alt,
          welcome_title: config.title,
          welcome_message: config.welcome_message,
          welcome_suggestions_title: config.welcome_suggestions_title,
          enable_welcome_suggestions: config.features.enable_welcome_suggestions,
          welcome_max_suggestions: config.welcome_max_suggestions,
          qa_data_url: config.api.qa_data_url,
          enable_welcome_suggestions: config.features.enable_welcome_suggestions,
          enable_qa_data_loading: config.features.enable_qa_data_loading,
          enable_predefined_qa: config.features.enable_predefined_qa,
          enable_fallback_responses: config.features.enable_fallback_responses
        } %}
      {% endif %}

      <!-- Messages Container -->
      <div class="{{ 'vf-chatbot-standalone__messages-no-scrollbar' if config.behavior.show_scrollbar == false  else 'vf-chatbot-standalone__messages'}}"           data-vf-js-chatbot-standalone-messages
           data-auto-scroll="{{ config.behavior.auto_scroll }}">
        <!-- Messages will be added here dynamically -->
      </div>

      <!-- Disclaimer Banner -->
      {% if config.disclaimer and config.features.enable_disclaimer %}
        <div class="vf-chatbot-standalone__disclaimer" data-vf-js-chatbot-standalone-disclaimer>
          <div class="vf-banner vf-banner--alert vf-banner--info">
            <div class="vf-banner__content">
              <p class="vf-banner__text">{{ config.disclaimer | safe }}</p>
              <button role="button" aria-label="close notification banner"
                      class="vf-button vf-button--icon vf-button--dismiss | vf-banner__button">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                  <title>dismiss banner</title>
                  <path d="M14.3,12.179a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.442L12.177,9.7a.25.25,0,0,1-.354,0L2.561.442A1.5,1.5,0,0,0,.439,2.563L9.7,11.825a.25.25,0,0,1,0,.354L.439,21.442a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,0,0,2.122-2.121Z"/>
                </svg>
              </button>
            </div>
          </div>
        </div>
      {% endif %}
    </div>

    <!-- Input Container -->
    <div class="vf-chatbot-standalone__input-container">
      <div class="vf-chatbot-standalone__input-wrapper">
        <label class="vf-u-sr-only"
          id="vf-chatbot-standalone-input-label"
          for="vf-chatbot-standalone-input">Ask me</label>
        <textarea
          id="vf-chatbot-standalone-input"
          aria-labelledby="vf-chatbot-standalone-input-label"
          class="vf-chatbot-standalone__input vf-form__textarea vf-u-padding__left--400"
          placeholder="{{ config.input_placeholder }}"
          rows="1"
          data-vf-js-chatbot-standalone-input
        ></textarea>
        <button
          class="vf-chatbot-standalone__send-button"
          aria-label="Send message"
          data-vf-js-chatbot-standalone-send
        >
          <img src="{{ config.icons.send_button }}" alt="Send">
        </button>
      </div>

      {% if config.footnote %}
      <div class="vf-chatbot-standalone__footnote vf-u-margin__top--200" data-vf-js-chatbot-standalone-footnote>
        {{ config.footnote }}
      </div>
      {% endif %}
    </div>

    <!-- Templates -->
    {% if config.features.enable_feedback %}
    <template id="feedback-positive-template">
      {% render "@vf-chatbot-feedback--positive" %}
    </template>
    <template id="feedback-negative-template">
      {% render "@vf-chatbot-feedback--negative" %}
    </template>
    {% endif %}

    <template id="user-message-template">
      {% render "@vf-chatbot-prompt", {
        type: "user",
        avatar: {
          src: config.icons.user_avatar,
          alt: "You",
          name: "You"
        },
        content: "Hello!"
      } %}
    </template>

    <template id="assistant-message-template">
      {% render "@vf-chatbot-prompt", {
        type: "assistant",
        avatar: {
          src: config.icons.assistant_avatar,
          alt: config.title,
          name: config.title
        },
        content: "How can I help you?",
        sources: sources,
        prompts: prompts,
        allowFeedback: config.features.enable_feedback
      } %}
    </template>

    {% if config.features.enable_typing_indicator %}
    <template id="loading-indicator-template">
      {% render "@vf-chatbot-prompt", {
        type: "assistant",
        isLoading: true,
        avatar: {
          src: config.icons.assistant_avatar,
          alt: config.title,
          name: config.title
        }
      } %}
    </template>
    {% endif %}

    <template id="action-prompts-template">
      <div class="vf-chatbot-action-prompts vf-u-margin__top--400">
        <div class="vf-chatbot-action-prompts__list" data-vf-js-action-prompts-list>
          <!-- Individual prompts will be populated here -->
        </div>
      </div>
    </template>

    <template id="single-action-prompt-template">
      {% render "@vf-chatbot-action-prompt", {
        action_text: "",
        action_url: "#"
      } %}
    </template>
  </div>
</div>
