{ e.preventDefault(); handleSubmit(); }} class="space-y-4 py-2" > {#if error}

{error}

{/if}

Name *

Description

</div>

<div class="space-y-2">
          <Label for="traits">Traits</Label>
          <Input
            id="traits"
            type="text"
            bind:value={traits}
            placeholder="Brave, Curious, Stubborn (comma-separated)"
          />
          <p class="text-[0.8rem] text-muted-foreground">
            Comma-separated personality traits
          </p>
        </div>

<div class="space-y-2">
          <Label for="visualDescriptors">Visual Descriptors</Label>
          <Input
            id="visualDescriptors"
            type="text"
            bind:value={visualDescriptors}
            placeholder="Tall, dark hair, blue eyes (comma-separated)"
          />
          <p class="text-[0.8rem] text-muted-foreground">
            Used for portrait generation
          </p>
        </div>

<div class="space-y-2">
          <Label>Portrait</Label>
          <div class="flex items-start gap-4">
            {#if portrait}
              <div class="relative group">
                <img
                  src={normalizeImageDataUrl(portrait) ?? ""}
                  alt="Portrait preview"
                  class="h-20 w-20 rounded-md object-cover ring-1 ring-border"
                />
                <button
                  type="button"
                  class="absolute -right-2 -top-2 rounded-full bg-destructive p-1 text-destructive-foreground hover:bg-destructive/90 opacity-0 group-hover:opacity-100 transition-opacity shadow-sm"
                  onclick={removePortrait}
                >
                  <X class="h-3 w-3" />
                </button>
              </div>
            {:else}
              <div
                class="flex h-20 w-20 items-center justify-center rounded-md bg-muted ring-1 ring-border"
              >
                <User class="h-8 w-8 text-muted-foreground" />
              </div>
            {/if}

<div class="flex-1">
              <Button
                variant="outline"
                class="w-full relative cursor-pointer"
                disabled={uploadingPortrait}
              >
                {#if uploadingPortrait}
                  <Loader2 class="mr-2 h-4 w-4 animate-spin" />
                {:else}
                  <ImageUp class="mr-2 h-4 w-4" />
                {/if}
                Upload Image
                <input
                  type="file"
                  accept="image/*"
                  class="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
                  onchange={handlePortraitUpload}
                  disabled={uploadingPortrait}
                />
              </Button>
            </div>
          </div>
        </div>

<div class="space-y-2">
          <Label for="tags">Tags</Label>
          <TagInput
            value={tags}
            type="character"
            onChange={(newTags) => (tags = newTags)}
            placeholder="Add tags..."
          />
          <p class="text-[0.8rem] text-muted-foreground">
            For organizing your vault
          </p>
        </div>
      </form>
    </div>

<ResponsiveModal.Footer class="gap-2 sm:gap-0">
      <Button
        type="submit"
        form="character-form"
        disabled={saving || !name.trim()}
        class="w-full"
      >
        {#if saving}
          <Loader2 class="h-4 w-4 animate-spin" />
        {/if}
        {isEditing ? "Save Changes" : "Create Character"}
      </Button>
    </ResponsiveModal.Footer>
  </ResponsiveModal.Content>
</ResponsiveModal.Root>