<div class='great-ds-container'>
    <div class='great-ds-chat' data-api="{{ api_endpoints }}">
        <h1 class="great-ds-chat__heading govuk-heading-l">
            {% include "_ai_icon.html" %}
                What’s your exporting question?
            </h1>
        {% if leading_text %}
            <p class='great-ds-chat__leading-text'> {{ leading_text }} </p>
        {% endif %}
        <div class='great-ds-chat__container'>
            <div class='great-ds-chat__messages-container'>
                <div id ='empty-agent-message' class='great-ds-chat__message-container great-ds-chat__message-container--agent'>
                    {% include "_ai_message_icon.html" %}
                    <p class='great-ds-chat__message great-ds-chat__message--agent'> 
                        Hello. I can help you with your exporting queries. For example, ‘How do I get an export license for shipping goods from the UK?’ 
                    </p>

                </div>
                <div id ='empty-user-message' class='great-ds-chat__message-container great-ds-chat__message-container--user'>
                    <p class='great-ds-chat__message great-ds-chat__message--user'>How do I export to France?</p>
                </div>

            </div>
                <form id='great-ds-chat__submit-chat-form' class='great-ds-chat__submit-chat-form' action=''>
                    <div class='great-ds-chat__input-container'>
                    {% csrf_token %}
                    {% include "_input.html" with classes='great-ds-chat__input' noFormGroup='true' %}
                    <button class='great-ds-chat__input-button'>{% include '_send_message_icon.html' %} </button>
                </div>
            </form>
        </div>
    <div class='great-ds-container'>
    {% load static %}
    <script type="module" src="/static/chat.js"></script>    
    <link rel="stylesheet" href="/static/bgs_chat_css.css">      
</div>
