{$_("me.title")}

{$_("me.welcome", { values: { name: data.authStatus.user!.artist_name }, })}

{#if isModel(data.authStatus.user!)} {/if}

{$_("me.settings.title")}

{$_("me.settings.profile_title")} {$_("me.settings.profile_subtitle")}

{$_("me.settings.avatar")} {#if avatar}

{avatar.name} {displaySize(avatar.size)}

{/if}

{$_("me.settings.first_name")}

{$_("me.settings.last_name")}

{$_("me.settings.artist_name")}

{$_("me.settings.description")}

</div>
                                <div class="space-y-2">
                                    <Label for="tags">{$_("me.settings.tags")}</Label>
                                    <TagsInput
                                        id="tags"
                                        bind:value={tags}
                                        placeholder={$_("me.settings.tags_placeholder")}
                                        class="bg-background/50 border-primary/20 focus:border-primary"
                                    />
                                </div>
                                {#if isProfileError}
                                    <div class="grid w-full items-start gap-4">
                                        <Alert.Root variant="destructive">
                                            <Alert.Title class="items-center flex"
                                                ><span
                                                    class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"
                                                ></span>{$_("me.settings.error")}</Alert.Title
                                            >
                                            <Alert.Description>{profileError}</Alert.Description>
                                        </Alert.Root>
                                    </div>
                                {/if}
                                <Button
                                    type="submit"
                                    class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
                                    disabled={isProfileLoading}
                                >
                                    {#if isProfileLoading}
                                        <div
                                            class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"
                                        ></div>
                                        {$_("me.settings.updating_profile")}
                                    {:else}
                                        {$_("me.settings.update_profile")}
                                    {/if}
                                </Button>
                            </form>
                        </CardContent>
                    </Card>

<Card class="bg-card/50 border-primary/20">
                        <CardHeader>
                            <CardTitle>{$_("me.settings.privacy_title")}</CardTitle>
                            <CardDescription>{$_("me.settings.privacy_subtitle")}</CardDescription>
                        </CardHeader>
                        <CardContent class="space-y-4">
                            <form onsubmit={handleSecuritySubmit} class="space-y-4">
                                
                                <div class="space-y-2">
                                    <Label for="email">{$_("me.settings.email")}</Label>
                                    <Input
                                        id="email"
                                        type="email"
                                        placeholder={$_("me.settings.email_placeholder")}
                                        bind:value={email}
                                        required
                                        class="bg-background/50 border-primary/20 focus:border-primary"
                                    />
                                </div>

<div class="space-y-2">
                                    <Label for="password">{$_("me.settings.password")}</Label>
                                    <div class="relative">
                                        <Input
                                            id="password"
                                            type={showPassword ? "text" : "password"}
                                            placeholder={$_("me.settings.password_placeholder")}
                                            bind:value={password}
                                            required
                                            class="bg-background/50 border-primary/20 focus:border-primary pr-10"
                                        />
                                        <button
                                            type="button"
                                            onclick={() => (showPassword = !showPassword)}
                                            class="cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                                        >
                                            {#if showPassword}
                                                <span class="icon-[ri--eye-off-line] w-4 h-4"
                                                ></span>
                                            {:else}
                                                <span class="icon-[ri--eye-line] w-4 h-4"></span>
                                            {/if}
                                        </button>
                                    </div>
                                </div>

<div class="space-y-2">
                                    <Label for="confirmPassword"
                                        >{$_("me.settings.confirm_password")}</Label
                                    >
                                    <div class="relative">
                                        <Input
                                            id="confirmPassword"
                                            type={showConfirmPassword ? "text" : "password"}
                                            placeholder={$_(
                                                "me.settings.confirm_password_placeholder",
                                            )}
                                            bind:value={confirmPassword}
                                            required
                                            class="bg-background/50 border-primary/20 focus:border-primary pr-10"
                                        />
                                        <button
                                            type="button"
                                            onclick={() =>
                                                (showConfirmPassword = !showConfirmPassword)}
                                            class="cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                                        >
                                            {#if showConfirmPassword}
                                                <span class="icon-[ri--eye-off-line] w-4 h-4"
                                                ></span>
                                            {:else}
                                                <span class="icon-[ri--eye-line] w-4 h-4"></span>
                                            {/if}
                                        </button>
                                    </div>
                                </div>
                                {#if isSecurityError}
                                    <div class="grid w-full items-start gap-4">
                                        <Alert.Root variant="destructive">
                                            <Alert.Title class="items-center flex"
                                                ><span
                                                    class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"
                                                ></span>{$_("me.settings.error")}</Alert.Title
                                            >
                                            <Alert.Description>{securityError}</Alert.Description>
                                        </Alert.Root>
                                    </div>
                                {/if}
                                <Button
                                    variant="outline"
                                    type="submit"
                                    class="cursor-pointer w-full border-primary/20 hover:bg-primary/10"
                                    disabled={isSecurityLoading}
                                >
                                    {#if isSecurityLoading}
                                        <div
                                            class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"
                                        ></div>
                                        {$_("me.settings.updating_security")}
                                    {:else}
                                        {$_("me.settings.update_security")}
                                    {/if}
                                </Button>
                            </form>
                        </CardContent>
                    </Card>
                </div>
            </TabsContent>
        </Tabs>
    </div>
</div>