{% extends 'base.html' %}
{% load i18n %}
{% load markdown_extras %}
{% load static %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/markdown.css' %}">
<style>
    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 50;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(4px);
    }
    .modal.show {
        display: flex;
    }
    .modal-content {
        background: white;
        border-radius: 0.75rem;
        width: 100%;
        max-width: 28rem;
        margin: 1rem;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    /* Think Panel Styles */
    .think-panel {
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        margin: 1rem 0;
        overflow: hidden;
        background-color: #fff;
    }

    .think-header {
        background-color: #f9fafb;
        padding: 1rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 1rem;
        color: #374151;
    }

    .think-header:hover {
        background-color: #f3f4f6;
    }

    .think-content {
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    }

    .think-content.expanded {
        padding: 1rem;
        max-height: 2000px; /* Adjust based on your needs */
        transition: max-height 0.5s ease-in, padding 0.3s ease-in;
    }

    .think-icon {
        transition: transform 0.3s ease;
    }

    .think-icon.expanded {
        transform: rotate(180deg);
    }

    /* Task List Styles */
    .task-item {
        list-style: none;
        padding-left: 0;
    }

    .task-checkbox {
        margin-right: 0.5rem;
        cursor: pointer;
        width: 1.1em;
        height: 1.1em;
        vertical-align: middle;
    }

    .task-checkbox:hover {
        opacity: 0.7;
    }

    /* Enhanced Audio Player Styles */
    .audio-player {
        background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
        border: 1px solid #cbd5e1;
        border-radius: 12px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    .audio-controls {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .play-pause-btn {
        width: 48px;
        height: 48px;
        background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
        border: none;
        border-radius: 50%;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .play-pause-btn:hover {
        background: linear-gradient(145deg, #334155 0%, #1e293b 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    }

    .play-pause-btn:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .play-pause-btn:disabled {
        background: #94a3b8;
        cursor: not-allowed;
        transform: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .stop-btn {
        width: 36px;
        height: 36px;
        background: linear-gradient(145deg, #dc2626 0%, #991b1b 100%);
        border: none;
        border-radius: 50%;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 3px 6px rgba(220, 38, 38, 0.3);
    }

    .stop-btn:hover {
        background: linear-gradient(145deg, #ef4444 0%, #dc2626 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(220, 38, 38, 0.4);
    }

    .stop-btn:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
    }

    .speed-btn {
        width: 44px;
        height: 32px;
        background: linear-gradient(145deg, #059669 0%, #047857 100%);
        border: none;
        border-radius: 16px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(5, 150, 105, 0.3);
        font-size: 11px;
        font-weight: 700;
        font-family: 'Monaco', 'Menlo', monospace;
    }

    .speed-btn:hover {
        background: linear-gradient(145deg, #10b981 0%, #059669 100%);
        transform: translateY(-1px);
        box-shadow: 0 3px 6px rgba(5, 150, 105, 0.4);
    }

    .speed-btn:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(5, 150, 105, 0.3);
    }

    .progress-container {
        position: relative;
        height: 8px;
        background: #e2e8f0;
        border-radius: 4px;
        overflow: hidden;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .progress-bar {
        height: 100%;
        background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%);
        border-radius: 4px;
        transition: width 0.1s ease;
        box-shadow: 0 1px 3px rgba(124, 58, 237, 0.3);
    }

    .seek-slider {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        margin: 0;
    }

    .seek-slider::-webkit-slider-thumb {
        appearance: none;
        width: 16px;
        height: 16px;
        background: #7c3aed;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .audio-time {
        font-family: 'Monaco', 'Menlo', monospace;
        font-size: 14px;
        font-weight: 600;
        color: #475569;
        background: #f1f5f9;
        padding: 4px 8px;
        border-radius: 6px;
        border: 1px solid #e2e8f0;
    }

    .audio-status {
        font-size: 12px;
        font-weight: 600;
        padding: 4px 8px;
        border-radius: 6px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .status-ready { background: #ddd6fe; color: #7c3aed; }
    .status-generating { background: #fef3c7; color: #d97706; }
    .status-playing { background: #dcfce7; color: #16a34a; }
    .status-paused { background: #fed7aa; color: #ea580c; }
    .status-stopped { background: #f3f4f6; color: #6b7280; }
    .status-finished { background: #dbeafe; color: #2563eb; }
    .status-error { background: #fecaca; color: #dc2626; }

    /* Voice Selection Styles */
    .voice-select-compact {
        min-width: 180px;
        max-width: 220px;
        padding: 0.5rem;
        border: 2px solid #e5e7eb;
        border-radius: 6px;
        font-size: 12px;
        line-height: 1.4;
        background-color: white;
        cursor: pointer;
        transition: border-color 0.2s ease;
        flex-shrink: 0;
    }

    .voice-select-compact:focus {
        outline: none;
        border-color: #7c3aed;
        box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
    }

    .custom-voice-input {
        width: 100%;
        padding: 0.5rem;
        border: 2px solid #e5e7eb;
        border-radius: 6px;
        font-size: 12px;
        line-height: 1.4;
        transition: border-color 0.2s ease;
    }

    .custom-voice-input:focus {
        outline: none;
        border-color: #7c3aed;
        box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
    }

    .voice-controls {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1rem;
        padding: 1rem;
        background: #f8fafc;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
    }

    .voice-label {
        font-size: 12px;
        font-weight: 600;
        color: #374151;
        white-space: nowrap;
    }
    .main-content {
        background: #fff;
        border-radius: 0.5rem;
        padding: 1rem;
    }

    /* ===== Table of Contents Layout ===== */
    #post-toc-layout {
        max-width: 80rem;   /* max-w-6xl equivalent */
        margin: 0.5rem auto;
        padding: 0.5rem;
    }
    #toc-sidebar {
        display: none;  /* hidden by default (mobile) */
    }
    @media (min-width: 1024px) {
        #post-toc-layout {
            display: flex;
            align-items: stretch;   /* sidebar stretches to match content height — required for sticky */
            gap: 1.5rem;
        }
        #toc-sidebar {
            display: block;
            width: 16rem;
            flex-shrink: 0;
        }
        #toc-sidebar-inner {
            position: sticky;
            top: 5rem;              /* sits just below fixed navbar (~64px) */
            max-height: calc(100vh - 5.5rem);
            overflow-y: auto;
        }
        #post-main-content {
            flex: 1 1 0%;
            min-width: 0;
        }
        #toc-mobile-btn {
            display: none !important;
        }
    }
    #toc-sidebar-inner > div {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        padding: 1rem;
    }

    #toc-sidebar .toc-link {
        display: block;
        font-size: 0.8rem;
        line-height: 1.6;
        color: #6b7280;
        text-decoration: none;
        padding: 0.2rem 0.5rem;
        border-left: 2px solid transparent;
        transition: color 0.15s, border-color 0.15s, background-color 0.15s;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        border-radius: 0 4px 4px 0;
    }
    #toc-sidebar .toc-link:hover { color: #1d4ed8; background-color: #eff6ff; }
    #toc-sidebar .toc-link.toc-active {
        color: #1d4ed8;
        border-left-color: #1d4ed8;
        font-weight: 500;
        background-color: #eff6ff;
    }
    #toc-sidebar .toc-h2 { font-weight: 500; color: #374151; }
    #toc-sidebar .toc-h3,
    #toc-sidebar .toc-h4 { font-size: 0.775rem; }

    /* Mobile TOC button */
    #toc-mobile-btn {
        position: fixed;
        bottom: 1.5rem;
        right: 1.5rem;
        z-index: 40;
        background: #2563eb;
        color: #fff;
        border: none;
        border-radius: 9999px;
        width: 3rem;
        height: 3rem;
        box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color 0.15s;
    }
    #toc-mobile-btn:hover { background: #1d4ed8; }

    /* Mobile drawer */
    #toc-mobile-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 40;
    }
    #toc-mobile-drawer {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 18rem;
        max-width: 80vw;
        background: #fff;
        z-index: 50;
        box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    #toc-nav-mobile .toc-link {
        display: block;
        font-size: 0.875rem;
        line-height: 1.7;
        color: #374151;
        text-decoration: none;
        padding: 0.3rem 0.5rem;
        border-left: 2px solid transparent;
        transition: color 0.15s, border-color 0.15s;
        border-radius: 0 4px 4px 0;
    }
    #toc-nav-mobile .toc-link:hover { color: #1d4ed8; background-color: #eff6ff; }
    #toc-nav-mobile .toc-link.toc-active { color: #1d4ed8; border-left-color: #1d4ed8; font-weight: 500; }
</style>
{% endblock %}

{% block content %}
<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="modal" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="modal-content">
        <div class="p-6">
            <h3 class="text-lg font-medium text-gray-900" id="modal-title">
                {% trans "Delete Post" %}
            </h3>
            <p class="mt-2 text-sm text-gray-500">
                {% trans "Are you sure you want to delete this post? This action cannot be undone." %}
            </p>
            <div class="mt-6 flex space-x-3">
                <form method="post" action="{% url 'post-delete' post.pk %}">
                    {% csrf_token %}
                    <button type="submit"
                            class="inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition duration-150">
                        {% trans "Delete" %}
                    </button>
                </form>
                <button type="button"
                        onclick="closeDeleteModal()"
                        class="inline-flex justify-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150">
                    {% trans "Cancel" %}
                </button>
            </div>
        </div>
    </div>
</div>



<!-- Two-column layout: sticky TOC sidebar + main content -->
<div id="post-toc-layout">

    <!-- TOC Sidebar (desktop only, sticky, populated by JS) -->
    <aside id="toc-sidebar">
        <div id="toc-sidebar-inner">
            <div>
                <p style="font-size:0.7rem;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.75rem;user-select:none;">Contents</p>
                <nav id="toc-nav"></nav>
            </div>
        </div>
    </aside>

    <!-- Main Content -->
    <div class="main-content" id="post-main-content">
    <!-- Title and Actions - Responsive Layout -->
    <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 mb-4">
        <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 sm:flex-1">{{ post.title }}</h1>

        <!-- Action Buttons - Responsive positioning -->
        <div class="flex items-center space-x-2 sm:flex-shrink-0">
                    <button onclick="toggleTTS()"
                            class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-purple-700 hover:text-purple-800 bg-purple-50 hover:bg-purple-100 rounded-md transition duration-150">
                        <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 14.142M9 9v6l4-3-4-3z"/>
                        </svg>
                        <span id="tts-button-text">{% trans "Listen" %}</span>
                    </button>
                    <a href="{% url 'post-update' post.pk %}"
                       class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-blue-700 hover:text-blue-800 bg-blue-50 hover:bg-blue-100 rounded-md transition duration-150">
                        <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                        </svg>
                        {% trans "Edit" %}
                    </a>
                    <!-- Share widget -->
                    <div x-data="shareWidget()" x-init="init()" class="relative">
                      <!-- Not yet shared -->
                      <button x-show="!isPublic" @click="enableShare()"
                              :disabled="busy"
                              class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-green-700 hover:text-green-800 bg-green-50 hover:bg-green-100 rounded-md transition duration-150 disabled:opacity-50">
                        <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/>
                        </svg>
                        {% trans "Share" %}
                      </button>
                      <!-- Already shared: copy + revoke -->
                      <div x-show="isPublic" class="flex items-center gap-1">
                        <button @click="copyUrl()"
                                class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-green-700 bg-green-50 hover:bg-green-100 border border-green-200 rounded-md transition duration-150">
                          <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
                          </svg>
                          <span x-text="copied ? '{% trans "Copied!" %}' : '{% trans "Shared" %}'"></span>
                        </button>
                        <button @click="revokeShare()" :disabled="busy"
                                title="{% trans 'Revoke public access' %}"
                                class="p-1.5 text-gray-400 hover:text-red-500 rounded transition disabled:opacity-50">
                          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                          </svg>
                        </button>
                      </div>
                    </div>
                    <button onclick="openDeleteModal()"
                            class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-red-700 hover:text-red-800 bg-red-50 hover:bg-red-100 rounded-md transition duration-150">
                        <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                        </svg>
                        {% trans "Delete" %}
                    </button>
                </div>
            </div>

            <!-- Metadata -->
            <div class="space-y-3 mb-4">

                {% if post.summary %}
                <div class="relative pl-3 border-l-4 border-gray-200">
                    <p class="text-lg text-gray-600 italic">{{ post.summary }}</p>
                </div>
                {% endif %}

                <!-- Tags -->
                {% if post.tags.exists %}
                <div class="flex flex-wrap gap-2">
                    {% for tag in post.tags.all %}
                    {% with number=forloop.counter %}
                    <a href="{% url 'tag-detail' tag.slug %}"
                       class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium transition duration-150 {% if number|divisibleby:10 %}tag-10{% elif number|divisibleby:9 %}tag-9{% elif number|divisibleby:8 %}tag-8{% elif number|divisibleby:7 %}tag-7{% elif number|divisibleby:6 %}tag-6{% elif number|divisibleby:5 %}tag-5{% elif number|divisibleby:4 %}tag-4{% elif number|divisibleby:3 %}tag-3{% elif number|divisibleby:2 %}tag-2{% else %}tag-1{% endif %}">
                        {{ tag.name }}
                    </a>
                    {% endwith %}
                    {% endfor %}
                </div>
                {% endif %}

                <!-- Timestamps - Compact single row design -->
                <div class="flex items-center gap-6 text-sm text-gray-500 bg-gray-50 rounded-md px-3 py-2">
                    <div class="flex items-center">
                        <svg class="w-4 h-4 mr-1.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                        </svg>
                        <span class="font-medium text-gray-600">{% trans "Created" %}:</span>
                        <time datetime="{{ post.created_at|date:'Y-m-d H:i' }}" class="ml-1">{{ post.created_at|date:"Y-m-d H:i" }}</time>
                    </div>
                    <div class="flex items-center">
                        <svg class="w-4 h-4 mr-1.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                        </svg>
                        <span class="font-medium text-gray-600">{% trans "Updated" %}:</span>
                        <time datetime="{{ post.updated_at|date:'Y-m-d H:i' }}" class="ml-1">{{ post.updated_at|date:"Y-m-d H:i" }}</time>
                    </div>
                </div>
            </div>

            <!-- TTS Audio Player - Initially Hidden -->
            <div id="tts-player" class="mt-4 audio-player hidden">
                <div class="flex items-center justify-between mb-3">
                    <h4 class="text-sm font-medium text-gray-800">{% trans "Audio Player" %}</h4>
                    <div id="tts-status" class="audio-status status-ready">{% trans "Ready" %}</div>
                </div>

                <!-- Voice Selection Controls -->
                <div class="voice-controls">
                    <span class="voice-label">{% trans "Voice:" %}</span>
                    <select id="post-voice-select" class="voice-select-compact" onchange="handlePostVoiceChange()">
                        <option value="zh-CN-XiaoxiaoNeural">Xiaoxiao (Female)</option>
                        <option value="zh-CN-YunxiNeural">Yunxi (Male)</option>
                        <option value="zh-CN-YunjianNeural">Yunjian (Male)</option>
                        <option value="zh-CN-XiaoyiNeural">Xiaoyi (Female)</option>
                        <option value="zh-CN-YunyangNeural">Yunyang (Male)</option>
                        <option value="zh-CN-XiaochenNeural">Xiaochen (Female)</option>
                        <option value="zh-CN-XiaohanNeural">Xiaohan (Female)</option>
                        <option value="zh-CN-XiaomengNeural" selected>Xiaomeng (Female)</option>
                        <option value="zh-CN-XiaomoNeural">Xiaomo (Female)</option>
                        <option value="zh-CN-XiaoqiuNeural">Xiaoqiu (Female)</option>
                        <option value="zh-CN-XiaorouNeural">Xiaorou (Female)</option>
                        <option value="zh-CN-YunyeNeural">Yunye (Male)</option>
                        <option value="zh-CN-XiaoshuangNeural">Xiaoshuang (Female, Child)</option>
                        <option value="en-US-EmmaNeural">Emma (Female)</option>
                        <option value="en-US-AndrewNeural">Andrew (Male)</option>
                        <option value="custom">{% trans "Custom" %}</option>
                    </select>
                    <button onclick="regenerateWithVoice()" id="regenerate-btn"
                            class="px-3 py-1 text-xs font-medium text-purple-700 bg-purple-100 border border-purple-300 rounded-md hover:bg-purple-200 transition-colors duration-200"
                            disabled>
                        {% trans "Apply Voice" %}
                    </button>
                </div>

                <!-- Custom Voice Input (hidden by default) -->
                <div id="post-custom-voice-container" class="mb-3" style="display: none;">
                    <input
                        type="text"
                        id="post-custom-voice-input"
                        class="custom-voice-input"
                        placeholder="{% trans 'e.g., zh-CN-XiaoxiaoNeural' %}"
                        maxlength="100">
                    <div class="text-xs text-gray-500 mt-1">
                        {% trans "Enter the voice code you want to use" %}
                    </div>
                </div>

                <!-- Audio Controls -->
                <div class="space-y-4">
                    <audio id="tts-audio" class="hidden" preload="none">
                        Your browser does not support the audio element.
                    </audio>

                    <!-- Progress Bar -->
                    <div class="progress-container">
                        <div id="progress-bar" class="progress-bar" style="width: 0%"></div>
                        <input id="seek-slider" type="range" min="0" max="100" value="0" class="seek-slider">
                    </div>

                    <!-- Control Buttons and Time -->
                    <div class="flex items-center justify-between">
                        <div class="audio-controls">
                            <button id="play-pause-btn" onclick="togglePlayPause()"
                                    class="play-pause-btn"
                                    disabled>
                                <svg id="play-icon" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"/>
                                </svg>
                                <svg id="pause-icon" class="w-6 h-6 hidden" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                            </button>

                            <button onclick="stopAudio()" class="stop-btn">
                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z" clip-rule="evenodd"/>
                                </svg>
                            </button>

                            <button id="speed-btn" onclick="toggleSpeed()" class="speed-btn" title="{% trans 'Playback Speed' %}">
                                1x
                            </button>
                        </div>

                        <div class="audio-time">
                            <span id="current-time">0:00</span> / <span id="total-time">0:00</span>
                        </div>
                    </div>
                </div>
            </div>

    <!-- Content Section - Full width, no containers -->
    <article class="prose max-w-none prose-lg">
        {% markdown_with_tasks post.content post.task_states %}
    </article>

    <!-- Append Content Section -->
    <div class="mt-8 border-t border-gray-200 pt-6">
        <h3 class="text-sm font-semibold text-gray-700 mb-3">{% trans "Append Content" %}</h3>
        <textarea id="append-content-input"
            class="w-full min-h-[200px] px-3 py-2 text-sm font-mono border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-y"
            placeholder="{% trans 'Write markdown to append...' %}"></textarea>
        <div class="flex items-center justify-between mt-2">
            <span id="append-status" class="text-xs text-gray-500"></span>
            <button id="append-btn" onclick="appendContent()"
                class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                {% trans "Append" %}
            </button>
        </div>
    </div><!-- end post-main-content -->
</div><!-- end post-toc-layout -->

<!-- Mobile TOC floating button -->
<button id="toc-mobile-btn" title="Table of Contents" aria-label="Table of Contents">
    <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"/>
    </svg>
</button>

<!-- Mobile TOC backdrop -->
<div id="toc-mobile-backdrop" aria-hidden="true"></div>

<!-- Mobile TOC drawer -->
<div id="toc-mobile-drawer">
    <div style="padding:1rem;">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;padding-bottom:0.75rem;border-bottom:1px solid #f3f4f6;">
            <p style="font-weight:600;color:#374151;margin:0;">{% trans "Contents" %}</p>
            <button id="toc-mobile-close" style="background:none;border:none;cursor:pointer;padding:0.25rem;color:#9ca3af;border-radius:0.25rem;" aria-label="Close">
                <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <nav id="toc-nav-mobile"></nav>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function shareWidget() {
    return {
        isPublic: {{ post.is_public|yesno:"true,false" }},
        publicUrl: '{{ request.build_absolute_uri }}' .replace('/ui/posts/{{ post.pk }}/', '/public/posts/{{ post.pk }}/'),
        busy: false,
        copied: false,
        init() {
            // Compute the actual public URL from the current origin
            this.publicUrl = window.location.origin + '{% url "public-post" post.pk %}';
        },
        async _toggle(enable) {
            this.busy = true;
            try {
                const resp = await fetch('{% url "post-share" post.pk %}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': document.cookie.match(/csrftoken=([^;]+)/)?.[1] || '',
                    },
                    body: JSON.stringify({ enable }),
                });
                const data = await resp.json();
                this.isPublic = data.is_public;
                if (data.url) this.publicUrl = data.url;
            } finally {
                this.busy = false;
            }
        },
        enableShare() { this._toggle(true); },
        revokeShare() { this._toggle(false); },
        async copyUrl() {
            try {
                await navigator.clipboard.writeText(this.publicUrl);
                this.copied = true;
                setTimeout(() => { this.copied = false; }, 2000);
            } catch(e) {
                window.open(this.publicUrl, '_blank');
            }
        },
    };
}

</script>
<script>
function openDeleteModal() {
    document.getElementById('deleteModal').classList.add('show');
    document.body.style.overflow = 'hidden';
}

function closeDeleteModal() {
    document.getElementById('deleteModal').classList.remove('show');
    document.body.style.overflow = 'auto';
}

// Close modal when clicking outside
document.getElementById('deleteModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeDeleteModal();
    }
});

// Close modal on escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeDeleteModal();
    }
});

// Think Panel functionality
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.think-header').forEach(header => {
        header.addEventListener('click', function() {
            const panel = this.parentElement;
            const content = panel.querySelector('.think-content');
            const icon = panel.querySelector('.think-icon');

            content.classList.toggle('expanded');
            icon.classList.toggle('expanded');
        });
    });

    // Task checkbox functionality
    document.querySelectorAll('.task-checkbox').forEach(checkbox => {
        checkbox.addEventListener('change', async function(e) {
            const taskHash = this.getAttribute('data-hash');
            const postId = {{ post.id }};

            try {
                const response = await fetch(`/api/posts/${postId}/toggle_task/`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ task_hash: taskHash })
                });

                if (!response.ok) {
                    // Revert checkbox if request failed
                    this.checked = !this.checked;
                    console.error('Failed to update task state');
                }
            } catch (error) {
                // Revert checkbox if request failed
                this.checked = !this.checked;
                console.error('Error updating task:', error);
            }
        });
    });

    // Initialize voice selection event listeners
    const customVoiceInput = document.getElementById('post-custom-voice-input');
    const regenerateBtn = document.getElementById('regenerate-btn');

    if (customVoiceInput && regenerateBtn) {
        customVoiceInput.addEventListener('input', function() {
            const voiceSelect = document.getElementById('post-voice-select');
            if (voiceSelect.value === 'custom') {
                regenerateBtn.disabled = !this.value.trim();
            }
        });
    }
});

// TTS Functionality
let currentAudio = null;
let isLoading = false;
let playbackSpeeds = [1, 1.25, 1.5, 2];
let currentSpeedIndex = 0;

function toggleTTS() {
    const player = document.getElementById('tts-player');
    const buttonText = document.getElementById('tts-button-text');

    if (player.classList.contains('hidden')) {
        player.classList.remove('hidden');
        buttonText.textContent = '{% trans "Hide" %}';

        if (!currentAudio) {
            loadTTSAudio();
        }
    } else {
        player.classList.add('hidden');
        buttonText.textContent = '{% trans "Listen" %}';

        if (currentAudio) {
            currentAudio.pause();
        }
    }
}

function loadTTSAudio(voiceOverride = null) {
    if (isLoading) return;

    isLoading = true;
    const status = document.getElementById('tts-status');
    const playBtn = document.getElementById('play-pause-btn');

    status.textContent = '{% trans "Generating..." %}';
    status.className = 'audio-status status-generating';
    playBtn.disabled = true;

    // Get voice parameter
    let voice = voiceOverride;
    if (!voice) {
        const voiceSelect = document.getElementById('post-voice-select');
        if (voiceSelect.value === 'custom') {
            const customInput = document.getElementById('post-custom-voice-input');
            voice = customInput.value.trim();
        } else {
            voice = voiceSelect.value;
        }
    }

    const requestBody = voice ? JSON.stringify({ voice: voice }) : null;

    fetch('{% url "post-tts" post.pk %}', {
        method: 'POST',
        headers: {
            'X-CSRFToken': '{{ csrf_token }}',
            'Content-Type': 'application/json',
        },
        body: requestBody
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('TTS generation failed');
        }
        return response.blob();
    })
    .then(blob => {
        const audioUrl = URL.createObjectURL(blob);
        const audio = document.getElementById('tts-audio');

        audio.src = audioUrl;
        currentAudio = audio;

        audio.addEventListener('loadedmetadata', function() {
            status.textContent = '{% trans "Ready" %}';
            status.className = 'audio-status status-ready';
            playBtn.disabled = false;
            updateTotalTime();
            setupAudioEvents();
        });

        audio.addEventListener('error', function() {
            status.textContent = '{% trans "Error" %}';
            status.className = 'audio-status status-error';
            playBtn.disabled = true;
        });

        audio.load();
    })
    .catch(error => {
        console.error('TTS Error:', error);
        status.textContent = '{% trans "Failed" %}';
        status.className = 'audio-status status-error';
        playBtn.disabled = true;
    })
    .finally(() => {
        isLoading = false;
    });
}

function setupAudioEvents() {
    if (!currentAudio) return;

    currentAudio.addEventListener('timeupdate', updateProgress);
    currentAudio.addEventListener('ended', onAudioEnded);

    // Set initial playback rate
    currentAudio.playbackRate = playbackSpeeds[currentSpeedIndex];

    // Seek functionality
    const seekSlider = document.getElementById('seek-slider');
    seekSlider.addEventListener('input', function() {
        if (currentAudio) {
            const seekTime = (this.value / 100) * currentAudio.duration;
            currentAudio.currentTime = seekTime;
        }
    });
}

function togglePlayPause() {
    if (!currentAudio) return;

    const playIcon = document.getElementById('play-icon');
    const pauseIcon = document.getElementById('pause-icon');
    const status = document.getElementById('tts-status');

    if (currentAudio.paused) {
        currentAudio.play();
        playIcon.classList.add('hidden');
        pauseIcon.classList.remove('hidden');
        status.textContent = '{% trans "Playing" %}';
        status.className = 'audio-status status-playing';
    } else {
        currentAudio.pause();
        playIcon.classList.remove('hidden');
        pauseIcon.classList.add('hidden');
        status.textContent = '{% trans "Paused" %}';
        status.className = 'audio-status status-paused';
    }
}

function stopAudio() {
    if (!currentAudio) return;

    currentAudio.pause();
    currentAudio.currentTime = 0;

    const playIcon = document.getElementById('play-icon');
    const pauseIcon = document.getElementById('pause-icon');
    const status = document.getElementById('tts-status');

    playIcon.classList.remove('hidden');
    pauseIcon.classList.add('hidden');
    status.textContent = '{% trans "Stopped" %}';
    status.className = 'audio-status status-stopped';

    updateProgress();
}

function toggleSpeed() {
    if (!currentAudio) return;

    // Cycle through speeds
    currentSpeedIndex = (currentSpeedIndex + 1) % playbackSpeeds.length;
    const newSpeed = playbackSpeeds[currentSpeedIndex];

    // Update audio playback rate
    currentAudio.playbackRate = newSpeed;

    // Update button text
    const speedBtn = document.getElementById('speed-btn');
    speedBtn.textContent = newSpeed + 'x';

    // Visual feedback
    speedBtn.style.transform = 'scale(1.1)';
    setTimeout(() => {
        speedBtn.style.transform = '';
    }, 150);
}

function updateProgress() {
    if (!currentAudio) return;

    const progress = (currentAudio.currentTime / currentAudio.duration) * 100;
    document.getElementById('progress-bar').style.width = progress + '%';
    document.getElementById('seek-slider').value = progress;

    document.getElementById('current-time').textContent = formatTime(currentAudio.currentTime);
}

function updateTotalTime() {
    if (!currentAudio) return;

    document.getElementById('total-time').textContent = formatTime(currentAudio.duration);
}

function onAudioEnded() {
    const playIcon = document.getElementById('play-icon');
    const pauseIcon = document.getElementById('pause-icon');
    const status = document.getElementById('tts-status');

    playIcon.classList.remove('hidden');
    pauseIcon.classList.add('hidden');
    status.textContent = '{% trans "Finished" %}';
    status.className = 'audio-status status-finished';

    // Reset speed to 1x when audio ends
    currentSpeedIndex = 0;
    const speedBtn = document.getElementById('speed-btn');
    speedBtn.textContent = '1x';
    if (currentAudio) {
        currentAudio.playbackRate = 1;
    }
}

function formatTime(seconds) {
    if (isNaN(seconds)) return '0:00';

    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return mins + ':' + (secs < 10 ? '0' : '') + secs;
}

// Voice selection handling functions
function handlePostVoiceChange() {
    const voiceSelect = document.getElementById('post-voice-select');
    const customContainer = document.getElementById('post-custom-voice-container');
    const customInput = document.getElementById('post-custom-voice-input');
    const regenerateBtn = document.getElementById('regenerate-btn');

    if (voiceSelect.value === 'custom') {
        customContainer.style.display = 'block';
        customInput.focus();

        // Enable regenerate button only if custom input has value
        regenerateBtn.disabled = !customInput.value.trim();
    } else {
        customContainer.style.display = 'none';
        // Enable regenerate button for predefined voices
        regenerateBtn.disabled = false;
    }
}

async function appendContent() {
    const input = document.getElementById('append-content-input');
    const btn = document.getElementById('append-btn');
    const status = document.getElementById('append-status');
    const extra = input.value.trim();

    if (!extra) return;

    btn.disabled = true;
    status.textContent = '{% trans "Saving..." %}';

    try {
        const response = await fetch(`/api/posts/{{ post.id }}/append_content`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ content: extra })
        });

        if (response.ok) {
            window.location.reload();
        } else {
            const err = await response.json();
            status.textContent = '{% trans "Error: " %}' + (err.error || err.detail || JSON.stringify(err));
            btn.disabled = false;
        }
    } catch (e) {
        status.textContent = '{% trans "Network error" %}';
        btn.disabled = false;
    }
}

function regenerateWithVoice() {
    const voiceSelect = document.getElementById('post-voice-select');
    const customInput = document.getElementById('post-custom-voice-input');
    const regenerateBtn = document.getElementById('regenerate-btn');

    let voice;
    if (voiceSelect.value === 'custom') {
        voice = customInput.value.trim();
        if (!voice) {
            alert('{% trans "Please enter a custom voice" %}');
            return;
        }
    } else {
        voice = voiceSelect.value;
    }

    // Disable the regenerate button temporarily
    const originalText = regenerateBtn.textContent;
    regenerateBtn.disabled = true;
    regenerateBtn.textContent = '{% trans "Applying..." %}';

    // Stop current audio if playing
    if (currentAudio && !currentAudio.paused) {
        currentAudio.pause();
    }

    // Clear current audio
    currentAudio = null;

    // Load new audio with selected voice
    loadTTSAudio(voice);

    // Re-enable and reset button after a delay
    setTimeout(() => {
        regenerateBtn.disabled = true; // Keep disabled until next voice change
        regenerateBtn.textContent = originalText;
    }, 2000);
}

// ============================================================
// Table of Contents
// ============================================================
(function() {
    function buildTOC() {
        const article = document.querySelector('article.prose');
        if (!article) return;

        const headings = article.querySelectorAll('h2, h3, h4');
        if (headings.length < 2) {
            // Not enough headings - hide TOC sidebar and mobile button
            const sidebar = document.getElementById('toc-sidebar');
            const mobileBtn = document.getElementById('toc-mobile-btn');
            if (sidebar) sidebar.style.display = 'none';
            if (mobileBtn) mobileBtn.style.display = 'none';
            return;
        }

        function createLinks(navEl) {
            navEl.innerHTML = '';
            headings.forEach(function(heading) {
                // Ensure heading has an id (toc extension adds these, but fallback just in case)
                if (!heading.id) {
                    heading.id = heading.textContent.trim()
                        .toLowerCase()
                        .replace(/[^\w\s-]/g, '')
                        .replace(/\s+/g, '-')
                        .replace(/-+/g, '-');
                }
                const level = parseInt(heading.tagName[1]); // 2, 3, or 4
                const link = document.createElement('a');
                link.href = '#' + heading.id;
                link.textContent = heading.textContent;
                link.classList.add('toc-link', 'toc-h' + level);
                link.setAttribute('data-heading-id', heading.id);

                // Visual indentation by heading level
                link.style.paddingLeft = ((level - 2) * 12 + 8) + 'px';

                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    closeMobileDrawer();
                    const target = document.getElementById(heading.id);
                    if (target) {
                        const nav = document.getElementById('main-nav');
                        const navH = nav ? nav.offsetHeight : 70;
                        const y = target.getBoundingClientRect().top + window.scrollY - navH - 16;
                        window.scrollTo({ top: y, behavior: 'smooth' });
                    }
                });
                navEl.appendChild(link);
            });
        }

        const tocNav = document.getElementById('toc-nav');
        const tocNavMobile = document.getElementById('toc-nav-mobile');
        if (tocNav) createLinks(tocNav);
        if (tocNavMobile) createLinks(tocNavMobile);

        // Scroll-spy: find the heading whose top is closest above the viewport threshold
        var _rafPending = false;
        function onScroll() {
            if (_rafPending) return;
            _rafPending = true;
            requestAnimationFrame(function() {
                _rafPending = false;
                var nav = document.getElementById('main-nav');
                var navH = nav ? nav.offsetHeight : 64;
                var threshold = navH + 24; // a bit below the navbar
                var activeId = null;
                // Walk headings in reverse: pick the last one whose top <= threshold
                for (var i = headings.length - 1; i >= 0; i--) {
                    var rect = headings[i].getBoundingClientRect();
                    if (rect.top <= threshold) {
                        activeId = headings[i].id;
                        break;
                    }
                }
                // If none is above threshold, highlight the first heading
                if (!activeId && headings.length > 0) activeId = headings[0].id;
                highlightTOC(activeId);
                // Auto-scroll the active TOC link into view within the sidebar
                var activeLinkInSidebar = document.querySelector('#toc-nav .toc-link.toc-active');
                if (activeLinkInSidebar) {
                    var sidebarInner = document.getElementById('toc-sidebar-inner');
                    if (sidebarInner) {
                        var linkTop = activeLinkInSidebar.offsetTop;
                        var linkH = activeLinkInSidebar.offsetHeight;
                        var scrollTop = sidebarInner.scrollTop;
                        var sidebarH = sidebarInner.clientHeight;
                        if (linkTop < scrollTop) {
                            sidebarInner.scrollTop = linkTop - 8;
                        } else if (linkTop + linkH > scrollTop + sidebarH) {
                            sidebarInner.scrollTop = linkTop + linkH - sidebarH + 8;
                        }
                    }
                }
            });
        }
        window.addEventListener('scroll', onScroll, { passive: true });
        onScroll(); // run once on load

        function highlightTOC(id) {
            document.querySelectorAll('.toc-link').forEach(function(a) {
                if (id && a.getAttribute('data-heading-id') === id) {
                    a.classList.add('toc-active');
                } else {
                    a.classList.remove('toc-active');
                }
            });
        }
    }

    function openMobileDrawer() {
        const drawer = document.getElementById('toc-mobile-drawer');
        const backdrop = document.getElementById('toc-mobile-backdrop');
        if (drawer) drawer.style.transform = 'translateX(0)';
        if (backdrop) backdrop.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function closeMobileDrawer() {
        const drawer = document.getElementById('toc-mobile-drawer');
        const backdrop = document.getElementById('toc-mobile-backdrop');
        if (drawer) drawer.style.transform = 'translateX(-100%)';
        if (backdrop) backdrop.classList.add('hidden');
        document.body.style.overflow = '';
    }

    document.addEventListener('DOMContentLoaded', function() {
        buildTOC();
        const mobileBtn = document.getElementById('toc-mobile-btn');
        const mobileClose = document.getElementById('toc-mobile-close');
        const backdrop = document.getElementById('toc-mobile-backdrop');
        if (mobileBtn) mobileBtn.addEventListener('click', openMobileDrawer);
        if (mobileClose) mobileClose.addEventListener('click', closeMobileDrawer);
        if (backdrop) backdrop.addEventListener('click', closeMobileDrawer);
    });
})();
</script>
{% endblock %}