{% extends "base.html" %}
{% block title %}Conversation — cclog{% endblock %}

{% block content %}
<div class="conversation-view" data-session-id="{{ session_id }}">
    <div class="conv-header">
        <div class="breadcrumb">
            <a href="/projects">Projects</a>
            <span class="bc-sep">▸</span>
            <span class="conv-project-name">...</span>
        </div>
        <div class="conv-title-row">
            <h1 class="conv-title" contenteditable="false">Loading...</h1>
            <button class="btn-icon btn-edit-name" title="Rename">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
            </button>
            <button class="btn-icon btn-fav" title="Favorite">★</button>
        </div>
        <div class="conv-meta-bar">
            <span class="conv-date"></span>
            <span class="conv-branch"></span>
            <div class="conv-tags"></div>
            <div class="conv-actions">
                <input type="text" class="tag-input" placeholder="Add tag..." />
                <button class="btn-small btn-resume" style="display:inline-flex;align-items:center;gap:4px;color:var(--green);border-color:rgba(0,232,123,0.2);">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
                    Resume
                </button>
                <a href="/api/v1/export/session/{{ session_id }}" class="btn-small" style="display:inline-flex;align-items:center;gap:4px;color:var(--amber);border-color:rgba(255,176,32,0.2);text-decoration:none;">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                    Export
                </a>
                <button class="btn-small btn-delete" data-session="{{ session_id }}">Delete</button>
            </div>
        </div>
    </div>
    <div class="messages-container">
        <div class="loading"></div>
    </div>
</div>

<!-- Toast notification -->
<div id="toast" style="
    position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);
    background:var(--bg4);border:1px solid var(--green);color:var(--green);
    font-family:var(--font);font-size:0.82rem;padding:10px 24px;
    z-index:9000;opacity:0;transition:all 0.3s ease;pointer-events:none;
    box-shadow:0 0 20px var(--green-ghost);
"></div>
{% endblock %}