{# The Conversation pane of the run view: one card per turn -- the prompt and #}
{# the agent's answer, each collapsible -- read from the session transcript #}
{# (GET /api/tasks/<id>/conversation). Replaces the terminal while shown. A #}
{# finished turn leads with its result; progress notes and the single steps #}
{# are folded away. Pending permission prompts and questions can be answered #}
{# here (a question with its options, free text and a submit, like the Claude #}
{# app; the answered ones stay in the turn as decision blocks), and whatever #}
{# stops the agent (usage limit, login, network) shows as a card. The task's #}
{# report sits in the pane beside it (see index.html). #}
<div class="claude-conv-page card flex-fill d-flex flex-column">
    <div class="d-flex align-items-center gap-2 px-3 py-2 border-bottom flex-wrap">
        <i class="ti ti-messages fs-3 text-secondary"></i>
        <span class="fw-medium" x-text="$i18n('conv_title')"></span>
        <template x-if="convUsage && convUsage.input + convUsage.output > 0">
            <span class="badge bg-secondary-lt claude-conv-tokens" :title="tokensHint(convUsage)">
                <i class="ti ti-coins me-1"></i><span x-text="$i18n('conv_tokens_total', {n: fmtTokens(convUsage.input + convUsage.output)})"></span>
            </span>
        </template>
        <span class="flex-fill"></span>
        <button type="button" class="btn btn-sm btn-ghost-secondary" x-show="convTurns.length"
                @click="setAllConvOpen(true)" x-text="$i18n('conv_expand_all')"></button>
        <button type="button" class="btn btn-sm btn-ghost-secondary" x-show="convTurns.length"
                @click="setAllConvOpen(false)" x-text="$i18n('conv_collapse_all')"></button>
        <button type="button" class="btn btn-sm btn-primary" :title="$i18n('conv_show_terminal_hint')"
                x-show="!runSplitShown" @click="setRunMode('terminal')">
            <i class="ti ti-terminal-2 me-1"></i><span x-text="$i18n('conv_show_terminal')"></span>
        </button>
    </div>

    <div class="claude-conv-body flex-fill overflow-auto px-3 py-3" x-ref="convBody">
        <template x-if="!convTurns.length">
            <div class="text-secondary text-center py-5" x-text="$i18n('conv_empty')"></div>
        </template>
        <template x-for="(turn, i) in convTurns" :key="i">
            <div class="claude-conv-turn mb-3">
                {# The prompt. The queue seed is the task itself: shown as a task card. #}
                <div class="claude-conv-block claude-conv-prompt" :class="turn.seed && 'claude-conv-seed'">
                    <button type="button" class="claude-conv-head" @click="toggleConv(i, 'p')"
                            :aria-expanded="convIsOpen(i, 'p')">
                        <i class="ti" :class="convIsOpen(i, 'p') ? 'ti-chevron-down' : 'ti-chevron-right'"></i>
                        <template x-if="turn.seed && runTask">
                            <span class="d-flex align-items-center gap-2 flex-fill" style="min-width: 0">
                                <i class="ti ti-checkbox"></i>
                                <span class="fw-medium text-nowrap" x-text="$i18n('conv_task')"></span>
                                <span class="font-monospace text-secondary" x-text="`#${runTask?.id}`"></span>
                                <span class="fw-medium text-truncate" x-text="runTask?.title"></span>
                                <template x-if="runTask?.project">
                                    <span class="badge bg-blue-lt" x-text="runTask?.project"></span>
                                </template>
                                <span class="badge" :class="priorityBadgeClass(runTask?.priority)"
                                      x-show="runTask?.priority && runTask?.priority !== 'normal'"
                                      x-text="priorityLabel(runTask?.priority)"></span>
                                <template x-for="tag in (runTask?.tags || [])" :key="tag">
                                    <span class="badge bg-secondary-lt" x-text="`#${tag}`"></span>
                                </template>
                            </span>
                        </template>
                        <template x-if="!(turn.seed && runTask)">
                            <span class="d-flex align-items-center gap-2 flex-fill" style="min-width: 0">
                                <i class="ti ti-user"></i>
                                <span class="fw-medium" x-text="$i18n('conv_prompt')"></span>
                                <span class="claude-conv-preview text-truncate" x-show="!convIsOpen(i, 'p')"
                                      x-text="turn.preview"></span>
                            </span>
                        </template>
                        <span class="text-secondary small text-nowrap" x-show="turn.prompt_at"
                              x-text="formatAbsolute(turn.prompt_at)"></span>
                    </button>
                    <div class="claude-conv-content markdown" x-show="convIsOpen(i, 'p') && turn.prompt" x-html="turn.promptHtml"></div>
                </div>

                {# The answer: result first, then the step summary, then what is folded away. #}
                <div class="claude-conv-block claude-conv-answer">
                    <button type="button" class="claude-conv-head" @click="toggleConv(i, 'a')"
                            :aria-expanded="convIsOpen(i, 'a')">
                        <i class="ti" :class="convIsOpen(i, 'a') ? 'ti-chevron-down' : 'ti-chevron-right'"></i>
                        <i class="ti" :class="turn.answer ? 'ti-circle-check text-success' : 'ti-sparkles'"></i>
                        <span class="fw-medium" x-text="turn.answer ? $i18n('conv_result') : $i18n('conv_answer')"></span>
                        <span class="claude-conv-preview text-truncate" x-show="!convIsOpen(i, 'a')"
                              x-text="turn.answerPreview"></span>
                        <span class="flex-fill" x-show="convIsOpen(i, 'a')"></span>
                        <template x-if="turn.usage.input + turn.usage.output > 0">
                            <span class="badge bg-secondary-lt text-nowrap" :title="tokensHint(turn.usage)">
                                <i class="ti ti-coins me-1"></i><span x-text="fmtTokens(turn.usage.input + turn.usage.output)"></span>
                            </span>
                        </template>
                        <span class="text-secondary small text-nowrap" x-show="turn.answer_at"
                              x-text="formatAbsolute(turn.answer_at)"></span>
                    </button>
                    <div class="claude-conv-content" x-show="convIsOpen(i, 'a')">
                        {# Finished: the result. Running: the latest progress note. #}
                        <template x-if="turn.answer">
                            <div class="claude-conv-result markdown" x-html="turn.answerHtml"></div>
                        </template>
                        <template x-if="!turn.answer && turn.progress.length">
                            <div class="claude-conv-current">
                                <div class="text-secondary small mb-1" x-text="$i18n('conv_current')"></div>
                                <div class="markdown" x-html="turn.progressHtml[turn.progressHtml.length - 1]"></div>
                            </div>
                        </template>
                        <template x-if="!turn.answer && !turn.progress.length">
                            <div class="text-secondary small" x-text="$i18n('conv_no_answer')"></div>
                        </template>

                        {# The agent's questions in this turn and what was answered. #}
                        <template x-for="(dec, di) in turn.decisions" :key="di">
                            <div class="claude-conv-decision mt-2">
                                <div class="small fw-medium mb-1"><i class="ti ti-help-circle text-orange me-1"></i><span x-text="$i18n('conv_decision')"></span></div>
                                <template x-for="(q, qi) in dec.questions" :key="qi">
                                    <div class="mb-2">
                                        <span class="badge bg-orange-lt mb-1" x-show="q.header" x-text="q.header"></span>
                                        <div class="fw-medium mb-1" x-text="q.question"></div>
                                        <div class="claude-conv-options">
                                            <template x-for="(opt, oi) in q.options" :key="oi">
                                                <div class="claude-conv-option is-static" :class="decisionPicked(dec, q, opt.label) && 'is-picked'">
                                                    <i class="ti" :class="decisionPicked(dec, q, opt.label) ? (q.multi ? 'ti-square-check' : 'ti-circle-check') : (q.multi ? 'ti-square' : 'ti-circle')"></i>
                                                    <span class="claude-conv-option-text">
                                                        <span class="fw-medium" x-text="opt.label"></span>
                                                        <span class="d-block text-secondary small" x-show="opt.description" x-text="opt.description"></span>
                                                    </span>
                                                </div>
                                            </template>
                                        </div>
                                        <div class="claude-conv-option is-static is-picked mt-1" x-show="decisionText(dec, q)">
                                            <i class="ti ti-pencil"></i><span class="claude-conv-option-text" x-text="decisionText(dec, q)"></span>
                                        </div>
                                        <div class="text-secondary small" x-show="!dec.answers" x-text="$i18n('conv_decision_none')"></div>
                                    </div>
                                </template>
                            </div>
                        </template>

                        {# Step summary: counts per kind; edited files jump to the Diff. #}
                        <template x-if="turn.tools.length">
                            <div class="claude-conv-summary mt-2">
                                <template x-for="k in turn.kinds" :key="k.kind">
                                    <span class="claude-conv-kind" :title="k.title">
                                        <i class="ti" :class="kindIcon(k.kind)"></i><span x-text="k.label"></span>
                                    </span>
                                </template>
                            </div>
                        </template>
                        <template x-if="turn.editedFiles.length">
                            <div class="claude-conv-files mt-1">
                                <span class="text-secondary small me-1" x-text="$i18n('conv_edited_files')"></span>
                                <template x-for="f in turn.editedFiles" :key="f">
                                    <a href="#" class="claude-conv-file font-monospace small" :title="$i18n('conv_file_diff', {file: f})"
                                       @click.prevent="openDiffFile(f)" x-text="baseName(f)"></a>
                                </template>
                            </div>
                        </template>

                        {# Folded away: the progress notes and the single steps. #}
                        <template x-if="turn.progress.length > (turn.answer ? 0 : 1)">
                            <details class="claude-conv-fold mt-2">
                                <summary class="text-secondary small"
                                         x-text="$i18n('conv_progress', {n: turn.answer ? turn.progress.length : turn.progress.length - 1})"></summary>
                                <template x-for="(html, j) in (turn.answer ? turn.progressHtml : turn.progressHtml.slice(0, -1))" :key="j">
                                    <div class="claude-conv-note markdown" x-html="html"></div>
                                </template>
                            </details>
                        </template>
                        <template x-if="turn.tools.length">
                            <details class="claude-conv-fold mt-1">
                                <summary class="text-secondary small" x-text="$i18n('conv_steps', {n: turn.tools.length})"></summary>
                                <ol class="small mb-0 mt-1">
                                    <template x-for="(tool, j) in turn.tools" :key="j">
                                        <li><i class="ti me-1 text-secondary" :class="kindIcon(tool.kind)"></i><span
                                                class="font-monospace fw-medium" x-text="toolName(tool.name)"></span>
                                            <span class="text-secondary" x-text="tool.detail"></span></li>
                                    </template>
                                </ol>
                            </details>
                        </template>
                    </div>
                </div>
            </div>
        </template>

        {# Live state of the session under the last turn. x-if, not x-show: #}
        {# Tabler's d-flex is !important and beats display:none. #}
        <template x-if="activeTab">
            <div>
                {# The agent's open question (AskUserQuestion), answered here: #}
                {# options to pick, a free-text answer per question, sent into #}
                {# the terminal's dialog (see submitAnswers). #}
                <template x-if="convPrompt === 'ask'">
                    <div class="claude-conv-ask card card-sm border-orange mb-2" x-effect="ensureAnswerDraft(convPending)">
                        <div class="card-body">
                            <div class="fw-medium mb-2"><i class="ti ti-help-circle text-orange me-1"></i><span x-text="$i18n('conv_decision_open')"></span></div>
                            <template x-for="(q, qi) in convPending.questions" :key="qi">
                                <div class="claude-conv-question mb-3">
                                    <span class="badge bg-orange-lt mb-1" x-show="q.header" x-text="q.header"></span>
                                    <div class="fw-medium mb-1" x-text="q.question"></div>
                                    <div class="text-secondary small mb-1" x-text="q.multi ? $i18n('conv_decision_pick_any') : $i18n('conv_decision_pick_one')"></div>
                                    <div class="claude-conv-options">
                                        <template x-for="(opt, oi) in q.options" :key="oi">
                                            <button type="button" class="claude-conv-option" :class="answerPicked(qi, oi) && 'is-picked'"
                                                    @click="pickAnswer(qi, oi)">
                                                <i class="ti" :class="answerPicked(qi, oi) ? (q.multi ? 'ti-square-check' : 'ti-circle-check') : (q.multi ? 'ti-square' : 'ti-circle')"></i>
                                                <span class="claude-conv-option-text">
                                                    <span class="fw-medium" x-text="opt.label"></span>
                                                    <span class="d-block text-secondary small" x-show="opt.description" x-text="opt.description"></span>
                                                </span>
                                            </button>
                                        </template>
                                    </div>
                                    <input type="text" class="form-control form-control-sm mt-2" :placeholder="$i18n('conv_decision_other')"
                                           x-model="convAnswerDraft.text[qi]"
                                           @keydown.enter.prevent="submitAnswers()">
                                </div>
                            </template>
                            <div class="d-flex flex-wrap align-items-center gap-2">
                                <button type="button" class="btn btn-sm btn-orange" :disabled="!answersReady()" @click="submitAnswers()">
                                    <i class="ti ti-send me-1"></i><span x-text="$i18n('conv_decision_submit')"></span>
                                </button>
                                <button type="button" class="btn btn-sm btn-ghost-secondary" x-show="!runSplitShown" @click="setRunMode('terminal')">
                                    <i class="ti ti-terminal-2 me-1"></i><span x-text="$i18n('conv_answer_in_terminal')"></span>
                                </button>
                            </div>
                            <div class="text-secondary small mt-2" x-text="$i18n('conv_decision_hint')"></div>
                        </div>
                    </div>
                </template>
                {# Blocked on a permission prompt for a tool call. #}
                <template x-if="convPrompt === 'permission'">
                    <div class="claude-conv-ask card card-sm border-orange mb-2">
                        <div class="card-body">
                            <div class="fw-medium mb-1"><i class="ti ti-shield-question text-orange me-1"></i><span
                                    x-text="$i18n('conv_permission', {tool: toolName(convPending?.name)})"></span></div>
                            <div class="font-monospace small text-secondary mb-2 text-break" x-show="convPending?.detail"
                                 x-text="convPending?.detail"></div>
                            <div class="d-flex flex-wrap gap-2">
                                <button type="button" class="btn btn-sm btn-success" @click="answerPermission(true)">
                                    <i class="ti ti-check me-1"></i><span x-text="$i18n('conv_allow')"></span>
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-danger" @click="answerPermission(false)">
                                    <i class="ti ti-x me-1"></i><span x-text="$i18n('conv_deny')"></span>
                                </button>
                                <button type="button" class="btn btn-sm btn-ghost-secondary" x-show="!runSplitShown" @click="setRunMode('terminal')">
                                    <i class="ti ti-terminal-2 me-1"></i><span x-text="$i18n('conv_show_terminal')"></span>
                                </button>
                            </div>
                            <div class="text-secondary small mt-2" x-text="$i18n('conv_permission_hint')"></div>
                        </div>
                    </div>
                </template>
                {# The agent cannot work: usage limit, not logged in, API unreachable ... #}
                <template x-if="convBlocker">
                    <div class="claude-conv-blocker card card-sm border-danger mb-2" role="alert">
                        <div class="card-body">
                            <div class="fw-medium mb-1"><i class="ti text-danger me-1" :class="blockerIcon(convBlocker)"></i><span
                                    x-text="$i18n('conv_blocker_' + blockerKind(convBlocker))"></span></div>
                            <div class="font-monospace small mb-2 text-break" x-show="convBlocker?.text" x-text="convBlocker?.text"></div>
                            <div class="text-secondary small mb-2" x-text="$i18n('conv_blocker_' + blockerKind(convBlocker) + '_hint')"></div>
                            <div class="d-flex align-items-center flex-wrap gap-2">
                                <button type="button" class="btn btn-sm btn-outline-danger" @click="setRunMode('terminal')">
                                    <i class="ti ti-terminal-2 me-1"></i><span x-text="$i18n('conv_show_terminal')"></span>
                                </button>
                                <span class="text-secondary small" x-show="convBlocker?.at" x-text="formatAbsolute(convBlocker?.at)"></span>
                            </div>
                        </div>
                    </div>
                </template>
                <template x-if="!convBlocker && (activeTab?.status === 'running' || activeTab?.status === 'connecting')">
                    <div class="d-flex align-items-center gap-2 text-azure small" style="min-width: 0">
                        <span class="spinner-border spinner-border-sm flex-shrink-0"></span>
                        <span class="text-truncate" x-text="convActivity || $i18n('conv_working')"></span>
                    </div>
                </template>
                <template x-if="activeTab?.status === 'waiting' && !convPrompt && !convBlocker">
                    <div class="d-flex align-items-center gap-2 text-orange flex-wrap small">
                        <i class="ti ti-hand-stop"></i><span x-text="$i18n('conv_waiting')"></span>
                        <button type="button" class="btn btn-sm btn-outline-orange" x-show="!runSplitShown" @click="setRunMode('terminal')">
                            <i class="ti ti-terminal-2 me-1"></i><span x-text="$i18n('conv_show_terminal')"></span>
                        </button>
                    </div>
                </template>
                <div class="text-secondary small" x-show="activeTab?.status === 'exited'" x-text="$i18n('conv_exited')"></div>
            </div>
        </template>

        {# The report lives in the pane beside the conversation; with the pane #}
        {# closed, one line says there is one. #}
        <template x-if="runReportAvailable && !runReportOpen">
            <div class="d-flex align-items-center gap-2 flex-wrap small mt-3">
                <i class="ti ti-file-text text-success"></i>
                <span class="text-secondary" x-text="$i18n('report_written_at', {when: runReportWhen})"></span>
                <button type="button" class="btn btn-sm btn-outline-success" @click="toggleRunReport()">
                    <i class="ti ti-layout-sidebar-right me-1"></i><span x-text="$i18n('report_open')"></span>
                </button>
            </div>
        </template>
    </div>

    {# Reply: typed into the live session like a quick prompt. Images can be #}
    {# pasted (Ctrl+V) or dropped onto it; they wait as thumbnails until sent. #}
    <template x-if="activeTab && activeTab?.status !== 'exited'">
        <form class="conv-reply px-3 py-2 border-top position-relative" :class="convDragOver && 'conv-drag-over'"
              @submit.prevent="sendConvReply()"
              @dragover.prevent="convDragOver = true" @dragleave.self="convDragOver = false"
              @drop.prevent="onConvDrop($event)">
            <div class="d-flex flex-wrap gap-2 mb-2" x-show="convImages.length">
                <template x-for="(img, i) in convImages" :key="img.url">
                    <div class="conv-thumb">
                        <img :src="img.url" :alt="img.file.name">
                        <button type="button" class="btn-close" :title="$i18n('conv_image_remove')"
                                :aria-label="$i18n('conv_image_remove')" @click="removeConvImage(i)"></button>
                    </div>
                </template>
            </div>
            {# Quick prompts sit where messages are written (see _quick_prompts.html). #}
            {% include '_quick_prompts.html' %}
            <div class="d-flex gap-2">
                {# Plugin buttons left of the field (voice dictation; see ntasker/plugins). #}
                {% for tpl in plugin_slots['conv_reply'] %}{% include tpl %}{% endfor %}
                <textarea class="form-control" rows="1" x-model="convReply" x-ref="convReplyBox"
                          x-effect="convReply; $nextTick(() => fitConvReply())"
                          :placeholder="$i18n('conv_reply_placeholder')"
                          @paste="onConvPaste($event)"
                          @keydown.enter="if (!$event.shiftKey && !$event.isComposing) { $event.preventDefault(); sendConvReply(); }"></textarea>
                <button type="submit" class="btn btn-primary" :disabled="!convReply.trim() && !convImages.length">
                    <i class="ti ti-send me-1"></i><span x-text="$i18n('conv_send')"></span>
                </button>
            </div>
        </form>
    </template>
</div>