{$_("me.title")}

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

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

{$_("me.settings.title")} {$_("me.recordings.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>

<TabsContent value="recordings" class="space-y-6">
                <div class="mb-6 flex justify-between items-center">
                    <div>
                        <h2 class="text-2xl font-bold text-card-foreground">
                            {$_("me.recordings.title")}
                        </h2>
                        <p class="text-muted-foreground">
                            {$_("me.recordings.description")}
                        </p>
                    </div>
                    <Button
                        href="/play"
                        class="cursor-pointer bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
                    >
                        <span class="icon-[ri--play-line] w-4 h-4 mr-2"></span>
                        {$_("me.recordings.go_to_play")}
                    </Button>
                </div>

{#if recordings.length === 0}
                    <Card class="bg-card/50 border-primary/20">
                        <CardContent class="py-12">
                            <div class="flex flex-col items-center justify-center text-center">
                                <div
                                    class="mb-4 p-4 rounded-full bg-muted/30 border border-border/30"
                                >
                                    <span
                                        class="icon-[ri--play-list-2-line] w-12 h-12 text-muted-foreground"
                                    ></span>
                                </div>
                                <h3 class="text-xl font-semibold mb-2">
                                    {$_("me.recordings.no_recordings")}
                                </h3>
                                <p class="text-muted-foreground mb-6 max-w-md">
                                    {$_("me.recordings.no_recordings_description")}
                                </p>
                                <Button
                                    href="/play"
                                    class="cursor-pointer bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
                                >
                                    <span class="icon-[ri--play-line] w-4 h-4 mr-2"></span>
                                    {$_("me.recordings.go_to_play")}
                                </Button>
                            </div>
                        </CardContent>
                    </Card>
                {:else}
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        {#each recordings as recording (recording.id)}
                            <RecordingCard
                                {recording}
                                onPlay={handlePlayRecording}
                                onDelete={handleDeleteRecording}
                            />
                        {/each}
                    </div>
                {/if}
            </TabsContent>
        </Tabs>
    </div>
</div>