{% extends "base.html" %}

{% block title %}Conversation {{ session_id[:8] }} - {{ display_name }}{% endblock %}

{% block breadcrumb %}
{% if not embedded %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="/">
                <i class="bi bi-house me-1"></i>
                Projects
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="/project/{{ project_name }}">
                {{ display_name }}
            </a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            Session {{ session_id[:8] }}...
        </li>
    </ol>
</nav>
{% endif %}
{% endblock %}

{% block content %}
<div
    class="conversation-view"
    data-project="{{ project_name }}"
    data-session="{{ session_id }}"
    data-file-revision="{{ conversation.file_revision or '' }}"
    data-target-line="{{ target_line or '' }}"
    data-current-page="{{ conversation.page }}"
    data-total-pages="{{ conversation.total_pages }}"
    data-per-page="{{ conversation.per_page }}"
>
{% if share_url %}
<a
    class="session-share-qr"
    href="{{ share_url }}"
    target="_blank"
    rel="noopener"
    title="Open on LAN: {{ share_url }}"
    data-session-share
    data-session="{{ session_id }}"
>
    <img src="/api/qr.svg?data={{ share_url | urlencode }}" alt="QR for {{ share_url }}">
    <span>{{ share_url.replace('http://', '') }}</span>
</a>
{% endif %}
<div class="search-filters">
    <form id="search-form" method="get">
        {% if embedded %}
            <input type="hidden" name="embedded" value="true">
        {% endif %}
        <div class="filter-section">
            {% if not embedded %}
            <a href="/" class="conv-home-btn" title="Back to sessions" aria-label="Back to sessions">
                <i class="bi bi-layout-sidebar-reverse"></i>
            </a>
            {% endif %}
            <div class="filter-group">
                <label for="search">Search Messages</label>
                <input
                    type="text"
                    id="search"
                    name="search"
                    class="search-input"
                    placeholder="Search messages, tools, commands, and output..."
                    value="{{ search or '' }}"
                >
            </div>

            <div class="filter-actions">
                <button type="submit" class="search-btn" title="Search">
                    <i class="bi bi-search me-1"></i>
                    <span class="btn-label">Search</span>
                </button>
                <button type="button" id="clear-filters" class="clear-btn" title="Clear">
                    <i class="bi bi-x-circle me-1"></i>
                    <span class="btn-label">Clear</span>
                </button>
            </div>
        </div>
    </form>

    <div class="conversation-summary">
        <span>
            {% if conversation.metadata.session_name %}
                <strong>{{ conversation.metadata.session_name }}</strong>
                <span class="summary-divider">/</span>
            {% endif %}
            <span class="loaded-count">{{ conversation.messages|length }}</span> of {{ conversation.total }} messages
        </span>
        {% if search %}
            <span>
                <i class="bi bi-search me-1"></i>
                "{{ search }}"
            </span>
        {% endif %}
    </div>
    {% if conversation.metadata.session_recap %}
        <div class="conversation-recap">
            {{ conversation.metadata.session_recap }}
        </div>
    {% endif %}
</div>

<form
    class="session-send-form"
    data-session-send-form
    data-project="{{ project_name }}"
    data-session="{{ session_id }}"
    data-live="{{ 'true' if live_terminal and live_terminal.live and live_terminal.transport in ['cmux', 'iterm2', 'terminal'] else 'false' }}"
>
    <div class="session-send-target">
        {% if live_terminal and live_terminal.live and live_terminal.transport in ['cmux', 'iterm2', 'terminal'] %}
            <span class="live-dot {{ 'is-busy' if live_terminal.status == 'busy' else '' }}" aria-hidden="true"></span>
            <span>
                {{ live_terminal.transport }}{% if live_terminal.tty %} / {{ live_terminal.tty.replace('/dev/', '') }}{% endif %}
                {% if live_terminal.status == 'busy' %}
                    / processing
                {% elif live_terminal.status %}
                    / {{ live_terminal.status }}
                {% endif %}
            </span>
        {% elif live_terminal and live_terminal.live %}
            <span>Live, unsupported terminal</span>
        {% else %}
            <span>No live terminal</span>
        {% endif %}
    </div>
    <input
        type="text"
        name="message"
        class="session-send-input"
        placeholder="{{ 'Send to live Claude...' if live_terminal and live_terminal.live and live_terminal.transport in ['cmux', 'iterm2', 'terminal'] else 'Open this Claude session in a supported terminal to send' }}"
        autocomplete="off"
        {% if not (live_terminal and live_terminal.live and live_terminal.transport in ['cmux', 'iterm2', 'terminal']) %}disabled{% endif %}
    >
    <button
        type="submit"
        class="session-send-button"
        title="Send"
        {% if not (live_terminal and live_terminal.live and live_terminal.transport in ['cmux', 'iterm2', 'terminal']) %}disabled{% endif %}
    >
        <i class="bi bi-send"></i>
    </button>
    <span class="session-send-status" data-session-send-status></span>
</form>

<!-- Top loader for infinite scroll -->
<div class="infinite-scroll-loader top-loader" style="display:none">
    <div class="spinner"></div>
    <span>Loading older messages...</span>
</div>

<!-- Messages -->
{% if conversation.messages %}
    <div class="messages-container terminal-transcript">
        {% for message in conversation.messages %}
            <section
                class="terminal-turn {{ message.role or message.type }} {{ 'search-target' if target_line and message.line_number == target_line else '' }}"
                id="message-line-{{ message.line_number }}"
                title="{{ message.timestamp or '' }}"
            >
                <div class="terminal-prompt">
                    {% if message.role == 'user' or message.display_type == 'User' %}
                        <span class="terminal-marker">&gt;</span>
                    {% elif message.role == 'assistant' or message.display_type == 'Assistant' %}
                        <span class="terminal-marker assistant-dot"></span>
                    {% else %}
                        <span class="terminal-marker">{{ message.display_type|lower }}</span>
                    {% endif %}
                </div>
                <div class="terminal-content">{{ message.rendered_content | safe }}</div>
            </section>
        {% endfor %}
    </div>
{% else %}
    <div class="text-center py-5">
        <div class="mb-4">
            <i class="bi bi-chat-square-x" style="font-size: 4rem; color: var(--secondary-color);"></i>
        </div>
        <h4 class="text-muted">No Messages Found</h4>
        <p class="text-muted">
            {% if search %}
                Try adjusting your search or clear it to see the conversation.
            {% else %}
                This conversation appears to be empty or couldn't be loaded.
            {% endif %}
        </p>
        {% if search %}
            <button type="button" id="clear-filters" class="btn btn-outline-primary">
                <i class="bi bi-x-circle me-1"></i>
                Clear Filters
            </button>
        {% endif %}
    </div>
{% endif %}
</div>
{% endblock %}