<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>WaifuBoard - Users</title>
        <link rel="stylesheet" href="/views/css/globals.css" />
        <link
            rel="stylesheet"
            href="/views/css/components/updateNotifier.css"
        />
        <link rel="stylesheet" href="/views/css/users.css" />
        <link
            rel="icon"
            href="/public/assets/waifuboards.ico"
            type="image/x-icon"
        />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body>
        <div class="page-wrapper">
            <div class="background-gradient"></div>

            <div class="content-container">
                <div class="header-section">
                    <h1 class="page-title">Who's exploring?</h1>
                    <p class="page-subtitle">Select your profile to continue</p>
                </div>

                <div class="users-grid" id="usersGrid"></div>

                <button class="btn-add-user" id="btnAddUser">
                    <svg
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <line x1="12" y1="5" x2="12" y2="19"></line>
                        <line x1="5" y1="12" x2="19" y2="12"></line>
                    </svg>
                    Add User
                </button>
            </div>
        </div>

        <div class="modal" id="modalCreateUser">
            <div class="modal-overlay"></div>
            <div class="modal-content">
                <div class="modal-header">
                    <h2>Create New User</h2>
                    <button class="modal-close" id="closeCreateModal">
                        <svg
                            width="24"
                            height="24"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                        >
                            <line x1="18" y1="6" x2="6" y2="18"></line>
                            <line x1="6" y1="6" x2="18" y2="18"></line>
                        </svg>
                    </button>
                </div>
                <form id="createUserForm">
                    <div class="form-group">
                        <label for="username">Username</label>
                        <input
                            type="text"
                            id="username"
                            name="username"
                            required
                            maxlength="20"
                            placeholder="Enter your name"
                        />
                    </div>
                    <div class="form-group">
                        <label>Profile Picture</label>
                        <div class="avatar-upload-area" id="avatarUploadArea">
                            <div class="avatar-preview" id="avatarPreview">
                                <svg
                                    class="avatar-preview-placeholder"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    stroke-width="2"
                                >
                                    <path
                                        d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
                                    ></path>
                                    <circle cx="12" cy="7" r="4"></circle>
                                </svg>
                            </div>
                            <p class="avatar-upload-text">
                                Click to upload or drag and drop
                            </p>
                            <p class="avatar-upload-hint">
                                PNG, JPG, GIF... up to 50 MB
                            </p>
                        </div>
                        <input type="file" id="avatarInput" accept="image/*" />
                    </div>
                    <div class="modal-actions">
                        <button
                            type="button"
                            class="btn-secondary"
                            id="cancelCreate"
                        >
                            Cancel
                        </button>
                        <button type="submit" class="btn-primary">
                            Create User
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="modal" id="modalUserActions">
            <div class="modal-overlay"></div>
            <div class="modal-content" style="max-width: 400px">
                <div class="modal-header">
                    <h2 id="actionsModalTitle">Manage Profile</h2>
                    <button class="modal-close" id="closeActionsModal">
                        <svg
                            width="24"
                            height="24"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                        >
                            <line x1="18" y1="6" x2="6" y2="18"></line>
                            <line x1="6" y1="6" x2="18" y2="18"></line>
                        </svg>
                    </button>
                </div>
                <div id="actionsModalContent"></div>
            </div>
        </div>

        <div class="modal" id="modalEditUser">
            <div class="modal-overlay"></div>
            <div class="modal-content">
                <div class="modal-header">
                    <h2>Edit Profile</h2>
                    <button class="modal-close" id="closeEditModal">
                        <svg
                            width="24"
                            height="24"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                        >
                            <line x1="18" y1="6" x2="6" y2="18"></line>
                            <line x1="6" y1="6" x2="18" y2="18"></line>
                        </svg>
                    </button>
                </div>
                <form id="editUserForm">
                    <div class="form-group">
                        <label for="editUsername">Username</label>
                        <input
                            type="text"
                            id="editUsername"
                            name="username"
                            required
                            maxlength="20"
                            placeholder="Enter your new name"
                        />
                    </div>
                    <div class="form-group">
                        <label>Profile Picture</label>
                        <div
                            class="avatar-upload-area"
                            id="editAvatarUploadArea"
                        >
                            <div class="avatar-preview" id="editAvatarPreview">
                                <svg
                                    class="avatar-preview-placeholder"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    stroke-width="2"
                                >
                                    <path
                                        d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
                                    ></path>
                                    <circle cx="12" cy="7" r="4"></circle>
                                </svg>
                            </div>
                            <p class="avatar-upload-text">
                                Click to upload or drag and drop
                            </p>
                            <p class="avatar-upload-hint">PNG, JPG up to 5MB</p>
                        </div>
                        <input
                            type="file"
                            id="editAvatarInput"
                            accept="image/*"
                        />
                    </div>
                    <div class="modal-actions">
                        <button
                            type="button"
                            class="btn-secondary"
                            id="cancelEdit"
                        >
                            Cancel
                        </button>
                        <button type="submit" class="btn-primary">
                            Save Changes
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="modal" id="modalAniList">
            <div class="modal-overlay"></div>
            <div class="modal-content">
                <div class="modal-header">
                    <h2>AniList Integration</h2>
                    <button class="modal-close" id="closeAniListModal">
                        <svg
                            width="24"
                            height="24"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                        >
                            <line x1="18" y1="6" x2="6" y2="18"></line>
                            <line x1="6" y1="6" x2="18" y2="18"></line>
                        </svg>
                    </button>
                </div>
                <div id="aniListContent"></div>
            </div>
        </div>

        <div id="userToastContainer"></div>
        <div id="updateToast" class="hidden">
            <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
            <a
                id="downloadButton"
                href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
                target="_blank"
            >
                Click To Download
            </a>
        </div>
        <script>
            localStorage.removeItem("token");
        </script>
        <script src="/src/scripts/updateNotifier.js"></script>
        <script src="/src/scripts/users.js"></script>
    </body>
</html>
