New article

Title * { if (!slug) slug = generateSlug(title); }} placeholder="Article title" />

Slug *

Excerpt

</div>

<div class="space-y-1.5">
      <Label>Content (Markdown)</Label>
      <div class="grid grid-cols-2 gap-4 min-h-96">
        <Textarea
          bind:value={content}
          placeholder="Write in Markdown…"
          class="h-full min-h-96 font-mono text-sm resize-none"
        />
        <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"
        >
          {#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>
      <FileDropZone
        accept="image/*"
        maxFileSize={10 * MEGABYTE}
        onUpload={handleImageUpload}
      />
      {#if imageId}<p class="text-xs text-green-600 mt-1">Image uploaded ✓</p>{/if}
    </div>

<div class="grid grid-cols-2 gap-4">
      <div class="space-y-1.5">
        <Label for="category">Category</Label>
        <Input id="category" bind:value={category} placeholder="e.g. news, tutorial…" />
      </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 ? "Creating…" : "Create article"}
      </Button>
      <Button variant="outline" href="/admin/articles">Cancel</Button>
    </div>
  </div>
</div>