{% extends "base.html" %}

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

{% block content %}
<div class="container">
    <nav aria-label="breadcrumb" class="mb-5">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'dashboard' %}" class="text-info text-decoration-none"><i class="bi bi-house-door me-1"></i>Dashboard</a></li>
            <li class="breadcrumb-item active text-secondary opacity-50" aria-current="page">View Chat</li>
        </ol>
    </nav>

    <div class="glass-card p-4 p-md-5">
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-start mb-5 pb-4 border-bottom border-secondary border-opacity-25">
            <div class="mb-4 mb-md-0">
                <span class="badge bg-info bg-opacity-10 text-info border border-info border-opacity-25 mb-3 px-3 py-2">
                    <i class="bi {% if 'POE' in chat.ai_chat_engine %}bi-robot{% elif 'Merlin' in chat.ai_chat_engine %}bi-magic{% elif 'OPENROUTER' in chat.ai_chat_engine %}bi-share{% elif 'OpenAI' in chat.ai_chat_engine %}bi-openai{% else %}bi-cpu{% endif %} me-2"></i>{{ chat.ai_chat_engine }}
                </span>
                <h1 class="display-5 fw-bold text-white mb-2">{{ chat.chat_title }}</h1>
                <p class="text-secondary m-0"><i class="bi bi-clock me-2"></i>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 px-4" onclick="copyToClipboard()">
                    <i data-lucide="copy" size="18" class="me-2"></i>Copy
                </button>
            </div>
        </div>

        <div class="chat-viewport bg-black bg-opacity-20 p-4 rounded-4 border border-secondary border-opacity-25 shadow-inner">
            <div id="chat-body" class="chat-content text-white opacity-75" style="white-space: pre-wrap; line-height: 1.8; letter-spacing: 0.01em;">
                {{ chat.chat_content }}
            </div>
        </div>
        
        <div class="mt-5 d-flex flex-wrap gap-3">
            <button class="btn btn-cyan px-4 py-2">
                <i data-lucide="languages" size="18" class="me-2"></i>Translate Analysis
            </button>
            <button class="btn btn-outline-secondary px-4 py-2 text-white">
                <i data-lucide="external-link" size="18" class="me-2"></i>View Source
            </button>
            <a href="{% url 'dashboard' %}" class="btn btn-link text-info text-decoration-none ms-md-auto">
                <i class="bi bi-arrow-left me-2"></i>Back to Search
            </a>
        </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 %}