{*
 * Amsterdam Web Communities System
 * Copyright (c) 2025 Erbosoft Metaverse Design Solutions, All Rights Reserved
 * 
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 *}
 <div class="p-4">
    <!-- Page Title -->
    <div class="mb-6">
        <h1 class="text-blue-800 text-4xl font-bold inline">{{ topicName }}</h1>
        <span class="text-blue-800 text-xl font-bold ml-2">{{ summaryLine }}</span>
        <hr class="border-2 border-gray-400 w-4/5 mt-2 mb-6">
    </div>

    <div class="max-w-6xl">
        <!-- Topic Controls -->
        <div class="flex justify-between items-center mb-4 gap-2 flex-wrap">
            <div class="flex gap-2 flex-wrap">
                <a href="/TODO" 
                    class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm font-medium transition-colors">Topic List</a>
                <a href="/TODO" 
                    class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded text-sm font-medium transition-colors">Hide Topic</a>
                <a href="/TODO" 
                    class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm font-medium transition-colors">Find</a>
                <a href="/TODO" 
                    class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded text-sm font-medium transition-colors">Manage</a>
            </div>
            <div class="flex gap-2 flex-wrap">
                <a href="/TODO" 
                    class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded text-sm font-medium transition-colors">Stick Topic</a>
                <a href="/TODO" 
                    class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded text-sm font-medium transition-colors">Freeze Topic</a>
                <a href="/TODO" 
                    class="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded text-sm font-medium transition-colors">Archive Topic</a>
                <a href="/TODO" 
                    class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded text-sm font-medium transition-colors">Delete Topic</a>
            </div>
        </div>

        <!-- Navigation Bar -->
        <div class="flex justify-between items-center mb-4">
            <form method="GET" action="/TODO" class="flex items-center gap-2">
                <input type="hidden" name="cc" value="2">
                <input type="hidden" name="conf" value="2">
                <input type="hidden" name="top" value="4">
                <input type="text" name="pxg" value="" size="6" maxlength="13" placeholder="Go to..." 
                        class="px-3 py-2 border border-gray-300 rounded font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                <button type="submit" name="go" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm font-medium transition-colors">Go</button>
            </form>
            <div class="flex items-center gap-2 text-sm">
                <span>[</span>
                <a href="/TODO" class="text-blue-700 hover:text-blue-900">View All</a>
                <span>|</span>
                <a href="#bottom" class="text-blue-700 hover:text-blue-900">Bottom</a>
                <span>]</span>
            </div>
        </div>

        <!-- Permalink Info -->
        <div class="text-center text-xs text-gray-600 mb-6">
            <a href="/go/{{ topicPermalink }}" class="text-blue-700 hover:text-blue-900">[Permalink to this topic]</a>
            <span class="mx-2">·</span>
            <a href="/go/{{ postsPermalink }}" class="text-blue-700 hover:text-blue-900">[Permalink to these posts]</a>
        </div>

        <!-- Messages -->
        <div class="space-y-6 mb-8">
            <!-- Post 0 -->
            <div class="border-2 border-gray-300 rounded-lg p-4 bg-white">
                <div class="flex justify-between items-start mb-3">
                    <div class="text-sm text-gray-600">
                        <a href="http://necrovenice:8080/venice/conf/posts.js.vs?cc=2&conf=2&top=4&shac=1&p1=0" class="text-blue-700 hover:text-blue-900 font-mono">0</a> of 
                        <a href="http://necrovenice:8080/venice/conf/posts.js.vs?cc=2&conf=2&top=4&shac=1&p1=3" class="text-blue-700 hover:text-blue-900 font-mono">3</a>
                        <span class="ml-2 text-xs">&lt;General.4.0&gt;</span>
                        <a href="http://necrovenice:8080/venice/go/Piazza!General.4.0" class="ml-2 text-xs text-blue-700 hover:text-blue-900">[Permalink]</a>
                    </div>
                </div>
                <div class="mb-2">
                    <strong class="text-lg">The first one</strong>
                    <span class="text-gray-600 text-sm ml-2">(<em>
                        <a href="http://necrovenice:8080/venice/user/Administrator" target="_blank" class="text-blue-700 hover:text-blue-900">Administrator</a>, 
                        Nov 20, 2025 10:47:17 PM</em>)
                    </span>
                </div>
                <pre class="font-mono text-sm whitespace-pre-wrap bg-gray-50 p-4 rounded border border-gray-200">This is a test.
This is <em>only</em> a test.
If this had been an actual emergency, we would all be 
dead by now.</pre>
            </div>

            <!-- Post 1 -->
            <div class="border-2 border-gray-300 rounded-lg p-4 bg-white">
                <div class="flex justify-between items-start mb-3">
                    <div class="text-sm text-gray-600">
                        <a href="http://necrovenice:8080/venice/conf/posts.js.vs?cc=2&conf=2&top=4&shac=1&p1=1" class="text-blue-700 hover:text-blue-900 font-mono">1</a> of 
                        <a href="http://necrovenice:8080/venice/conf/posts.js.vs?cc=2&conf=2&top=4&shac=1&p1=3" class="text-blue-700 hover:text-blue-900 font-mono">3</a>
                        <span class="ml-2 text-xs">&lt;General.4.1&gt;</span>
                        <a href="http://necrovenice:8080/venice/go/Piazza!General.4.1" class="ml-2 text-xs text-blue-700 hover:text-blue-900">[Permalink]</a>
                    </div>
                </div>
                <div class="mb-2">
                    <strong class="text-lg">Sample text is here</strong>
                    <span class="text-gray-600 text-sm ml-2">(<em>
                        <a href="http://necrovenice:8080/venice/user/Administrator" target="_blank" class="text-blue-700 hover:text-blue-900">Administrator</a>, 
                        Nov 20, 2025 10:48:21 PM</em>)
                    </span>
                </div>
                <pre class="font-mono text-sm whitespace-pre-wrap bg-gray-50 p-4 rounded border border-gray-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla maximus, quam sit amet dictum tristique, mi nibh 
tempor dolor, pretium finibus purus nunc nec mauris. In
hendrerit a erat at sodales. Fusce dictum metus id 
augue interdum dapibus. Mauris maximus elementum arcu 
eu ultricies. Nullam mollis lorem ac ipsum accumsan 
tincidunt. Proin gravida nibh fringilla tellus gravida,
viverra pellentesque metus luctus. Vivamus quis pretium
magna...</pre>
            </div>

            <!-- Post 2 - Truncated for space -->
            <div class="border-2 border-gray-300 rounded-lg p-4 bg-white">
                <div class="flex justify-between items-start mb-3">
                    <div class="text-sm text-gray-600">
                        <a href="http://necrovenice:8080/venice/conf/posts.js.vs?cc=2&conf=2&top=4&shac=1&p1=2" class="text-blue-700 hover:text-blue-900 font-mono">2</a> of 
                        <a href="http://necrovenice:8080/venice/conf/posts.js.vs?cc=2&conf=2&top=4&shac=1&p1=3" class="text-blue-700 hover:text-blue-900 font-mono">3</a>
                        <span class="ml-2 text-xs">&lt;General.4.2&gt;</span>
                        <a href="http://necrovenice:8080/venice/go/Piazza!General.4.2" class="ml-2 text-xs text-blue-700 hover:text-blue-900">[Permalink]</a>
                    </div>
                </div>
                <div class="mb-2">
                    <strong class="text-lg">Reposted Tiedrich</strong>
                    <span class="text-gray-600 text-sm ml-2">(<em>
                        <a href="http://necrovenice:8080/venice/user/Administrator" target="_blank" class="text-blue-700 hover:text-blue-900">Administrator</a>, 
                        Nov 20, 2025 10:57:04 PM</em>)
                    </span>
                </div>
                <div class="font-mono text-sm whitespace-pre-wrap bg-gray-50 p-4 rounded border border-gray-200">
                    <h3 class="font-bold mb-2">friday: the further adventures of some fucking idiot</h3>
                    <div>[Content with HTML links preserved]</div>
                </div>
            </div>

            <!-- Post 3 -->
            <div class="border-2 border-gray-300 rounded-lg p-4 bg-white" id="bottom">
                <div class="flex justify-between items-start mb-3">
                    <div class="text-sm text-gray-600">
                        <a href="http://necrovenice:8080/venice/conf/posts.js.vs?cc=2&conf=2&top=4&shac=1&p1=3" class="text-blue-700 hover:text-blue-900 font-mono">3</a> of 
                        <a href="http://necrovenice:8080/venice/conf/posts.js.vs?cc=2&conf=2&top=4&shac=1&p1=3" class="text-blue-700 hover:text-blue-900 font-mono">3</a>
                        <span class="ml-2 text-xs">&lt;General.4.3&gt;</span>
                        <a href="http://necrovenice:8080/venice/go/Piazza!General.4.3" class="ml-2 text-xs text-blue-700 hover:text-blue-900">[Permalink]</a>
                    </div>
                </div>
                <div class="mb-2">
                    <strong class="text-lg">Look</strong>
                    <span class="text-gray-600 text-sm ml-2">(<em>
                        <a href="http://necrovenice:8080/venice/user/Administrator" target="_blank" class="text-blue-700 hover:text-blue-900">Administrator</a>, 
                        Nov 20, 2025 10:57:33 PM</em>)
                    </span>
                </div>
                <pre class="font-mono text-sm whitespace-pre-wrap bg-gray-50 p-4 rounded border border-gray-200">Let's not worry about all this.</pre>
            </div>
        </div>

        <!-- Bottom Navigation -->
        <div class="flex justify-end items-center mb-6 text-sm">
            <span>[</span>
            <a href="/TODO" class="text-blue-700 hover:text-blue-900 mx-2">View All</a>
            <span>|</span>
            <a href="#top" class="text-blue-700 hover:text-blue-900 mx-2">Top</a>
            <span>]</span>
        </div>

        <!-- Reply Form -->
        <hr class="border-gray-400 mb-6">
        <h2 class="text-2xl font-bold text-black mb-4">Post Message in "{{ topicName }}":</h2>
        
        <form method="POST" action="/TODO">
            <input type="hidden" name="sd" value="4">
            <input type="hidden" name="conf" value="2">
            <input type="hidden" name="cc" value="2">
            <input type="hidden" name="top" value="4">

            <div class="bg-gray-50 p-6 rounded-lg space-y-4">
                <div>
                    <label for="pseud" class="block text-black text-sm font-medium mb-2">Your name/header:</label>
                    <div class="flex items-center gap-4">
                        <input type="text" id="pseud" name="pseud" size="37" maxlength="255" value="System Administrator"
                                class="flex-1 px-3 py-2 border border-gray-300 rounded font-mono focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <div class="flex items-center gap-2">
                            <input type="checkbox" id="attach" name="attach" value="Y" class="w-4 h-4 text-blue-600 border-gray-300 rounded">
                            <label for="attach" class="text-black text-sm">Attach a file</label>
                        </div>
                    </div>
                </div>

                <div>
                    <div class="flex justify-between items-center mb-2">
                        <label for="pb" class="text-black text-sm font-medium">Message:</label>
                        <a href="/TODO" target="_blank" class="text-blue-700 hover:text-blue-900 text-sm">HTML Guide</a>
                    </div>
                    <textarea id="pb" name="pb" wrap="soft" rows="7" cols="51" placeholder="Enter your post..."
                                class="w-full px-3 py-2 border border-gray-300 rounded font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                </div>

                <div class="flex justify-center gap-4">
                    <button type="submit" name="preview" class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded font-medium transition-colors">Preview</button>
                    <button type="submit" name="post" class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded font-medium transition-colors">Post & Reload</button>
                    <button type="submit" name="posttopics" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded font-medium transition-colors">Post & Go Topics</button>
                </div>
            </div>
        </form>
    </div>
</div>