{% extends "base.html" %}
{% block title %}{{ _('Edit') if blog else _('Write') }} {{ _('Blog Post') }} – OnlineConvert{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto px-4 py-10">

    <div class="mb-6 flex items-center gap-3">
        <a href="{{ full_url('/dashboard/blogs') }}" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-sm" data-testid="link-back-blogs"><i class="fa fa-arrow-left"></i></a>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white" data-testid="heading-blog-write">{{ _('Edit Blog Post') if blog else _('Write New Blog Post') }}</h1>
    </div>

    {% if error %}
    <div class="mb-5 px-4 py-3 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-sm text-red-700 dark:text-red-400" data-testid="alert-blog-error">
        <i class="fa fa-exclamation-circle mr-1"></i> {{ error }}
    </div>
    {% endif %}

    {% if blog and blog.status == 'rejected' and blog.admin_note %}
    <div class="mb-5 px-4 py-3 rounded-xl bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 text-sm text-orange-700 dark:text-orange-400">
        <i class="fa fa-comment-dots mr-1"></i> <strong>{{ _('Admin feedback:') }}</strong> {{ blog.admin_note }}
    </div>
    {% endif %}

    <form method="POST" action="{{ full_url('/dashboard/blogs/' ~ blog.rowid|string ~ '/edit') if blog else full_url('/dashboard/blogs/new') }}" enctype="multipart/form-data" id="blog-form">
        <div class="space-y-5">
            <!-- Title -->
            <div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2" for="blog-title">{{ _('Post Title') }} <span class="text-red-500">*</span></label>
                <input type="text" id="blog-title" name="title" required
                    class="w-full px-4 py-3 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all text-lg font-medium"
                    placeholder="{{ _('Enter a compelling title...') }}" value="{{ blog.title if blog else '' }}" data-testid="input-blog-title">
            </div>

            <!-- Summary -->
            <div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2" for="blog-summary">{{ _('Short Summary') }}</label>
                <textarea id="blog-summary" name="summary" rows="2"
                    class="w-full px-4 py-3 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all text-sm resize-none"
                    placeholder="{{ _('Brief description shown in blog listing (optional)...') }}" data-testid="input-blog-summary">{{ blog.summary if blog else '' }}</textarea>
            </div>

            <!-- Featured Image -->
            <div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                    {{ _('Featured Image') }} {% if blog and blog.image %}<span class="text-xs font-normal text-gray-400">({{ _('current:') }} {{ blog.image }})</span>{% endif %}
                </label>
                <input type="file" name="image" accept="image/*"
                    class="w-full text-sm text-gray-700 dark:text-gray-300 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:bg-primary/10 file:text-primary file:font-medium hover:file:bg-primary/20 transition-all"
                    data-testid="input-blog-image">
                {% if not blog %}
                <p class="mt-1.5 text-xs text-gray-400">{{ _('Upload a header image for your post (recommended).') }}</p>
                {% endif %}
            </div>

            <!-- Content -->
            <div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">{{ _('Content') }} <span class="text-red-500">*</span></label>
                <textarea name="content" id="blog-content" data-testid="input-blog-content">{{ blog.content if blog else '' }}</textarea>
            </div>

            <!-- Notice -->
            <div class="rounded-2xl border border-blue-200 dark:border-blue-800/50 bg-blue-50 dark:bg-blue-900/20 p-4 text-sm text-blue-700 dark:text-blue-400">
                <i class="fa fa-circle-info mr-1"></i>
                {{ _("After submitting, your post will be reviewed by our admin team. If a publication fee is required, you'll be notified and the post will go live after payment.") }}
            </div>

            <!-- Actions -->
            <div class="flex items-center gap-3">
                <button type="submit" class="inline-flex items-center gap-2 px-8 py-3 rounded-xl bg-primary hover:bg-primary/90 text-white font-bold transition-all shadow-lg shadow-primary/20" data-testid="btn-submit-blog">
                    <i class="fa fa-paper-plane"></i> {{ _('Resubmit for Review') if blog else _('Submit for Review') }}
                </button>
                <a href="{{ full_url('/dashboard/blogs') }}" class="px-6 py-3 rounded-xl border border-gray-300 dark:border-gray-600 text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">{{ _('Cancel') }}</a>
            </div>
        </div>
    </form>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.ckeditor.com/4.25.1/standard/ckeditor.js"></script>
<script>
CKEDITOR.replace('blog-content', {
    toolbar: [
        { name: 'basicstyles', items: ['Bold','Italic','Underline','Strike','RemoveFormat'] },
        { name: 'paragraph', items: ['NumberedList','BulletedList','Blockquote'] },
        { name: 'links', items: ['Link','Unlink'] },
        { name: 'insert', items: ['Image','Table','HorizontalRule'] },
        { name: 'styles', items: ['Styles','Format'] },
        { name: 'tools', items: ['Maximize'] }
    ],
    height: 400
});

document.getElementById('blog-form').addEventListener('submit', function(e) {
    e.preventDefault();
    var content = CKEDITOR.instances['blog-content'].getData();
    document.getElementById('blog-content').value = content;
    if (!document.getElementById('blog-title').value.trim()) {
        toastr.warning('{{ _("Please enter a title.") }}');
        return;
    }
    if (!content.trim()) {
        toastr.warning('{{ _("Please enter some content.") }}');
        return;
    }
    this.submit();
});
</script>
{% endblock %}