{*
 * 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 mb-2">Topics in {{ conferenceName }}</h1>
        <hr class="border-2 border-gray-400 w-4/5 mb-6">
    </div>

    <!-- Action Buttons -->
    <div class="max-w-6xl mb-6">
        <div class="flex gap-2 flex-wrap mb-4">
            <a href="{{ urlBack }}"
                class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm font-medium transition-colors">
                Conference List
            </a>
            <a href="{{ urlStem }}/new_topic"
                class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded text-sm font-medium transition-colors">
                Add Topic
            </a>
            <a href="/TODO/find"
                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{{ urlStem }}/manage"
                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="text-xs text-gray-600">
            <a href="{{ permalink }}" 
                class="text-blue-700 hover:text-blue-900">
                [Permalink to this conference]
            </a>
        </div>
    </div>

    <!-- Topics Table -->
    <div class="max-w-6xl">
        <div class="bg-white border border-gray-300 rounded-lg overflow-hidden">
            <table class="w-full">
                <thead class="bg-gray-100 border-b border-gray-300">
                    <tr>
                        {{ sp := iif(sort == 1, -1, 1) }}
                        <th class="px-4 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
                            <a href="{{ urlStem }}?sort={{ sp }}" 
                                class="text-blue-700 hover:text-blue-900">#</a>
                        </th>
                        {{ sp = iif(sort == 2, -2, 2) }}
                        <th class="px-4 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
                            <a href="{{ urlStem }}?sort={{ sp }}" 
                                class="text-blue-700 hover:text-blue-900">Topic Name</a>
                        </th>
                        {{ sp = iif(sort == 3, -3, 3) }}
                        <th class="px-4 py-3 text-right text-xs font-bold text-gray-700 uppercase tracking-wider">
                            <a href="{{ urlStem }}?sort={{ sp }}" 
                                class="text-blue-700 hover:text-blue-900">New</a>
                        </th>
                        {{ sp = iif(sort == 4, -4, 4) }}
                        <th class="px-4 py-3 text-right text-xs font-bold text-gray-700 uppercase tracking-wider">
                            <a href="{{ urlStem }}?sort={{ sp }}" 
                                class="text-blue-700 hover:text-blue-900">Total</a>
                        </th>
                        {{ sp = iif(sort == 5, -5, 5) }}
                        <th class="px-4 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
                            <a href="{{ urlStem }}?sort={{ sp }}" 
                                class="text-blue-700 hover:text-blue-900">Last Response</a>
                        </th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    {{ range i, t := topics }}
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3 whitespace-nowrap text-sm">
                                <a href="{{ urlStem }}/r/{{ t.Number }}" 
                                    class="text-blue-700 hover:text-blue-900 font-medium">{{ t.Number }}</a>
                            </td>
                            <td class="px-4 py-3 text-sm">
                                <a href="{{ urlStem }}/r/{{ t.Number }}" 
                                    class="text-blue-700 hover:text-blue-900 font-medium">{{ t.Name | raw }}</a>
                            </td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-right">
                                <a href="{{ urlStem }}/r/{{ t.Number }}" 
                                    class="text-blue-700 hover:text-blue-900">{{ t.Unread }}</a>
                            </td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-right">
                                <a href="{{ urlStem }}/r/{{ t.Number }}?r=0,-1" 
                                    class="text-blue-700 hover:text-blue-900">{{ t.Total }}</a>
                            </td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm">
                                <a href="{{ urlStem }}/r/{{ t.Number }}" 
                                    class="text-blue-700 hover:text-blue-900">{{ formattedDate[i] }}</a>
                            </td>
                        </tr>
                    {{ end }}
                </tbody>
            </table>
        </div>

        <!-- View Filter -->
        <div class="mt-6 text-center">
            <div class="inline-flex items-center gap-2 text-sm">
                <span class="font-bold">[</span>
                {{ if view == 1 }}
                    <span class="font-bold">New</span>
                {{ else }}
                    <a href="{{ urlStem }}?view=1" class="text-blue-700 hover:text-blue-900">New</a>
                {{ end }}
                <span class="font-bold">|</span>
                {{ if view == 2 }}
                    <span class="font-bold">Active</span>
                {{ else }}
                    <a href="{{ urlStem }}?view=2" class="text-blue-700 hover:text-blue-900">Active</a>
                {{ end }}
                <span class="font-bold">|</span>
                {{ if view == 3 }}
                    <span class="font-bold">All</span>
                {{ else }}
                    <a href="{{ urlStem }}?view=3" class="text-blue-700 hover:text-blue-900">All</a>
                {{ end }}
                <span class="font-bold">|</span>
                {{ if view == 4 }}
                    <span class="font-bold">Hidden</span>
                {{ else }}
                    <a href="{{ urlStem }}?view=4" class="text-blue-700 hover:text-blue-900">Hidden</a>
                {{ end }}
                <span class="font-bold">|</span>
                {{ if view == 5 }}
                    <span class="font-bold">Archived</span>
                {{ else }}
                    <a href="{{ urlStem }}?view=5" class="text-blue-700 hover:text-blue-900">Archived</a>
                {{ end }}
                <span class="font-bold">]</span>
            </div>
        </div>
    </div>
</div>