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

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

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

{#if avatar}

{:else}

Upload

{/if}

JPG, PNG · max 2 MB

Click or drop to {avatar ? "change" : "upload"}

{#if avatar} {/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>
</div>