{% raw %}
<div id="app" class="chat-page">
  <div class="chat-container">
    
    <div class="focus-object-line chat-topline">

      <!-- LEFT -->
      <div class="chat-top-left">
        <h2 style="margin: 0;">{{ chatTitle }}</h2>

        <p class="focus-object-msg" style="margin: 0;">
          <template v-if="finishedCount > 0">
            Completed: ✅ x {{ finishedCount }}
          </template>
          <template v-else>
            Not yet completed.
          </template>
        </p>
      </div>

      <!-- RIGHT -->
      <div class="chat-top-actions">
        <p class="heymans-msg" style="margin: 0;">{{ chatStatus }}</p>

        <button
          class="regular-button"
          @click="restartChat"
          :disabled="isStarting || isSending"
        >
          Restart Chat
        </button>
      </div>
    </div>

    <!-- Chat window: message bubbles -->
    <div
      class="chat-window"
      ref="chatWindow"
    >
      <div
        v-for="(message, index) in messages"
        :key="index"
        class="chat-message"
        :class="message.role"
      >
        <div class="chat-bubble">
          <div v-html="renderMarkdown(message.text)"></div>
        </div>
      </div>

      <div v-if="isThinking" class="chat-message assistant">
        <div class="chat-bubble thinking-bubble">
          <span class="spinner"></span>
        </div>
      </div>

      <div v-else-if="hasError" class="chat-message assistant">
        <div class="chat-bubble thinking-bubble error-bubble">
          <span class="chat-error-icon" aria-label="Error">✕</span>
        </div>
      </div>
    </div>

    <!-- Chat input area; for typing and sending -->
    <div v-if="!isFinished" class="chat-input-area">
      <textarea
        v-model="draftMessage"
        :disabled="isSending || !conversationId || !token"
        placeholder="Type your answer here..."
        @keydown.enter.exact.prevent="sendMessage"
      ></textarea>

      <button
        class="llm-button chat-send-button"
        @click="sendMessage"
        :disabled="isSending || !draftMessage.trim() || !conversationId || !token"
        title="Send message"
      >
        {{ isSending ? '...' : 'Send' }}
      </button>
    </div>

    <div v-else class="chat-finished-indicator">
      <button
        class="llm-button chat-send-button finished"
        title="Chat finished"
      >
        ✓
      </button>
    </div>

  </div>
</div>
{% endraw %}