{$_("admin.article_form.new_title")}

{$_("admin.common.title_field")} { if (!slug) slug = generateSlug(title); }} placeholder={$_("admin.article_form.title_placeholder")} class="bg-background/50 border-primary/20 focus:border-primary" />

{$_("admin.common.slug_field")}

{$_("admin.article_form.excerpt")}

</div>

<div class="space-y-1.5">
        <div class="flex items-center justify-between">
          <Label>{$_("admin.article_form.content")}</Label>
          <div class="flex rounded-lg border border-border/40 overflow-hidden text-xs sm:hidden">
            <Button
              variant="ghost"
              size="sm"
              class={`px-3 py-1 h-auto rounded-none transition-colors ${editorTab === "write" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
              onclick={() => (editorTab = "write")}>{$_("admin.common.write")}</Button
            >
            <Button
              variant="ghost"
              size="sm"
              class={`px-3 py-1 h-auto rounded-none transition-colors ${editorTab === "preview" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
              onclick={() => (editorTab = "preview")}>{$_("admin.common.preview")}</Button
            >
          </div>
        </div>
        
        <div class="sm:grid sm:grid-cols-2 sm:gap-4 min-h-96">
          <Textarea
            bind:value={content}
            placeholder={$_("admin.article_form.content_placeholder")}
            class={`h-full min-h-96 font-mono text-sm resize-none bg-background/50 border-primary/20 focus:border-primary ${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">
                {$_("admin.article_form.preview_placeholder")}
              </p>
            {/if}
          </div>
        </div>
      </div>

<div class="space-y-1.5">
        <Label>{$_("admin.common.cover_image")}</Label>
        <FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handleImageUpload} />
        {#if imageId}
          <p class="text-xs text-green-600 mt-1">{$_("admin.common.image_uploaded")} ✓</p>
        {/if}
      </div>

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div class="space-y-1.5">
          <Label for="category">{$_("admin.article_form.category")}</Label>
          <Input
            id="category"
            bind:value={category}
            placeholder={$_("admin.article_form.category_placeholder")}
            class="bg-background/50 border-primary/20 focus:border-primary"
          />
        </div>
        <div class="space-y-1.5">
          <Label>{$_("admin.common.publish_date")}</Label>
          <DatePicker bind:value={publishDate} placeholder={$_("admin.common.publish_date")} />
        </div>
      </div>

<div class="space-y-1.5">
        <Label>{$_("admin.common.tags")}</Label>
        <TagsInput bind:value={tags} class="bg-background/50 border-primary/20 focus:border-primary" />
      </div>

<label class="flex items-center gap-2 cursor-pointer">
        <input type="checkbox" bind:checked={featured} class="rounded" />
        <span class="text-sm">{$_("admin.common.featured")}</span>
      </label>

<div class="flex gap-3 pt-2">
        <Button
          onclick={handleSubmit}
          disabled={saving}
          class="cursor-pointer bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
        >
          {saving ? $_("admin.common.creating") : $_("admin.article_form.create")}
        </Button>
        <Button variant="outline" href="/admin/articles">{$_("common.cancel")}</Button>
      </div>
    </CardContent>
  </Card>
</div>