{% extends "base.html" %}

{% block title %}{{ chat.chat_title }} - AI Chat Archive{% endblock %}

{% block content %}
<div class="container">
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'dashboard' %}" class="text-info">Dashboard</a></li>
            <li class="breadcrumb-item active text-secondary" aria-current="page">View Chat</li>
        </ol>
    </nav>

    <div class="glass-card p-5">
        <div class="d-flex justify-content-between align-items-start mb-5 pb-4 border-bottom border-secondary">
            <div>
                <span class="badge bg-secondary mb-2">{{ chat.ai_chat_engine }}</span>
                <h1 class="display-5 fw-bold">{{ chat.chat_title }}</h1>
                <p class="text-secondary m-0">Last updated: {{ chat.chat_last_date|date:"F j, Y, g:i a" }}</p>
            </div>
            <div class="d-flex gap-2">
                <button class="btn btn-outline-info" onclick="copyToClipboard()">
                    <i data-lucide="copy" size="18" class="me-2"></i>Copy Text
                </button>
            </div>
        </div>

        <div class="chat-viewport bg-black bg-opacity-20 p-4 rounded-3 border border-secondary shadow-inner">
            <div id="chat-body" class="chat-content text-light" style="white-space: pre-wrap; line-height: 1.6;">
                {{ chat.chat_content }}
            </div>
        </div>
        
        <div class="mt-5 d-flex gap-3">
            <button class="btn btn-cyan px-4">
                <i data-lucide="languages" size="18" class="me-2"></i>Translate
            </button>
            <button class="btn btn-outline-secondary px-4">
                <i data-lucide="link" size="18" class="me-2"></i>Open in {{ chat.ai_chat_engine }}
            </button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    function copyToClipboard() {
        const text = document.getElementById('chat-body').innerText;
        navigator.clipboard.writeText(text).then(() => {
            alert('Chat content copied to clipboard!');
        });
    }
</script>
{% endblock %}
