<div class="message-bot mt-3" id="msg-{{ ConversationAreaId }}">
    <div class="columns is-mobile">
        {% if not DontShowName %}
        <div class="column is-narrow" id="icon-column">
            <!-- Left column with the icon -->
            {% if IsPlaceholder %}

            <figure class="image is-48x48 message-icon" style="flex-shrink: 0;"
                sse-swap="swapIcon-{{ ConversationAreaId }}">
                <img src="icons/bouvai2.png" alt="User Image" id="selectedIcon-{{ ConversationAreaId }}">
            </figure>

            {% else %}

            {% for message in Messages %}
            {% if not message.Hidden %}
            <figure class="image is-48x48 message-icon" style="flex-shrink: 0;">
                <img src="{{ message.Icon }}" alt="User Image" id="selectedIcon-{{ ConversationAreaId }}">
            </figure>
            {% endif %}
            {% endfor %}

            {% endif %}
        </div>
        {% endif %}

        <div class="column" id="content-column" style="width: 100px;">
            {% if not IsPlaceholder %}
            <div class="{% if not notFlex%} is-flex {% endif %} is-align-items-start">
                <div class="message-content" style="width: 100%; overflow-y: hidden;"
                    id="content-{{ ConversationAreaId }}">
                    {% for message in Messages %}
                    {% if not message.Hidden %}
                    {% if not DontShowName %}
                    <div class="message-header">
                        <p>
                            <strong>{{ message.Name }}</strong> <small>{{ message.ModelID }}</small>
                        </p>
                    </div>
                    {% endif %}
                    <div class="message-body">
                        <div class="content" style="overflow-x: auto; width: 100%;">
                            {{ message.Content | safe }}
                        </div>
                    </div>
                    {% endif %}
                    {% endfor %}
                </div>
            </div>
            <div class="is-flex is-justify-content mt-2">
                {% if not NotClickable %}
                <button class="button is-small is-primary message-button is-outlined mr-5"
                    onclick="copyToClipboard(this)">
                    <span class="icon">
                        <i class="fa-solid fa-copy"></i>
                    </span>
                </button>

                {% for message in Messages %}
                <button class="button is-small is-primary message-button is-outlined mr-1"
                    hx-get="/messageContent?id={{ message.Id }}" hx-target="#content-{{ ConversationAreaId }}"
                    onclick="updateIcon('{{ message.Icon }}', '{{ ConversationAreaId }}')" title="{{ message.Name }}">
                    <span class="icon is-small">
                        <img src="{{ message.Icon }}" alt="{{ message.Name }}"
                            style="max-height: 100%; max-width: 100%;">
                    </span>
                </button>
                {% endfor %}
                {% endif %}
            </div>

            {% elif IsPlaceholder %}
            <div class="is-flex is-align-items-start">
                <div class="message-content" id="content-{{ ConversationAreaId }}"
                    sse-swap="swapContent-{{ ConversationAreaId }}">
                    <hx hx-trigger="load" hx-get="/generateMultipleMessages" id="generate-multiple-messages"></hx>
                    <div class='message-header'>
                        <p>
                            Waiting...
                        </p>
                    </div>
                    <div class="message-body">
                        <div class="content">
                            <br>
                            <img src="/puff.svg" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="is-flex is-justify-content mt-2">
                <button class="button is-small is-primary message-button is-outlined mr-5"
                    onclick="copyToClipboard(this)">
                    <span class="icon">
                        <i class="fa-solid fa-copy"></i>
                    </span>
                </button>

                {% for selectedLLM in SelectedLLMs %}
                <button disable class="button is-small is-primary message-button is-outlined mr-1"
                    sse-swap="swapSelectionBtn-{{ selectedLLM.ID.String() }}" hx-swap="outerHTML"
                    hx-target="this">
                    <span class="icon is-small">
                        <!--img src="icons/{{ selectedLLM.Company }}.png" alt="{{ selectedLLM.Name }}"
                            style="max-height: 100%; max-width: 100%;"-->
                        <img src="/puff.svg" />
                    </span>
                </button>
                {% endfor %}
            </div>
            {% endif %}
        </div>
    </div>
</div>