{*
 * 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/.
 *
 * SPDX-License-Identifier: MPL-2.0
 *}
<div class="p-4">
    <div class="mb-6">
        <div class="flex items-baseline gap-2">
            <h1 class="text-blue-800 text-4xl font-bold mb-2">Unjoin Community:</h1>
            <span class="text-blue-800 text-2xl font-bold ml-2">{{ comm.Name }}</span>
        </div>
        <hr class="border-2 border-gray-400 w-4/5 mb-4">
    </div>

    <div class="max-w-2xl w-full">
        <div class="bg-white border-2 border-red-600 rounded-lg shadow-2xl overflow-hidden">
            <!-- Dialog Header -->
            <div class="bg-red-600 px-6 py-4">
                <h1 class="text-white text-2xl font-bold text-center flex items-center justify-center gap-3">
                    <span class="text-3xl">⚠️</span> Warning <span class="text-3xl">⚠️</span>
                </h1>
            </div>

            <!-- Dialog Body -->
            <div class="px-8 py-8">
                <div class="text-center mb-8">
                    <p class="text-gray-800 text-lg leading-relaxed">
                        You are about to unjoin the <span class="text-red-800 font-bold">{{ comm.Name }}</span> community.
                        {{ if comm.MembersOnly }}
                            You will lose access to all content of the community, as well as the ability to interact with
                            the community as a whole.
                        {{ else }}
                            You will lose the ability to interact with the community's members and content.
                        {{ end }}
                    </p>
                    <p class="text-gray-800 text-lg font-bold mt-4">Are you sure you want to do this?</p>
                </div>

                <!-- Action Buttons -->
                <div class="flex gap-4 justify-center">
                    <form method="POST" action="/comm/{{ comm.Alias }}/unjoin">
                        <input type="hidden" name="returnURL" value="{{ returnURL }}">
                        <button type="submit" name="cancel"
                                class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded font-medium transition-colors">✗ Cancel</button>
                        <button type="submit" name="unjoin"
                                class="bg-red-600 hover:bg-red-700 text-white px-6 py-2 rounded font-medium transition-colors">
                            ↗️ Unjoin {{ comm.Name }}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>