Edit article

Title *

Slug *

Excerpt

</div>

<div class="space-y-1.5">
      <div class="flex items-center justify-between">
        <Label>Content (Markdown)</Label>
        <div class="flex rounded-lg border border-border/40 overflow-hidden text-xs sm:hidden">
          <button
            type="button"
            class={`px-3 py-1 transition-colors ${editorTab === "write" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
            onclick={() => (editorTab = "write")}
          >Write</button>
          <button
            type="button"
            class={`px-3 py-1 transition-colors ${editorTab === "preview" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
            onclick={() => (editorTab = "preview")}
          >Preview</button>
        </div>
      </div>
      <div class="sm:grid sm:grid-cols-2 sm:gap-4 min-h-96">
        <Textarea
          bind:value={content}
          class={`h-full min-h-96 font-mono text-sm resize-none ${editorTab === "preview" ? "hidden sm:flex" : ""}`}
        />
        <div
          class={`rounded-lg border border-border/40 bg-muted/20 p-4 overflow-auto prose prose-sm max-w-none prose-headings:text-foreground prose-p:text-muted-foreground min-h-96 ${editorTab === "write" ? "hidden sm:block" : ""}`}
        >
          {#if preview}
            {@html preview}
          {:else}
            <p class="text-muted-foreground italic text-sm">Preview will appear here…</p>
          {/if}
        </div>
      </div>
    </div>

<div class="space-y-1.5">
      <Label>Cover image</Label>
      {#if imageId}
        <img
          src={getAssetUrl(imageId, "thumbnail")}
          alt=""
          class="h-24 rounded object-cover mb-2"
        />
      {/if}
      <FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handleImageUpload} />
    </div>

<div class="space-y-1.5">
      <Label>Author</Label>
      <Select type="single" bind:value={authorId}>
        <SelectTrigger class="w-full">
          {#if selectedAuthor}
            {#if selectedAuthor.avatar}
              <img src={getAssetUrl(selectedAuthor.avatar, "mini")} alt="" class="h-5 w-5 rounded-full object-cover shrink-0" />
            {/if}
            {selectedAuthor.artist_name}
          {:else}
            <span class="text-muted-foreground">No author</span>
          {/if}
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="">No author</SelectItem>
          {#each data.authors as author (author.id)}
            <SelectItem value={author.id}>
              {#if author.avatar}
                <img src={getAssetUrl(author.avatar, "mini")} alt="" class="h-5 w-5 rounded-full object-cover shrink-0" />
              {/if}
              {author.artist_name}
            </SelectItem>
          {/each}
        </SelectContent>
      </Select>
    </div>

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <div class="space-y-1.5">
        <Label for="category">Category</Label>
        <Input id="category" bind:value={category} />
      </div>
      <div class="space-y-1.5">
        <Label for="publishDate">Publish date</Label>
        <Input id="publishDate" type="datetime-local" bind:value={publishDate} />
      </div>
    </div>

<label class="flex items-center gap-2 cursor-pointer">
      <input type="checkbox" bind:checked={featured} class="rounded" />
      <span class="text-sm">Featured</span>
    </label>

<div class="flex gap-3 pt-2">
      <Button onclick={handleSubmit} disabled={saving}>
        {saving ? "Saving…" : "Save changes"}
      </Button>
      <Button variant="outline" href="/admin/articles">Cancel</Button>
    </div>
  </div>
</div>