{% extends "dashboard/layout.html" %}
{% block title %}{{ _('My Blog Posts – OnlineConvert') }}{% endblock %}
{% block dashboard_content %}
<div class="max-w-5xl mx-auto">

    <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div class="flex items-center gap-3">
            <a href="{{ full_url('/dashboard') }}" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-sm"><i class="fa fa-arrow-left"></i></a>
            <div>
                <h1 class="text-2xl font-bold text-gray-900 dark:text-white" data-testid="heading-my-blogs">{{ _('My Blog Posts') }}</h1>
                <p class="text-sm text-gray-500 dark:text-gray-400">{{ _('Write and manage your blog posts.') }}</p>
            </div>
        </div>
        <a href="{{ full_url('/dashboard/blogs/new') }}" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-primary hover:bg-primary/90 text-white font-semibold text-sm transition-all shadow-lg shadow-primary/20" data-testid="btn-new-blog">
            <i class="fa fa-pen-to-square"></i> {{ _('Write New Post') }}
        </a>
    </div>

    {% with messages = get_flashed_messages(with_categories=true) %}{% for cat, msg in messages %}<script>window._oc_flash=window._oc_flash||[];window._oc_flash.push({cat:{{ cat|tojson }},msg:{{ msg|tojson }}});</script>{% endfor %}{% endwith %}

    {% if request.args.get('blog_payment') == 'success' %}
    <div class="mb-6 px-4 py-4 rounded-2xl bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 flex items-center gap-3" data-testid="alert-payment-success">
        <div class="w-10 h-10 rounded-full bg-green-100 dark:bg-green-900/40 flex items-center justify-center flex-shrink-0">
            <i class="fa fa-check text-green-600 dark:text-green-400"></i>
        </div>
        <div>
            <div class="font-bold text-green-800 dark:text-green-300">{{ _('Payment Successful!') }}</div>
            <div class="text-sm text-green-700 dark:text-green-400">{{ _('Your blog post is now published and live on the site.') }}</div>
        </div>
    </div>
    {% endif %}

    <!-- How it works banner -->
    <div class="mb-6 rounded-2xl border border-blue-200 dark:border-blue-800/50 bg-blue-50 dark:bg-blue-900/20 p-4">
        <h3 class="font-semibold text-blue-800 dark:text-blue-300 mb-2 text-sm flex items-center gap-2"><i class="fa fa-circle-info"></i> {{ _('How Blog Publishing Works') }}</h3>
        <div class="grid grid-cols-1 sm:grid-cols-4 gap-3 text-xs text-blue-700 dark:text-blue-400">
            <div class="flex items-center gap-2"><div class="w-5 h-5 rounded-full bg-blue-200 dark:bg-blue-800 flex items-center justify-center font-bold text-[10px] flex-shrink-0">1</div> {{ _('Write your post and submit it') }}</div>
            <div class="flex items-center gap-2"><div class="w-5 h-5 rounded-full bg-blue-200 dark:bg-blue-800 flex items-center justify-center font-bold text-[10px] flex-shrink-0">2</div> {{ _('Admin reviews your submission') }}</div>
            <div class="flex items-center gap-2"><div class="w-5 h-5 rounded-full bg-blue-200 dark:bg-blue-800 flex items-center justify-center font-bold text-[10px] flex-shrink-0">3</div> {{ _('Pay publication fee (if charged)') }}</div>
            <div class="flex items-center gap-2"><div class="w-5 h-5 rounded-full bg-green-200 dark:bg-green-800 flex items-center justify-center font-bold text-[10px] flex-shrink-0 text-green-700 dark:text-green-400">✓</div> {{ _('Your post goes live publicly') }}</div>
        </div>
    </div>

    {% if blogs %}
    <div class="space-y-4">
        {% for blog in blogs %}
        <div class="rounded-2xl border {% if blog.status == 'pending_payment' %}border-yellow-300 dark:border-yellow-700 bg-yellow-50 dark:bg-yellow-900/10{% elif blog.status == 'rejected' %}border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/10{% elif blog.status == 'published' %}border-green-200 dark:border-green-800 bg-white dark:bg-gray-900{% else %}border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900{% endif %} overflow-hidden" data-testid="card-blog-{{ blog.rowid }}">
            <div class="p-5 flex flex-col sm:flex-row sm:items-start gap-4">
                {% if blog.image %}
                <div class="w-full sm:w-24 h-20 rounded-xl overflow-hidden flex-shrink-0 bg-gray-100 dark:bg-gray-800">
                    <img src="/static/blogs/{{ blog.image }}" alt="" class="w-full h-full object-cover">
                </div>
                {% else %}
                <div class="w-24 h-20 rounded-xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center flex-shrink-0">
                    <i class="fa fa-image text-2xl text-gray-300 dark:text-gray-600"></i>
                </div>
                {% endif %}
                <div class="flex-1 min-w-0">
                    <div class="flex flex-wrap items-start gap-2 mb-1">
                        <h3 class="font-bold text-gray-900 dark:text-white text-base" data-testid="text-blog-title-{{ blog.rowid }}">{{ blog.title or _('Untitled') }}</h3>
                        <span class="px-2.5 py-0.5 rounded-full text-xs font-bold
                            {% if blog.status == 'published' %}bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400
                            {% elif blog.status == 'pending_review' %}bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400
                            {% elif blog.status == 'pending_payment' %}bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400
                            {% elif blog.status == 'rejected' %}bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400
                            {% else %}bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400{% endif %}"
                            data-testid="badge-blog-status-{{ blog.rowid }}">
                            {% if blog.status == 'published' %}<i class="fa fa-check-circle mr-1"></i>{{ _('Published') }}
                            {% elif blog.status == 'pending_review' %}<i class="fa fa-clock mr-1"></i>{{ _('Under Review') }}
                            {% elif blog.status == 'pending_payment' %}<i class="fa fa-credit-card mr-1"></i>{{ _('Payment Required') }}
                            {% elif blog.status == 'rejected' %}<i class="fa fa-times-circle mr-1"></i>{{ _('Rejected') }}
                            {% else %}{{ blog.status|title }}{% endif %}
                        </span>
                    </div>
                    {% if blog.summary %}
                    <p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mb-2">{{ blog.summary }}</p>
                    {% endif %}

                    {% if blog.status == 'pending_payment' %}
                    <div class="mt-2 p-3 rounded-xl bg-yellow-100 dark:bg-yellow-900/30 border border-yellow-200 dark:border-yellow-700">
                        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                            <div>
                                <div class="text-sm font-bold text-yellow-800 dark:text-yellow-300">
                                    <i class="fa fa-bell mr-1"></i>{{ _('Action Required — Publication Fee: $%(fee)s', fee='%.2f'|format(blog.publish_fee)) }}
                                </div>
                                {% if blog.admin_note %}
                                <div class="text-xs text-yellow-700 dark:text-yellow-400 mt-1">{{ _('Admin note:') }} {{ blog.admin_note }}</div>
                                {% endif %}
                            </div>
                            <a href="{{ full_url('/dashboard/blogs/' ~ blog.rowid ~ '/pay') }}" class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-yellow-500 hover:bg-yellow-600 text-white font-semibold text-sm transition-all flex-shrink-0" data-testid="btn-pay-blog-{{ blog.rowid }}">
                                <i class="fa fa-credit-card"></i> {{ _('Pay & Publish') }}
                            </a>
                        </div>
                    </div>
                    {% elif blog.status == 'rejected' %}
                    <div class="mt-2 p-3 rounded-xl bg-red-100 dark:bg-red-900/30 border border-red-200 dark:border-red-700 text-sm text-red-700 dark:text-red-400">
                        <i class="fa fa-info-circle mr-1"></i>
                        {% if blog.admin_note %}{{ blog.admin_note }}{% else %}{{ _('Your post was rejected. You can edit and resubmit it.') }}{% endif %}
                    </div>
                    {% elif blog.status == 'pending_review' %}
                    <div class="mt-2 text-xs text-blue-600 dark:text-blue-400">
                        <i class="fa fa-clock mr-1"></i>{{ _("Your post is being reviewed by our team. We'll notify you once it's processed.") }}
                    </div>
                    {% endif %}

                    <div class="mt-3 flex items-center gap-2 text-xs text-gray-400">
                        <span>{{ _('Submitted') }} {{ blog.created_at[:10] if blog.created_at else '' }}</span>
                        {% if blog.updated_at and blog.updated_at != blog.created_at %}
                        <span>·</span><span>{{ _('Updated') }} {{ blog.updated_at[:10] }}</span>
                        {% endif %}
                    </div>
                </div>
                <div class="flex flex-row sm:flex-col gap-2 flex-shrink-0">
                    {% if blog.status == 'published' %}
                    <a href="{{ full_url('/blogs/' ~ blog.slug) }}" target="_blank" class="px-3 py-1.5 rounded-lg text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 hover:bg-green-200 dark:hover:bg-green-900/50 transition-all" data-testid="btn-view-blog-{{ blog.rowid }}">
                        <i class="fa fa-external-link-alt mr-1"></i> {{ _('View') }}
                    </a>
                    {% endif %}
                    {% if blog.status in ('draft', 'rejected', 'pending_review') %}
                    <a href="{{ full_url('/dashboard/blogs/' ~ blog.rowid ~ '/edit') }}" class="px-3 py-1.5 rounded-lg text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 transition-all" data-testid="btn-edit-blog-{{ blog.rowid }}">
                        <i class="fa fa-pen mr-1"></i> {{ _('Edit') }}
                    </a>
                    {% endif %}
                    {% if blog.status != 'published' %}
                    <form method="POST" action="{{ full_url('/dashboard/blogs/' ~ blog.rowid ~ '/delete') }}" data-confirm="{{ _('Delete this blog post?') }}&#10;&#10;• {{ _('The post will be permanently removed') }}&#10;• {{ _('It will no longer be visible to readers') }}">
                        <button type="submit" class="w-full px-3 py-1.5 rounded-lg text-xs font-medium bg-red-50 dark:bg-red-900/20 text-red-500 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/30 transition-all" data-testid="btn-delete-blog-{{ blog.rowid }}">
                            <i class="fa fa-trash mr-1"></i> {{ _('Delete') }}
                        </button>
                    </form>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-16 text-center" data-testid="text-no-blogs">
        <div class="w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mx-auto mb-4">
            <i class="fa fa-pen-nib text-2xl text-gray-400"></i>
        </div>
        <h2 class="font-bold text-gray-800 dark:text-gray-200 mb-2">{{ _('No blog posts yet') }}</h2>
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-5">{{ _('Share your expertise with the community. Write your first blog post.') }}</p>
        <a href="{{ full_url('/dashboard/blogs/new') }}" class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-primary hover:bg-primary/90 text-white font-semibold text-sm transition-all shadow-lg shadow-primary/20" data-testid="btn-write-first-blog">
            <i class="fa fa-pen-to-square"></i> {{ _('Write Your First Post') }}
        </a>
    </div>
    {% endif %}
</div>
{% endblock dashboard_content %}