{% load static %}
<div class="side-panes chat-history-pane" id="chatHistoryPane">

    <!-- Chat History Header -->
    <div class="chat-history-header">
        <div>
            <!-- Toggle Chat History Button -->
            <button class="input-button chat-history-button" id="chatHistoryToggleButton" aria-label="Toggle Chat History">
                <img src="{% static 'contrib/tabler-icons/layout-sidebar-left-collapse.svg' %}" alt="Collapse Chat History Pane">
            </button>

            <button class="input-button upload-button" id="settingsToggleButton" aria-label="Toggle Settings">
                <img src="{% static 'contrib/tabler-icons/settings.svg' %}" alt="Settings">
            </button>

            <!-- Search Button -->
            <button class="input-button search-button" title="Search" aria-label="Search Chats">
                <img src="{% static 'contrib/tabler-icons/search.svg' %}" alt="Search">
            </button>

            <!-- New Chat Button -->
            <button class="input-button new-chat-button" title="New Chat" aria-label="Start New Chat" onclick="window.location.href='{% url 'create_chat' %}'">
                <img src="{% static 'contrib/tabler-icons/message-chatbot.svg' %}" alt="New Chat">
                 New Chat
            </button>
        </div>
    </div>

    <!-- Chat History Items -->
    <ul class="chat-history-list">
        {% for conversation in conversations %}
            <li class="chat-history-item">
                <details>
                    <summary>Chat #{{ conversation.conversation_id|slice:":8" }}</summary>
                    <p>{{ conversation.messages.first.content|default:"No messages yet" }}</p>
                    <span class="chat-item-time">{{ conversation.created_at|date:"F j, Y, g:i A" }}</span>
                    <div class="chat-item-tools">
                        <!-- Tag Buttons and Delete Button -->
                        <div class="chat-item-tags">
                            <button class="tag-button" aria-label="Filter by Chat">Chat</button>
                            <button class="tag-button add-tag-btn" aria-label="Add Tag">+</button>
                            <!-- Delete Button -->
                            <button class="toolbar-btn delete-chat-btn" title="Delete Chat" aria-label="Delete Chat" onclick="if(confirm('Delete this chat?')){window.location.href='{% url 'delete_chat' conversation.conversation_id %}'};">
                                <img src="{% static 'rest_mode/svg/trash.svg' %}" alt="Delete Chat">
                            </button>
                        </div>
                    </div>
                </details>
            </li>
        {% empty %}
            <li class="chat-history-item">No previous chats</li>
        {% endfor %}
    </ul>

</div>
