<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% if session['theme'] == 'darkmode' %}
    {% extends "base_dark.html" %}
    {% else %}
    {% extends "base.html" %}
    {% endif %}

    {% block title %}User Management{% endblock %}

    {% block content %}
    <div class="form-container" style="max-width: 1100px; max-height: 80vh; overflow-y: auto; margin-top: 30px;">
        <h2>User Management</h2>
        <style>
            table {
                width: 100%;
                border-collapse: collapse;
                margin-top: 20px;
            }
            th, td {
                padding: 10px;
                text-align: left;
                border: 1px solid #ddd;
            }
            th:first-child {
                width: 60px;
            }
            td:first-child {
                text-align: center;
            }
            .profile-pic-small {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                object-fit: cover;
                margin: 5px;
            }
            .permission-box {
                display: inline-flex;
                align-items: center;
                justify-content: space-between;
                background: rgba(255, 255, 255, 0.8);
                border-radius: 12px;
                padding: 5px 10px;
                margin: 5px;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                font-size: 14px;
            {% if session['theme'] == 'darkmode' %}
                color: #000;
            {% endif %}
            }
            .permission-box img {
                width: 16px;
                height: 16px;
                cursor: pointer;
                margin-left: 8px;
            }
            .dropdown-container {
                position: relative;
                display: inline-block;
                margin-left: 5px;
            }
            .add-permission {
                background-color: #28a745;
                color: white;
                border: none;
                padding: 5px 10px;
                cursor: pointer;
                border-radius: 4px;
                font-size: 18px;
                font-weight: bold;
                line-height: 1;
                transition: background-color 0.2s ease;
                height: 38px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .add-permission:hover {
                background-color: #218838;
            }
            .dropdown {
                position: absolute;
                min-width: 180px;
                box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
                z-index: 1000;
                border-radius: 8px;
                overflow: hidden;
                margin-top: 5px;
                left: 0;
                background-color: #f9f9f9;
                border: 1px solid #ddd;
                max-height: 0;
                opacity: 0;
                transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
                overflow-y: hidden;
            }

            {% if session['theme'] == 'darkmode' %}
            .dropdown {
                background-color: #333;
                border: 1px solid #555;
            }
            .dropdown a {
                color: #f9f9f9;
            }
            .dropdown a:hover {
                background-color: #555;
                box-shadow: 0 0 5px #00fff7, 0 0 10px #00fff7;
            }
            {% endif %}

            .dropdown a {
                color: black;
                padding: 10px 15px;
                text-decoration: none;
                display: block;
                transition: background-color 0.2s ease, color 0.2s ease;
            }
            .dropdown-container:hover .dropdown {
                max-height: 300px;
                opacity: 1;
                overflow-y: auto;
            }
            .dropdown a:hover {
                background-color: #f1f1f1;
            }
            .neon-button {
                width: auto;
                min-width: 150px;
                padding: 14px 20px;
                font-size: 15px;
                font-weight: bold;
                border: 2px solid;
                color: inherit;
                background: transparent;
                cursor: pointer;
                position: relative;
                overflow: hidden;
                transition: 0.3s;
                box-shadow: 0 0 8px currentColor, 0 0 14px currentColor inset;
                margin: 10px 0;
                border-radius: 6px;
                text-align: center;
                height: 38px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .neon1 { color: #00fff7; border-color: #00fff7; }
            .neon2 { color: #ff00ff; border-color: #ff00ff; }
            .neon3 { color: #39ff14; border-color: #39ff14; }

            .neon-button::before {
                content: '';
                position: absolute;
                top: 0; left: 0;
                width: 100%; height: 100%;
                background: currentColor;
                z-index: 0;
                transform: scaleX(0);
                transform-origin: left;
                transition: 0.3s ease-in-out;
            }

            .neon-button:hover::before {
                transform: scaleX(1);
            }

            .neon-button span {
                position: relative;
                z-index: 1;
                transition: color 0.3s;
            }

            .neon-button:hover span {
                color: #000;
            }

            .standard-button {
                background-color: #007BFF;
                color: white;
                border: none;
                padding: 10px 15px;
                cursor: pointer;
                border-radius: 4px;
                font-size: 15px;
                font-weight: bold;
                margin: 10px 0;
                min-width: 150px;
                text-align: center;
                transition: background 0.2s;
                height: 38px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .standard-button:hover {
                background-color: #0056b3;
            }

            .add-user-form {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                background: rgba(255,255,255,0.7);
                border-radius: 10px;
                padding: 20px 24px 10px 24px;
                margin-top: 20px;
                max-width: 400px;
                margin-left: auto;
                margin-right: auto;
                box-shadow: 0 2px 8px rgba(0,0,0,0.07);
            }
            {% if session['theme'] == 'darkmode' %}
            .add-user-form {
                background: rgba(40,40,40,0.85);
            }
            {% endif %}
            .add-user-form label,
            .add-user-form input {
                display: block;
                margin-bottom: 10px;
            }
            .add-user-form input[type="text"],
            .add-user-form input[type="password"] {
                width: 100%;
                padding: 10px 12px;
                border: 1px solid #ddd;
                border-radius: 4px;
                box-sizing: border-box;
            }
            .add-user-form button {
                margin-top: 10px;
                margin-bottom: 10px;
                align-self: center;
                min-width: 150px;
            }

            .popup-overlay {
                position: fixed;
                top: 0; left: 0; right: 0; bottom: 0;
                background: rgba(0,0,0,0.45);
                z-index: 9999;
                display: none;
                align-items: center;
                justify-content: center;
            }
            .popup-content {
                background: #fff;
                border-radius: 12px;
                padding: 32px 28px 22px 28px;
                box-shadow: 0 4px 24px rgba(0,0,0,0.18);
                text-align: center;
                max-width: 340px;
                min-width: 260px;
                margin: 0 10px;
            }
            .popup-content h3 {
                margin-top: 0;
                margin-bottom: 18px;
                font-size: 1.3em;
                color: #dc3545;
            }
            .popup-content p {
                margin-bottom: 24px;
                color: #333;
            }
            .popup-btn-row {
                display: flex;
                justify-content: center;
                gap: 18px;
            }
            .popup-btn-cancel, .popup-btn-confirm {
                min-width: 90px;
                padding: 8px 0;
                border-radius: 5px;
                font-size: 15px;
                font-weight: bold;
                border: none;
                cursor: pointer;
                transition: background 0.2s;
            }
            .popup-btn-cancel {
                background: #e0e0e0;
                color: #333;
            }
            .popup-btn-cancel:hover {
                background: #bdbdbd;
            }
            .popup-btn-confirm {
                background: #dc3545;
                color: #fff;
            }
            .popup-btn-confirm:hover {
                background: #b52a37;
            }
            {% if session['theme'] == 'darkmode' %}
            .popup-content {
                background: #232323;
                color: #fff;
            }
            .popup-content p {
                color: #eee;
            }
            .popup-btn-cancel {
                background: #444;
                color: #eee;
            }
            .popup-btn-cancel:hover {
                background: #222;
            }
            .popup-btn-confirm {
                background: #b52a37;
                color: #fff;
            }
            .popup-btn-confirm:hover {
                background: #dc3545;
            }
            {% endif %}
        </style>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                document.querySelectorAll('form[data-confirm="delete-user"]').forEach(function(form) {
                    form.addEventListener('submit', function(e) {
                        e.preventDefault();
                        const username = form.getAttribute('data-username');
                        showDeletePopup(form, username);
                    });
                });
            });

            function showDeletePopup(form, username) {
                let overlay = document.getElementById('delete-popup-overlay');
                if (!overlay) {
                    overlay = document.createElement('div');
                    overlay.className = 'popup-overlay';
                    overlay.id = 'delete-popup-overlay';
                    overlay.innerHTML = `
                        <div class="popup-content">
                            <h3>Account löschen?</h3>
                            <p>Bist du dir sicher, dass der Account <b id="popup-username"></b> gelöscht werden soll?<br>Diese Aktion kann nicht rückgängig gemacht werden.</p>
                            <div class="popup-btn-row">
                                <button class="popup-btn-cancel" type="button">Abbrechen</button>
                                <button class="popup-btn-confirm" type="button">Löschen</button>
                            </div>
                        </div>
                    `;
                    document.body.appendChild(overlay);
                }
                overlay.style.display = 'flex';
                overlay.querySelector('#popup-username').textContent = username;

                const cancelBtn = overlay.querySelector('.popup-btn-cancel');
                const confirmBtn = overlay.querySelector('.popup-btn-confirm');

                // Remove previous listeners
                cancelBtn.onclick = function() {
                    overlay.style.display = 'none';
                };
                confirmBtn.onclick = function() {
                    overlay.style.display = 'none';
                    form.submit();
                };
            }
        </script>

        <table>
            <thead>
            <tr>
                <th>PFPs</th> <th>Username</th>
                <th>Display Name</th>
                <th>Perms</th>
                <th>Aktionen</th>
            </tr>
            </thead>
            <tbody>
            {% for user in users %}
            <tr>
                <td>
                    <img src="/static/pfps/{{ user['_id'] }}.png?t={{ user.get('website_accounts', {}).get('pfp_last_updated', 0) }}"
                         alt="Profilbild"
                         onerror="this.onerror=null; this.src='/static/user_small.png';"
                         class="profile-pic-small">
                </td>
                <td>{{ user['username'] }}</td>
                <td>{{ user['display_name'] }}</td>
                <td>
                    <div style="display: flex; flex-wrap: wrap;">
                        {% for permission in user['permissions'] %}
                        <div class="permission-box">
                            {{ permission }}
                            {% if user['username'] != session['username'] and permission in session.get('permissions', []) %}
                            <form action="{{ url_for('change_permissions', user_id=user['_id']) }}" method="post" style="display:inline;">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                <input type="hidden" name="remove_permission" value="{{ permission }}">
                                <img src="/static/red_cross.png" alt="Remove" onclick="this.parentElement.submit()">
                            </form>
                            {% endif %}
                        </div>
                        {% endfor %}

                        {% if user['username'] != session['username'] %}
                        <div class="dropdown-container">
                            <button class="add-permission">+</button>
                            <div class="dropdown">
                                {% for permission_option in ['user_management', 'permission_management', 'delete_requests', 'logs', 'create_license_key', 'view_license_keys', 'create_event_feedback', 'view_event_feedback', 'discord_bots', 'verify_age', 'events', 'project_manager', 'intranet', 'ip_checker', 'changelogs', 'appointments'] %}
                                {% if permission_option not in user['permissions'] and permission_option in session.get('permissions', []) %}
                                    {% if permission_option in ['user_management', 'permission_management'] %}
                                        {% if 'System' in session.get('permissions', []) %}
                                            <a href="#" onclick="event.preventDefault(); document.getElementById('add-permission-{{ user['_id'] }}-{{ permission_option }}').submit();">{{ permission_option }}</a>
                                            <form id="add-permission-{{ user['_id'] }}-{{ permission_option }}" action="{{ url_for('change_permissions', user_id=user['_id']) }}" method="post" style="display:none;">
                                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                                <input type="hidden" name="add_permission" value="{{ permission_option }}">
                                            </form>
                                        {% endif %}
                                    {% else %}
                                        <a href="#" onclick="event.preventDefault(); document.getElementById('add-permission-{{ user['_id'] }}-{{ permission_option }}').submit();">{{ permission_option }}</a>
                                        <form id="add-permission-{{ user['_id'] }}-{{ permission_option }}" action="{{ url_for('change_permissions', user_id=user['_id']) }}" method="post" style="display:none;">
                                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                            <input type="hidden" name="add_permission" value="{{ permission_option }}">
                                        </form>
                                    {% endif %}
                                {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </td>
                <td>
                    {% if user['username'] != session['username'] %}
                    {% set current_user_permissions = session.get('permissions', []) %}
                    {% if 'permission_management' in current_user_permissions and 'permission_management' in user['permissions'] and session['username'] != 'MrSniff' %}
                    Keine Aktionen verfügbar
                    {% else %}
                    <form action="{{ url_for('edit_user', user_id=user['_id']) }}" method="get" style="display:inline;">
                        {% if session['theme'] == 'darkmode' %}
                        <button type="submit" class="neon-button neon1" style="min-width: 80px; padding: 8px 12px; font-size: 14px;"><span>Edit</span></button>
                        {% else %}
                        <button type="submit" class="standard-button" style="min-width: 80px; padding: 8px 12px; font-size: 14px;">Edit</button>
                        {% endif %}
                    </form>
                    <form action="{{ url_for('delete_user', user_id=user['_id']) }}" method="post" style="display:inline;" data-confirm="delete-user" data-username="{{ user['username'] }}">
                        {% if session['theme'] == 'darkmode' %}
                        <button type="submit" class="neon-button neon3" style="min-width: 80px; padding: 8px 12px; font-size: 14px;"><span>Delete</span></button>
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        {% else %}
                        <button type="submit" class="standard-button" style="min-width: 80px; padding: 8px 12px; font-size: 14px; background-color: #dc3545; border-color: #dc3545;">Delete</button>
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        {% endif %}
                    </form>
                    {% endif %}
                    {% else %}
                    Keine Aktionen verfügbar
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>

        <form action="{{ url_for('add_user') }}" method="post" class="add-user-form">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <label for="new_username">Username:</label>
            <input type="text" id="new_username" name="username" required>
            <label for="new_display_name">Display Name:</label>
            <input type="text" id="new_display_name" name="display_name" required>
            <label for="new_password">Passwort:</label>
            <input type="password" id="new_password" name="password" required>
            {% if session['theme'] == 'darkmode' %}
            <button type="submit" class="neon-button neon1"><span>Hinzufügen</span></button>
            {% else %}
            <button type="submit" class="standard-button">Hinzufügen</button>
            {% endif %}
        </form>

        {% if session['theme'] == 'darkmode' %}
        <a href="/dashboard" class="neon-button neon3" style="display:inline-block; margin-top: 20px; margin-left: 0; padding: 12px 20px; line-height: 1.5;"><span>Zurück</span></a>
        {% else %}
        <a href="/dashboard" class="standard-button" style="display:inline-block; margin-top: 20px; margin-left: 0; padding: 12px 15px;">Zurück</a>
        {% endif %}
    </div>
    {% endblock %}
    </body>
</html>
