<!-- app/templates/blog_list.html -->
{% extends "base.html" %}

{% block title %}Blog - LKgetaways{% endblock %}

{% block inner_hero_background %}/static/images/blog-inner.avif{% endblock %}
{% block inner_hero_title %}Our Blog{% endblock %}
{% block inner_hero_subtitle %}Discover Sri Lanka through our stories and travel tips{% endblock %}

{% block content %}
<section class="blog-list pb-5">
    <div class="container">
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
            {% for blog in blogs.items %}
            <div class="col">
                <div class="card h-100">
                    {% if blog.feature_image %}
                    <img src="{{ url_for('static', filename='uploads/' + blog.feature_image) }}" class="card-img-top" alt="{{ blog.title }}">
                    {% endif %}
                    <div class="card-body">
                        <h5 class="card-title">{{ blog.title }}</h5>
                        <p class="card-text">{{ blog.content|truncate(200)|safe }}</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">{{ blog.created_at.strftime('%Y-%m-%d') }}</small>
                        <a href="{{ url_for('main.blog_detail', slug=blog.slug) }}" class="btn primary_btn float-end">Read More</a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

        <nav aria-label="Page navigation" class="mt-4">
            <ul class="pagination justify-content-center">
                {% for page in blogs.iter_pages() %}
                    {% if page %}
                    <li class="page-item {% if page == blogs.page %}active{% endif %}">
                        <a class="page-link" href="{{ url_for('main.blog_list', page=page) }}">{{ page }}</a>
                    </li>
                    {% else %}
                    <li class="page-item disabled"><span class="page-link">...</span></li>
                    {% endif %}
                {% endfor %}
            </ul>
        </nav>
    </div>
</section>
{% endblock %}
