<?php
require_once __DIR__ . '/api/config.php';
require_once __DIR__ . '/api/db.php';

if (isset($_GET['mobile_token'])) {
    $db = Database::getInstance()->getConnection();
    $stmt = $db->prepare('SELECT id, username, role, mobile_token_expires FROM users WHERE mobile_token = ?');
    $stmt->execute([$_GET['mobile_token']]);
    $user = $stmt->fetch();

    if ($user && strtotime($user['mobile_token_expires']) > time()) {
        session_start();
        $_SESSION['user_id'] = $user['id'];
        $_SESSION['username'] = $user['username'];
        $_SESSION['role'] = $user['role'];
        $_SESSION['auth_method'] = 'mobile_token';

        // Smazat token z db
        $stmtDel = $db->prepare('UPDATE users SET mobile_token = NULL, mobile_token_expires = NULL WHERE id = ?');
        $stmtDel->execute([$user['id']]);

        // Fix pro Android WebView: Místo okamžitého HTTP redirectu (který zahazuje cookies) použijeme drobný JS redirect.
        // Tím dáme asynchronnímu CookieManageru v Androidu čas zapsat si PHPSESSID.
        echo '<!DOCTYPE html><html><head><meta charset="utf-8"><title>Login...</title></head><body>';
        echo '<script>window.location.replace("index.php");</script>';
        echo '</body></html>';
        exit;
    }
}
?>
<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Galileo Kanban</title>
    <!-- App Icon -->
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='20' fill='%232ea043'/><rect x='25' y='25' width='15' height='50' rx='3' fill='%23ffffff'/><rect x='50' y='25' width='15' height='35' rx='3' fill='%23ffffff'/><rect x='75' y='25' width='15' height='15' rx='3' fill='%23ffffff'/></svg>">
    <link rel="apple-touch-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='20' fill='%232ea043'/><rect x='25' y='25' width='15' height='50' rx='3' fill='%23ffffff'/><rect x='50' y='25' width='15' height='35' rx='3' fill='%23ffffff'/><rect x='75' y='25' width='15' height='15' rx='3' fill='%23ffffff'/></svg>">
    <!-- Modern Font: Inter -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <!-- Font Awesome for Icons -->
    <link rel="stylesheet" href="assets/vendor/fontawesome/css/all.min.css">
    <link rel="stylesheet" href="assets/css/style.css?v=<?= filemtime('assets/css/style.css') ?>">
    <script>
        (function() {
            var theme = localStorage.getItem('kanban_theme');
            if (theme) { document.documentElement.setAttribute('data-theme', theme); }
        })();
    </script>
    <script>
        window.ENABLE_PASSWORD_RESET = <?= (defined('ENABLE_PASSWORD_RESET') && ENABLE_PASSWORD_RESET) ? 'true' : 'false' ?>;
    </script>
</head>
<body>
    <!-- App Container -->
    <div id="app-container" class="app-container">
        
        <!-- Sidebar Navigation -->
        <aside id="sidebar" class="sidebar">
            <div class="sidebar-header">
                <h2><i class="fa-solid fa-layer-group"></i> Galileo Kanban</h2>
                <button id="toggle-sidebar" class="icon-btn" title="Toggle Sidebar" data-i18n-title="btn_toggle_sidebar"><i class="fa-solid fa-bars"></i></button>
            </div>
            
            <div class="user-profile">
                <div class="avatar" id="nav-avatar">U</div>
                <div class="user-info">
                    <div style="display: flex; gap: 8px; align-items: center;">
                        <span id="nav-username" class="nav-username">User</span>
                        <button id="btn-logout" class="icon-btn text-muted" title="Log out" data-i18n-title="btn_logout"><i class="fa-solid fa-sign-out-alt"></i></button>
                    </div>
                </div>
            </div>

            <nav class="sidebar-nav">
                <!-- User Tools -->
                <div class="nav-section mb-2 mt-2" style="border-bottom: 1px solid var(--border-color); padding-bottom: 1rem;">
                    <ul class="board-list">
                        <li id="btn-nav-inbox">
                            <i class="fa-solid fa-envelope"></i> 
                            <span data-i18n="btn_inbox">Messages</span>
                            <span id="inbox-badge" class="badge bg-danger hidden" style="margin-left: auto; border-radius: 12px; padding: 2px 6px;">0</span>
                        </li>
                    </ul>
                    <div id="admin-nav-section" class="hidden" style="margin-top: 0.5rem;">
                        <ul class="board-list">
                            <li id="btn-nav-admin" style="color: var(--danger-color);"><i class="fa-solid fa-users-cog"></i> <span data-i18n="btn_admin">Manage Users</span> <span id="admin-pending-badge" class="badge bg-danger hidden">0</span></li>
                        </ul>
                    </div>
                </div>

                <div class="nav-section">
                    <h3><span data-i18n="my_boards">My Boards</span> <button id="btn-new-board" class="icon-btn small"><i class="fa-solid fa-plus"></i></button></h3>
                    <ul id="board-list" class="board-list">
                        <!-- Boards will be populated here -->
                    </ul>
                </div>
            </nav>
        </aside>

        <!-- Mobile Bottom Tab Navigation -->
        <nav id="mobile-bottom-nav" class="mobile-only hidden">
            <div class="mobile-nav-item" id="btn-mobile-nav-profile" title="Profile">
                <div class="avatar-small" id="mobile-nav-avatar" style="width: 28px; height: 28px; font-size: 1rem;">U</div>
            </div>
            <div class="mobile-nav-item" id="btn-mobile-nav-inbox" title="Messages">
                <i class="fa-solid fa-envelope" style="font-size: 1.5rem;"></i>
                <span id="mobile-inbox-badge" class="badge bg-danger hidden">0</span>
            </div>
            <div class="mobile-nav-item hidden" id="btn-mobile-nav-admin" style="color: var(--danger-color);" title="Admin">
                <i class="fa-solid fa-users-cog" style="font-size: 1.5rem;"></i>
                <span id="mobile-admin-pending-badge" class="badge bg-danger hidden">0</span>
            </div>
            <div class="mobile-nav-item" id="btn-mobile-nav-logout" title="Logout">
                <i class="fa-solid fa-sign-out-alt" style="font-size: 1.5rem;"></i>
            </div>
        </nav>

        <!-- Main Content Area -->
        <main id="main-content" class="main-content">
            
            <!-- Auth View (Login / Register) -->
            <section id="view-auth" class="view auth-view active">
                <div class="auth-card">
                    <div class="auth-header">
                        <h2><i class="fa-solid fa-meteor text-primary"></i> Galileo</h2>
                        <p data-i18n="auth_welcome">Welcome to your personal Kanban</p>
                    </div>
                    
                    <div class="auth-tabs">
                        <button class="auth-tab active" data-target="form-login" data-i18n="auth_login_tab">Log In</button>
                        <button class="auth-tab" data-target="form-register" data-i18n="auth_register_tab">Register</button>
                    </div>

                    <form id="form-login" class="auth-form active">
                        <div class="form-group">
                            <label data-i18n="auth_user_email">Username or Email</label>
                            <input type="text" name="username" required data-i18n-placeholder="auth_user_email" placeholder="john_doe">
                        </div>
                        <div class="form-group">
                            <label data-i18n="auth_password">Password</label>
                            <input type="password" name="password" required placeholder="••••••••">
                        </div>
                        <div id="forgot-pwd-container" style="text-align: right; margin-top: -10px; margin-bottom: 10px; display: none;">
                            <a href="#" id="link-forgot-pwd" class="text-muted" style="font-size: 0.8rem; text-decoration: underline;" data-i18n="forgot_password">Forgot password?</a>
                        </div>
                        <button type="submit" class="btn btn-primary btn-block" data-i18n="btn_login">Log In</button>
                    </form>

                    <form id="form-register" class="auth-form">
                        <div class="form-group">
                            <label data-i18n="auth_username">Username</label>
                            <input type="text" name="username" required placeholder="john_doe">
                        </div>
                        <div class="form-group">
                            <label data-i18n="auth_email">Email</label>
                            <input type="email" name="email" required placeholder="john@example.com">
                        </div>
                        <div class="form-group">
                            <label data-i18n="auth_password">Password</label>
                            <input type="password" name="password" required data-i18n-placeholder="ph_min_6" placeholder="Min. 6 characters">
                        </div>
                        <button type="submit" class="btn btn-primary btn-block" data-i18n="btn_create_account">Create Account</button>
                    </form>
                </div>
            </section>

            <!-- Board View -->
            <section id="view-board" class="view board-view hidden">
                <header class="board-header">
                    <div class="board-title-area">
                        <button id="btn-mobile-sidebar" class="mobile-only icon-btn"><i class="fa-solid fa-bars"></i></button>
                        <h1 id="current-board-title">Select a Board</h1>
                        <span id="current-board-role" class="badge role-badge hidden">Owner</span>
                    </div>
                    <div class="board-actions">
                        <button id="btn-board-chat" class="btn btn-secondary hidden">
                            <i class="fa-solid fa-comments"></i> <span data-i18n="btn_board_chat">Board Chat</span>
                            <span id="board-chat-badge" class="badge bg-danger hidden" style="margin-left: 4px; border-radius: 12px; padding: 2px 6px;">0</span>
                        </button>
                        <button id="btn-team" class="btn btn-secondary hidden"><i class="fa-solid fa-users"></i> <span data-i18n="btn_team">Team</span></button>
                        <button id="btn-settings" class="btn btn-secondary hidden"><i class="fa-solid fa-cog"></i> <span data-i18n="btn_settings">Board settings</span></button>
                    </div>
                </header>
                <div id="mobile-top-nav-margin" class="mobile-only"></div>

                <div id="board-canvas" class="board-canvas">
                    <!-- Columns will be populated here -->
                    <div class="add-column-wrapper hidden" id="wrapper-add-column">
                        <button id="btn-add-column" class="btn-add-column"><i class="fa-solid fa-plus"></i> <span data-i18n="btn_add_column">Add Column</span></button>
                    </div>
                </div>

                <div id="board-chat-sidebar" class="hidden" style="width: 350px; background: var(--bg-darker); border-left: 1px solid var(--border-color); display: flex; flex-direction: column; position: fixed; right: 0; top: 73px; bottom: 0; z-index: 1000; box-shadow: -2px 0 10px rgba(0,0,0,0.1);">
                    <div style="padding: 1rem; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; background: var(--bg-dark);">
                        <h3 data-i18n="board_chat_title">Project Chat</h3>
                        <button id="btn-close-board-chat" class="icon-btn"><i class="fa-solid fa-times"></i></button>
                    </div>
                    <div id="board-chat-history" style="flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; background: var(--bg-card);">
                        <!-- messages -->
                    </div>
                    <div style="padding: 1rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px) + 60px); border-top: 1px solid var(--border-color); background: var(--bg-dark);">
                        <form id="form-board-chat" style="display: flex; gap: 0.5rem;">
                            <input type="text" name="content" class="form-control" data-i18n-placeholder="ph_write_msg" placeholder="Type a message..." required autocomplete="off">
                            <button type="submit" class="btn btn-primary"><i class="fa-solid fa-location-arrow"></i></button>
                        </form>
                    </div>
                </div>

            </section>

            <!-- Admin View -->
            <section id="view-admin" class="view admin-view hidden">
                <header class="board-header">
                    <div class="board-title-area">
                        <button id="btn-mobile-sidebar-admin" class="mobile-only icon-btn"><i class="fa-solid fa-bars"></i></button>
                        <h1 data-i18n="admin_title">Administration</h1>
                    </div>
                    <div class="board-actions">
                        <button id="btn-admin-back" class="btn btn-secondary"><i class="fa-solid fa-arrow-left"></i> <span data-i18n="btn_back_boards">Back to Boards</span></button>
                    </div>
                </header>
                <div id="mobile-top-nav-margin" class="mobile-only"></div>

                <div class="admin-content" style="padding: 1rem;">
                    <div style="background: var(--card-bg); border-radius: 8px; border: 1px solid var(--border-color); overflow-x: auto; -webkit-overflow-scrolling: touch;">
                        <table style="width: 100%; min-width: 600px; border-collapse: collapse; text-align: left;">
                            <thead style="background: rgba(0,0,0,0.1); border-bottom: 2px solid var(--border-color);">
                                <tr>
                                    <th style="padding: 1rem;" data-i18n="txt_id">ID</th>
                                    <th style="padding: 1rem;" data-i18n="txt_username">User</th>
                                    <th style="padding: 1rem;" data-i18n="txt_role">Role</th>
                                    <th style="padding: 1rem;" data-i18n="txt_account_status">Status</th>
                                    <th style="padding: 1rem; text-align: right;" data-i18n="txt_actions">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="admin-users-list">
                                <!-- Loaded dynamically -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>

        </main>
    </div>

    <!-- Modals Overlay -->
    <div id="modal-overlay" class="modal-overlay hidden">
        <!-- New Board Modal -->
        <div id="modal-new-board" class="modal hidden">
            <div class="modal-header">
                <h3 data-i18n="create_new_board">Create New Board</h3>
                <button class="close-modal"><i class="fa-solid fa-times"></i></button>
            </div>
            <form id="form-create-board" class="modal-body">
                <div class="form-group">
                    <label data-i18n="ph_board_title">Board Title</label>
                    <input type="text" name="title" required placeholder="e.g. Project Alpha" autofocus>
                </div>
                <div class="form-group">
                    <label data-i18n="ph_board_desc">Description (Optional)</label>
                    <textarea name="description" rows="3" placeholder="What is this board about?"></textarea>
                </div>
                <div class="modal-actions">
                    <button type="button" class="btn btn-secondary close-modal-btn" data-i18n="btn_cancel">Cancel</button>
                    <button type="submit" class="btn btn-primary" data-i18n="btn_create_board">Create</button>
                </div>
            </form>
        </div>

        <!-- Task Modal (Create & Edit) -->
        <div id="modal-task" class="modal hidden">
            <div class="modal-header">
                <h3 id="modal-task-title" data-i18n="btn_create_task">Add/Edit Task</h3>
                <button class="close-modal"><i class="fa-solid fa-times"></i></button>
            </div>
            <form id="form-task" class="modal-body">
                <input type="hidden" name="task_id" id="task-id-input">
                <input type="hidden" name="column_id" id="task-column-id-input">
                
                <div class="form-group">
                    <label data-i18n="ph_task_title">Task Title</label>
                    <input type="text" name="title" id="task-title-input" required data-i18n-placeholder="ph_task_needs_done" placeholder="What needs to be done?">
                </div>
                <div class="form-group">
                    <label data-i18n="ph_task_desc">Description</label>
                    <textarea name="description" id="task-desc-input" rows="4" data-i18n-placeholder="ph_task_more_details" placeholder="Add more details..."></textarea>
                </div>
                <div class="form-group" style="position: relative;">
                    <label data-i18n="task_assign_to">Assign To (Optional User Search)</label>
                    <input type="hidden" name="assigned_to" id="task-assign-id-input">
                    <input type="text" id="task-assign-search-input" data-i18n-placeholder="ph_search_users" placeholder="Search by name or email..." class="form-control" autocomplete="off">
                    <div id="task-assign-results" class="autocomplete-results hidden"></div>
                </div>
                <div class="form-group mb-2">
                    <label for="task-due-date" data-i18n="due_date">Due Date</label>
                    <input type="date" id="task-due-date" name="due_date" class="form-control">
                </div>
                
                <div class="modal-actions flex-between">
                    <button type="button" id="btn-delete-task" class="btn btn-danger hidden"><i class="fa-solid fa-trash"></i> <span data-i18n="btn_delete_task_text">Delete</span></button>
                    <div>
                        <button type="button" class="btn btn-secondary close-modal-btn" data-i18n="btn_cancel">Cancel</button>
                        <button type="submit" class="btn btn-primary" data-i18n="btn_save_task">Save Task</button>
                    </div>
                </div>
            </form>

            <div id="task-comments-section" class="hidden mt-4 pt-4" style="border-top: 1px solid var(--border-color);">
                <h4 data-i18n="task_comments" class="mb-3" style="margin-left: 14px;">Comments</h4>
                <div id="task-comments-list" class="mb-3" style="max-height: 250px; overflow-y: auto;">
                    <!-- Comments loaded via JS -->
                </div>
                <form id="form-task-comment" class="flex-row">
                    <input type="text" name="content" class="form-control" data-i18n-placeholder="ph_write_comment" placeholder="Write a comment..." required autocomplete="off">
                    <button type="submit" class="btn btn-primary" data-i18n="btn_post_comment">Send</button>
                </form>
            </div>
        </div>

        <!-- Team Modal -->
        <div id="modal-team" class="modal hidden">
            <div class="modal-header">
                <h3 data-i18n="btn_team">Manage Team</h3>
                <button class="close-modal"><i class="fa-solid fa-times"></i></button>
            </div>
            <div class="modal-body">
                <div class="team-list" id="team-members-list">
                    <!-- Loaded dynamically -->
                </div>
                <hr class="my-4 border-muted">
                <h4 data-i18n="btn_add_member">Add Member</h4>
                <form id="form-add-member" class="flex-row mt-2" style="position: relative;">
                    <input type="hidden" name="user_id" id="add-member-user-id" required>
                    <input type="text" id="add-member-search" placeholder="Search by name or email..." data-i18n-placeholder="ph_search_users" class="flex-1 form-control" autocomplete="off" required>
                    <div id="add-member-results" class="autocomplete-results hidden"></div>
                    <select name="role" class="form-control w-auto">
                        <option value="owner" data-i18n="role_owner">Owner</option>
                        <option value="editor" selected data-i18n="role_editor">Editor</option>
                        <option value="viewer" data-i18n="role_viewer">Viewer</option>
                    </select>
                    <button type="submit" class="btn btn-primary" data-i18n="btn_add_member">Add</button>
                </form>
            </div>
        </div>

        <!-- Inbox Modal -->
        <div id="modal-inbox" class="modal hidden" style="width: 800px; max-width: 95%;">
            <div class="modal-header">
                <h3 data-i18n="inbox_title">Direct Messages</h3>
                <button class="close-modal"><i class="fa-solid fa-times"></i></button>
            </div>
            <div class="modal-body" style="padding: 0; display: flex; height: 500px;">
                <!-- Contacts Sidebar -->
                <div class="inbox-sidebar" style="border-right: 1px solid var(--border-color); display: flex; flex-direction: column;">
                    <div style="padding: 0.5rem; border-bottom: 1px solid var(--border-color); position: relative;">
                        <input type="hidden" id="inbox-search-user-id">
                        <input type="text" id="inbox-search-users" class="form-control" data-i18n-placeholder="ph_search_users" placeholder="Search by name or email..." autocomplete="off">
                        <div id="inbox-search-results" class="autocomplete-results hidden" style="width: 100%;"></div>
                    </div>
                    <div style="flex: 1; overflow-y: auto; padding: 0.5rem;" id="inbox-contacts-list">
                        <!-- contacts injected here -->
                        <div class="text-muted text-center" style="padding-top:2rem;" data-i18n="inbox_no_contacts">No contacts available.</div>
                    </div>
                </div>
                <!-- Chat View -->
                <div style="flex: 1; display: flex; flex-direction: column; background: var(--bg-darker);">
                    <div style="padding: 1rem; border-bottom: 1px solid var(--border-color); font-weight: bold;" id="inbox-chat-header">
                        <span data-i18n="inbox_select_contact">Select a contact from the list to start messaging.</span>
                    </div>
                    <div id="inbox-chat-history" style="flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem;">
                        <!-- messages injected here -->
                    </div>
                    <div style="padding: 1rem; border-top: 1px solid var(--border-color);">
                        <form id="form-inbox-send" style="display: flex; gap: 0.5rem;">
                            <input type="hidden" name="receiver_id" id="inbox-receiver-id">
                            <input type="text" name="content" class="form-control" data-i18n-placeholder="ph_write_msg" placeholder="Type a message..." required autocomplete="off" disabled>
                            <button type="submit" class="btn btn-primary" id="inbox-btn-send" disabled><i class="fa-solid fa-location-arrow"></i></button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Settings Modal -->
        <div id="modal-settings" class="modal hidden">
            <div class="modal-header">
                <h3 data-i18n="btn_settings">Board Settings</h3>
                <button class="close-modal"><i class="fa-solid fa-times"></i></button>
            </div>
            <form id="form-settings" class="modal-body">
                <div class="form-group">
                    <label data-i18n="ph_board_title">Board Title</label>
                    <input type="text" name="title" id="settings-title-input" required>
                </div>
                <div class="form-group">
                    <label data-i18n="ph_board_desc">Description (Optional)</label>
                    <textarea name="description" id="settings-desc-input" rows="3"></textarea>
                </div>
                
                <hr class="my-4 border-muted">
                <div class="form-group">
                    <label class="text-danger"><i class="fa-solid fa-exclamation-triangle"></i> <span data-i18n="danger_zone">Danger Zone</span></label>
                    <p class="text-muted" style="font-size: 0.85rem; margin-top: 0.2rem;" data-i18n="txt_delete_board_warn">Deleting this board will permanently remove all columns, tasks, and team members associated with it.</p>
                    <button type="button" id="btn-delete-board" class="btn btn-danger" style="margin-top: 0.5rem;"><i class="fa-solid fa-trash"></i> <span data-i18n="btn_delete_board">Delete Entire Board</span></button>
                </div>

                <div class="modal-actions flex-between" style="margin-top: 2rem;">
                    <div></div>
                    <div>
                        <button type="button" class="btn btn-secondary close-modal-btn" data-i18n="btn_cancel">Cancel</button>
                        <button type="submit" class="btn btn-primary" data-i18n="btn_save_changes">Save Changes</button>
                    </div>
                </div>
            </form>
        </div>

        <!-- User Profile Modal -->
        <div id="modal-profile" class="modal hidden">
            <div class="modal-header">
                <h3 data-i18n="profile_title">My Profile</h3>
                <button class="close-modal"><i class="fa-solid fa-times"></i></button>
            </div>
            <form id="form-profile" class="modal-body">
                <div class="form-group">
                    <label data-i18n="txt_username">Username</label>
                    <input type="text" id="profile-username" class="form-control" disabled>
                </div>
                <div class="form-group mt-2">
                    <label data-i18n="txt_language">Language</label>
                    <select id="lang-switch" class="form-control">
                        <option value="en">English</option>
                        <option value="cs">Čeština</option>
                    </select>
                </div>
                <div class="form-group mt-2">
                    <label data-i18n="txt_theme">Appearance</label>
                    <select id="theme-switch" class="form-control">
                        <option value="dark" data-i18n="theme_dark">Dark Mode</option>
                        <option value="light" data-i18n="theme_light">Light Mode</option>
                    </select>
                </div>
                
                <hr class="my-4 border-muted">
                <div id="profile-password-section">
                    <h4 data-i18n="txt_change_password">Change Password</h4>
                    
                    <div class="form-group mt-2">
                        <label data-i18n="txt_current_password">Current Password</label>
                        <input type="password" name="old_password" data-i18n-placeholder="ph_old_password" placeholder="Enter current password">
                    </div>
                    <div class="form-group">
                        <label data-i18n="txt_new_password">New Password</label>
                        <input type="password" name="new_password" data-i18n-placeholder="ph_new_password" placeholder="Min. 6 characters">
                    </div>
                    <div class="form-group">
                        <label data-i18n="txt_confirm_password">Confirm New Password</label>
                        <input type="password" name="confirm_password" data-i18n-placeholder="ph_confirm_password" placeholder="Retype new password">
                    </div>
                    <div class="form-group mt-2">
                        <button type="button" id="btn-update-password" class="btn btn-primary" data-i18n="btn_update_password">Update Password</button>
                    </div>
                </div>
                <div id="profile-ldap-warning" class="hidden mt-4 p-3" style="background: rgba(0,0,0,0.05); border-left: 4px solid var(--primary-color);">
                    <p style="margin: 0; font-size: 0.9rem;" data-i18n="txt_ldap_pwd_warning">Your account is managed via Active Directory. Password changes must be performed through your domain administrator.</p>
                </div>

                <div class="modal-actions flex-between" style="margin-top: 2rem;">
                    <div></div>
                    <div>
                        <button type="button" class="btn btn-secondary close-modal-btn" data-i18n="btn_cancel">Cancel</button>
                        <button type="button" id="btn-profile-ok" class="btn btn-primary" data-i18n="btn_ok">OK</button>
                    </div>
                </div>
            </form>
        </div>

        <!-- Admin Manage User Modal -->
        <div id="modal-admin-user" class="modal hidden">
            <div class="modal-header">
                <h3 id="admin-modal-title" data-i18n="manage">Manage User</h3>
                <button class="close-modal"><i class="fa-solid fa-times"></i></button>
            </div>
            <div class="modal-body">
                <div style="margin-bottom: 1.5rem;">
                    <form id="form-admin-username" class="flex-row" style="margin-bottom: 0.5rem; gap: 8px;">
                        <input type="hidden" id="admin-edit-user-id" name="user_id">
                        <input type="text" id="admin-edit-username" name="new_username" class="form-control" style="font-size: 1.2rem; font-weight: bold; padding: 4px 8px; flex: 1;" required>
                        <button type="submit" class="btn btn-secondary btn-sm" data-i18n="btn_save_changes">Save Changes</button>
                    </form>
                    <span id="admin-edit-email" class="text-muted">email</span>
                    <span id="admin-edit-role" class="badge text-primary" style="margin-left: 0.5rem;">User</span>
                </div>
                
                <!-- Activate / Deactivate -->
                <div style="margin-bottom: 2rem; padding: 1rem; border: 1px solid var(--border-color); border-radius: 6px;">
                    <h4 style="margin-bottom: 0.5rem; margin-top: 0;" data-i18n="txt_account_status">Account Status</h4>
                    <p class="text-muted" style="font-size: 0.85rem; margin-bottom: 0.5rem;" data-i18n="txt_deactivate_warn">Deactivating a user immediately prevents them from logging in, but preserves their data and task history.</p>
                    <button type="button" id="btn-admin-toggle-active" class="btn btn-secondary" data-i18n="btn_deactivate">Deactivate Account</button>
                </div>

                <!-- Force Password Change -->
                <h4 style="margin-bottom: 0.5rem;" data-i18n="txt_force_password">Force Password Change</h4>
                <form id="form-admin-password" class="form-group flex-row mb-4">
                    <input type="hidden" id="admin-pw-user-id" name="user_id">
                    <input type="password" name="new_password" class="form-control flex-1" placeholder="New Password (min 6 chars)" required>
                    <button type="submit" class="btn btn-primary" data-i18n="btn_set_password">Set Password</button>
                </form>

                <!-- Transfer Board Ownership -->
                <h4 style="margin-bottom: 0.5rem;" data-i18n="txt_transfer_ownership">Transfer Board Ownership</h4>
                <p class="text-muted" style="font-size: 0.85rem; margin-bottom: 0.5rem;" data-i18n="txt_transfer_warn">Promote this user to Owner on a board they are part of.</p>
                <form id="form-admin-transfer" class="form-group flex-row mb-4">
                    <input type="hidden" id="admin-transfer-user-id" name="new_owner_user_id">
                    <select id="admin-transfer-board-id" name="board_id" class="form-control flex-1" required>
                        <option value="" data-i18n="opt_select_board">Select board...</option>
                    </select>
                    <button type="submit" class="btn btn-secondary" data-i18n="btn_transfer">Transfer</button>
                </form>

                <hr class="my-4 border-muted">
                <!-- Delete Entire User -->
                <div class="form-group">
                    <label class="text-danger"><i class="fa-solid fa-exclamation-triangle"></i> <span data-i18n="danger_zone">Danger Zone</span></label>
                    <p class="text-muted" style="font-size: 0.85rem; margin-top: 0.2rem;" data-i18n="txt_delete_user_warn">Permanently delete this user and ALL data they have created.</p>
                    <button type="button" id="btn-admin-delete-user" class="btn btn-danger" style="margin-top: 0.5rem;"><i class="fa-solid fa-trash"></i> <span data-i18n="btn_delete_user">DELETE USER</span></button>
                </div>
            </div>
        </div>

        <!-- Admin Delete Confirm Modal with Transfer -->
        <div id="modal-admin-delete-confirm" class="modal hidden">
            <div class="modal-header">
                <h3 class="text-danger"><i class="fa-solid fa-exclamation-triangle"></i> <span data-i18n="danger_zone">Danger Zone</span></h3>
                <button class="close-modal"><i class="fa-solid fa-times"></i></button>
            </div>
            <form id="form-admin-delete-confirm" class="modal-body">
                <p class="text-muted mb-3" data-i18n="txt_sole_owner_warning" style="font-size: 0.95rem;">This user is the sole owner of some boards. Please select a new owner for these boards before deleting the user, otherwise they will be deleted.</p>
                
                <div class="form-group mb-4">
                    <label data-i18n="ph_select_new_owner">Select new owner...</label>
                    <select id="admin-delete-transfer-owner" name="new_owner_id" class="form-control" required>
                        <option value="">Loading...</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>Type <strong id="admin-delete-confirm-username-display"></strong> to confirm deletion</label>
                    <input type="text" id="admin-delete-confirm-input" class="form-control" data-i18n-placeholder="ph_username" placeholder="Username" required autocomplete="off">
                </div>

                <div class="modal-actions flex-between" style="margin-top: 2rem;">
                    <button type="button" class="btn btn-secondary close-modal-btn" data-i18n="btn_cancel">Cancel</button>
                    <button type="submit" class="btn btn-danger" data-i18n="btn_confirm_delete_transfer">Confirm Delete & Transfer</button>
                </div>
            </form>
        </div>

        <!-- Forgot Password Modal -->
        <div id="modal-forgot-password" class="modal hidden">
            <div class="modal-header">
                <h3 data-i18n="forgot_password">Forgot Password</h3>
                <button class="close-modal"><i class="fa-solid fa-times"></i></button>
            </div>
            <form id="form-forgot-password" class="modal-body">
                <p class="text-muted mb-3" style="font-size: 0.95rem;">Enter your email or username below and we will send you a secure link to reset your password.</p>
                <div class="form-group">
                    <label data-i18n="auth_user_email">Username or Email</label>
                    <input type="text" name="username" class="form-control" required data-i18n-placeholder="auth_user_email" placeholder="john_doe">
                </div>
                <div class="modal-actions flex-between" style="margin-top: 1.5rem;">
                    <button type="button" class="btn btn-secondary close-modal-btn" data-i18n="btn_cancel">Cancel</button>
                    <button type="submit" class="btn btn-primary" data-i18n="btn_send">Send Link</button>
                </div>
            </form>
        </div>

        <!-- Reset Password Modal (Triggered by URL) -->
        <div id="modal-reset-password" class="modal hidden">
            <div class="modal-header">
                <h3 data-i18n="txt_new_password">New Password</h3>
            </div>
            <form id="form-reset-password" class="modal-body">
                <input type="hidden" name="token" id="reset-pwd-token-input">
                <p class="text-muted mb-3" style="font-size: 0.95rem;">Please enter your new password below.</p>
                <div class="form-group">
                    <label data-i18n="txt_new_password">New Password</label>
                    <input type="password" name="password" class="form-control" required data-i18n-placeholder="ph_min_6" placeholder="Min. 6 characters">
                </div>
                <div class="form-group">
                    <label data-i18n="txt_confirm_password">Confirm New Password</label>
                    <input type="password" name="confirm_password" class="form-control" required placeholder="Retype new password">
                </div>
                <div class="modal-actions" style="margin-top: 1.5rem; justify-content: flex-end;">
                    <button type="submit" class="btn btn-primary" data-i18n="btn_save_changes">Save Password</button>
                </div>
            </form>
        </div>

    </div>

    <!-- Toast Notification Container -->
    <div id="toast-container" class="toast-container"></div>

    <!-- Scripts -->
    <script src="assets/js/api.js?v=<?= filemtime('assets/js/api.js') ?>"></script>
    <script src="assets/js/app.js?v=<?= filemtime('assets/js/app.js') ?>"></script>
</body>
</html>
