{% set llm_selector = {
  chatbotRoutes: {
    multiSelect: false,
    showSearch: false,
    routes: "../../assets/vf-chatbot/assets/vf-chatbot-selector-llms.json",
    title: "LLMs"
  }
} %}
{% set services_single_selector = {
  chatbotRoutes: {
    multiSelect: false,
    showSearch: true,
    showSearchThreshold: 5,
    routes: "../../assets/vf-chatbot/assets/vf-chatbot-selector-services.json",
    title: "Services"
  }
} %}
{% set services_multi_selector = {
  chatbotRoutes: {
    multiSelect: true,
    maxMultiSelect: 3,
    showSearch: true,
    showSearchThreshold: 5,
    showAllServices: true,
    showAllServicesSelected: true,
    routes: "../../assets/vf-chatbot/assets/vf-chatbot-selector-services.json",
    placeholder: "Select services",
    title: "Services"
  }
} %}
{# {% set selectorContext = llm_selector %} #}
{# {% set selectorContext = services_single_selector %} #}
{% set selectorContext = services_multi_selector %}
<!-- Standalone Chatbot -->
<div class="vf-content vf-chatbot-standalone-container" data-vf-js-chatbot-standalone-container>
  <div class="vf-chatbot-standalone__header">
    <div class="vf-chatbot-standalone__header-left">
      {% if selectorContext %}
        {% render "@vf-chatbot-selector", selectorContext %}
      {% else %}
        <div class="vf-chatbot-selector">
          <div class="vf-chatbot-selector__title">
            <img src="../../assets/vf-chatbot/assets/vf-chatbot--icon-32x32-dark-green.svg" alt="AI Assistant">
            <div class="vf-chatbot-selector__title-content">
              <span class="vf-chatbot-selector__main-text">AI Assistant</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>

      <!-- Chat interface -->
      <!-- Initial welcome message from the assistant -->
      {% if welcome_message %}
        {% render "@vf-chatbot-welcome", {
          welcome_title: welcome_title,
          welcome_description: "Welcome! I'm here to help",
          welcome_message: 'Hello! How can I help you today?',
          maxQuestions: 3
        } %}
      {% endif %}
      <!-- Messages container -->
      <div class="vf-chatbot-standalone__messages vf-u-padding__right--400" data-vf-js-chatbot-standalone-messages>
        <!-- Messages will be added here dynamically -->
        <!-- Loading indicator will be inserted here when needed -->
      </div>
      {% if disclaimer %}
        <div class="vf-chatbot-standalone__disclaimer vf-u-padding__right--400" 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">Disclaimer: This chatbot is designed to assist you with general information and basic inquiries. See our <a class="vf-banner__link" href="https://www.ebi.ac.uk/data-protection/privacy-notice/embl-ebi-public-website/">disclaimer notes</a>.</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>
    <div class="vf-chatbot-standalone__input-container vf-u-padding__right--400">
      <div class="vf-chatbot-standalone__input-wrapper">
        <textarea
        class="vf-chatbot-standalone__input vf-form__textarea vf-u-padding__left--400"
        placeholder="{{ input_placeholder | default('Ask me ...') }}"
        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="../../assets/vf-chatbot/assets/vf-chatbot--icon-send.svg" alt="Send request">
        </button>
      </div>
      {% if footnote %}
      <div class="vf-chatbot-standalone__footnote vf-u-margin__top--200" data-vf-js-chatbot-standalone-footnote>
        Review AI generated content for accuracy. <a class='vf-link' href='https://embl.service-now.com/esc?id=sc_cat_item&sys_id=5eeb8eb91b92e650b376da88b04bcbc1'>Leave feedback</a>.
      </div>
      {% endif %}
    </div>


    <template id="feedback-positive-template">
      {% render "@vf-chatbot-feedback--positive" %}
    </template>
    <template id="feedback-negative-template">
      {% render "@vf-chatbot-feedback--negative" %}
    </template>

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

    <template id="assistant-message-template">
      {% render "@vf-chatbot-prompt", {
      type: "assistant",
      avatar: {
        src: "../../assets/vf-chatbot/assets/vf-chatbot--icon-16x16-dark-green.svg",
        alt: "AI Assistant",
        name: "AI Assistant"
      },
      content: "How can I help you?",
      sources: sources,
      prompts: prompts,
      allowFeedback: true
    } %}
    </template>

    <template id="loading-indicator-template">
      {% render "@vf-chatbot-prompt", {
        type: "assistant",
        isLoading: true,
        avatar: {
          src: "../../assets/vf-chatbot/assets/vf-chatbot--icon-16x16-dark-green.svg",
          alt: "AI Assistant",
          name: "AI Assistant"
        }
      } %}
    </template>

    <template id="action-prompts-template">
      <div class="vf-chatbot-action-prompts">
        <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>