{% extends "base.html" %}
{% set _cms_title = get_page_content(page_id, 'title', g.lang_code) %}
{% set _cms_desc = get_page_content(page_id, 'description', g.lang_code) %}
{% set _cms_heading = get_page_content(page_id, 'page_heading', g.lang_code) %}
{% set _cms_page_desc = get_page_content(page_id, 'page_description', g.lang_code) %}
{% set _cms_head_html = get_page_content(page_id, 'head_html', g.lang_code) %}
{% set _cms_og_image = get_page_content(page_id, 'og_image', g.lang_code) %}
{% block title %}{% if _cms_title %}{{ _cms_title }}{% else %}{% trans %}Blogs | OnlineConvert{% endtrans %}{% endif %}{% endblock %}
{% block description %}{% if _cms_desc %}{{ _cms_desc }}{% else %}{% trans %}Latest articles, guides, and news from OnlineConvert.{% endtrans %}{% endif %}{% endblock %}
{% block og_image_tag %}{% if _cms_og_image %}<meta property="og:image" content="{{ _cms_og_image }}">{% endif %}{% endblock %}
{% block extra_head %}{% if _cms_head_html %}{{ _cms_head_html|safe }}{% endif %}{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="text-center mb-12">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-3">{{ _cms_heading if _cms_heading else _('Blog') }}</h1>
        <p class="text-gray-500 dark:text-gray-400">{{ _cms_page_desc if _cms_page_desc else _('Latest news, guides, and updates') }}</p>
    </div>

    {% if blogs %}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {% for b in blogs %}
        <div class="group rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 overflow-hidden hover:shadow-lg transition-shadow duration-300">
            {% if b['image'] %}
            <a href="{{ full_url('/blogs/' ~ (b['slug'].lower() if b['slug'] else '')) }}">
                <img src="/static/blogs/{{ b['image'] }}" alt="{{ b['title'] }}" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-500" data-testid="img-blog-{{ b['rowid'] }}">
            </a>
            {% endif %}
            <div class="p-5">
                {% if b['created_at'] %}
                <p class="text-xs text-gray-400 dark:text-gray-500 mb-2">{{ b['created_at'][:10] }}</p>
                {% endif %}
                <h3 class="font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">
                    <a href="{{ full_url('/blogs/' ~ (b['slug'].lower() if b['slug'] else '')) }}" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" data-testid="link-blog-{{ b['rowid'] }}">
                        {{ b['title'] }}
                    </a>
                </h3>
                <p class="text-sm text-gray-500 dark:text-gray-400 line-clamp-3 mb-4">{{ b['summary'] }}</p>
                <div class="flex items-center justify-between">
                    {% if b['author_name'] %}
                    <span class="text-xs text-gray-400 dark:text-gray-500">
                        <i class="fa fa-user mr-1"></i>{{ b['author_name'] }}
                    </span>
                    {% endif %}
                    <a href="{{ full_url('/blogs/' ~ (b['slug'].lower() if b['slug'] else '')) }}"
                       class="text-xs font-medium text-indigo-600 dark:text-indigo-400 hover:underline ml-auto" data-testid="link-read-more-{{ b['rowid'] }}">
                        {% trans %}Read more{% endtrans %} &rarr;
                    </a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-20" data-testid="text-no-blogs">
        <i class="fa fa-newspaper text-5xl text-gray-300 dark:text-gray-600 mb-4"></i>
        <p class="text-gray-500 dark:text-gray-400">{% trans %}No blog posts published yet.{% endtrans %}</p>
    </div>
    {% endif %}
</div>
{% endblock %}