{*
 * Amsterdam Web Communities System
 * Copyright (c) 2025-2026 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">
    <!-- Top Title -->
    <div class="mb-2">
        <h1 class="text-blue-800 text-4xl font-bold inline">Manage Topic:</h1>
        <span class="text-blue-800 text-xl font-bold ml-2">{{ topicName | raw }}</span>
        <hr class="border-2 border-gray-400 w-4/5 mt-2 mb-2">
    </div>

    <!-- Backlink -->
    <div class="mb-4">
        <a class="text-blue-700 hover:text-blue-900 text-sm font-medium" href="{{ backlink }}">Return to Topic</a>
    </div>

    <!-- Subscription -->
    <div class="mb-1 font-bold text-sm">Topic Subscription:</div>
    <div class="mb-4 font-medium text-sm">
        {{ if subscribed }}
            You are currently subscribed to this topic, and will receive all new posts to that topic via E-mail.
        {{ else }}
            You are not currently subscribed to this topic. When you subscribe to a topic, you will receive all new posts to that topic via E-mail.
        {{ end }}
    </div>
    <div class="mb-4">
        <a class="text-blue-700 hover:text-blue-900 text-sm font-bold" href="{{ opsLink }}/subscribe">
            {{ if subscribed }}
                Click Here To Stop Subscribing To This Topic
            {{ else }}
                Click Here To Start Subscribing To This Topic
            {{ end }}
        </a>
    </div>

    {{ if canInvite }}
        <!-- Invite header -->
        <div class="mb-2">
            <h1 class="text-blue-800 text-4xl font-bold inline">Send Invitation</h1>
            <hr class="border-2 border-gray-400 w-4/5 mt-2 mb-2">
        </div>

        <!-- Invite text and link -->
        <div class="mb-4 text-black text-sm">
            You may send an invitation via E-mail to outside individuals to join this community and read this topic.
        </div>
        <div class="mb-4">
            <a class="text-blue-700 hover:text-blue-900 text-sm font-bold" href="{{ opsLink }}/invite">Click here to send an invitation</a>
        </div>
    {{ end }}

    <!-- Filtered Users -->
    <div class="mb-2">
        <h1 class="text-blue-800 text-4xl font-bold inline">Filtered Users</h1>
        <hr class="border-2 border-gray-400 w-4/5 mt-2 mb-6">
    </div>

    {{ if len(bozos) > 0 }}
        <div class="max-w-4xl mb-8">
            <div class="bg-white border border-gray-300 rounded-lg overflow-hidden">
                <table class="w-full">
                    <tbody class="divide-y divide-gray-200">
                        {{ range i, b := bozos }}
                            <tr class="hover:bg-gray-50">
                                <td class="px-2 py-1 whitespace-nowrap text-center w-12">
                                    <a href="{{ opsLink }}/rmbozo/{{ b.Uid }}" class="text-2xl hover:scale-125 inline-block transition-transform" 
                                        title="Remove">❌</a>
                                </td>
                                <td class="px-2 py-1 text-sm">
                                    &lt;<a class="text-blue-700 hover:text-blue-900 text-sm font-bold" target="_blank" href="/user/{{ b.Username }}">{{ b.Username }}</a>&gt;
                                    <i>{{ b.GivenName }} {{ b.FamilyName }}</i>
                                </td>
                            </tr>
                        {{ end }}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Legend -->
        <div class="max-w-4xl">
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                <h2 class="text-blue-800 font-bold text-lg mb-3">How to update the filtered users:</h2>
                <div class="space-y-2 text-sm">
                    <div class="flex items-center gap-3">
                        <span class="text-2xl">❌</span>
                        <span class="text-gray-700">Click this symbol to cease filtering this user in this topic.</span>
                    </div>
                </div>
            </div>
        </div>
    {{ end }}

</div>