{% load static %}
{% load bloomerp %}

<ul class="list-group">
    {% if ai_conversations %}
        {% for conversation in ai_conversations  %}
            <li class="list-group-item">
                <div class="d-flex justify-content-between">
                    <div>
                    <a
                        hx-get="{% url 'components_ai_conversations' %}?conversation_id={{ conversation.id }}&target={{ target }}"
                        hx-target="#conversation_container_{{ target }}"
                        hx-swap="innerHTML"
                        hx-trigger="click"
                        class="pointer d-block"
                        >
                        <span class="collapse show mult-collapse-{{conversation.pk}}">{{ conversation.title }}</span>
                    </a>

                        <input 
                            type="text" 
                            class="form-control collapse mult-collapse-{{conversation.pk}}" 
                            value="{{ conversation.title }}"
                            name="rename"
                            hx-get="{% url 'components_ai_conversations' %}?conversation_id={{ conversation.id }}&target={{ target }}&conversation_type={{ conversation.conversation_type }}"
                            hx-target="#conversation_history_{{ target }}"
                            hx-trigger="blur"
                            >
                    </div>
                    <div>
                        <button 
                            type="button" 
                            class="btn btn-sm dropdown-toggle-split" 
                            data-bs-toggle="dropdown" 
                            aria-expanded="false">
                            <i class="bi bi-three-dots"></i>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a 
                                    class="dropdown-item" 
                                    href="#"
                                    data-bs-toggle="collapse"
                                    data-bs-target=".mult-collapse-{{conversation.pk}}"
                                    >
                                    Rename
                                </a></li>
                            <li><a 
                                    class="dropdown-item"
                                    href="#"
                                    hx-get="{% url 'components_ai_conversations' %}?conversation_id={{ conversation.id }}&target={{ target }}&delete=true&conversation_type={{ conversation.conversation_type }}"
                                    hx-target="#conversation_history_{{ target }}"
                                    hx-swap="innerHTML"
                                    hx-trigger="click"
                                    >Delete
                                </a>
                            </li>
                        </ul>
                    </div>


                </div>

                <span class="d-block text-meta">{{ conversation.datetime_updated }}</span>
                </a>
            </li>
        {% endfor %}
    {% else %}
        <li class="list-group-item">
            No conversations found
        </li>
    {% endif %}
</ul>

