{{define "article_create"}}
{{template "header" .}}

<section class="max-w-3xl mx-auto px-4 py-10">
    <h2 class="text-2xl font-bold text-gray-900 mb-8">{{.FormTitleText}}</h2>

    {{if .Error}}
    <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6 text-sm">
        {{.Error}}
    </div>
    {{end}}

    <form action="{{.FormAction}}" method="post" class="space-y-6">
        <!-- Title -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "article_title"}}</label>
            <input type="text" name="title" value="{{.FormTitle}}"
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
                placeholder="{{index .Tr "article_title"}}">
        </div>

        <!-- Slug -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "article_slug"}}</label>
            <input type="text" name="slug" value="{{.FormSlug}}"
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
                placeholder="{{index .Tr "article_slug_hint"}}">
            <p class="text-xs text-gray-400 mt-1">{{index .Tr "article_slug_hint"}}</p>
        </div>

        <!-- Summary -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "article_summary"}}</label>
            <textarea name="summary" rows="3"
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors resize-y"
                placeholder="{{index .Tr "article_summary"}}">{{.FormSummary}}</textarea>
        </div>

        <!-- Content (EasyMDE Markdown Editor) -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "article_content"}}</label>
            <textarea id="articleContent" name="content">{{.FormContent}}</textarea>
        </div>

        <!-- Cover -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "article_cover"}}</label>
            <input type="text" name="cover" value="{{.FormCover}}"
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
                placeholder="https://...">
        </div>

        <!-- IsTop -->
        <div class="flex items-center gap-2">
            <input type="checkbox" name="is_top" value="1" id="isTopCheckbox" {{if .FormIsTop}}checked{{end}}
                class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
            <label for="isTopCheckbox" class="text-sm font-medium text-gray-700">{{index .Tr "article_is_top"}}</label>
        </div>

        <!-- Submit Buttons -->
        <div class="flex gap-3">
            <button type="submit" name="status" value="0"
                class="px-6 py-3 bg-gray-200 text-gray-700 rounded-lg font-medium hover:bg-gray-300 transition-colors cursor-pointer">
                {{index .Tr "article_save_draft"}}
            </button>
            <button type="submit" name="status" value="1"
                class="px-6 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors cursor-pointer">
                {{index .Tr "article_publish"}}
            </button>
        </div>
    </form>
</section>

{{template "footer" .}}

<script>
var easyMDE = new EasyMDE({
    element: document.getElementById('articleContent'),
    spellChecker: false,
    autosave: { enabled: false },
    placeholder: '{{index .Tr "article_content"}}',
    toolbar: [
        'bold', 'italic', 'heading', '|',
        'quote', 'unordered-list', 'ordered-list', '|',
        'link', 'image', 'code', 'table', '|',
        'preview', 'side-by-side', 'fullscreen', '|',
        'guide'
    ],
    status: false,
    minHeight: '300px'
});
</script>

{{end}}