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

{% block title %}{{ blog.title }} - LKgetaways{% endblock %}

{% block inner_hero_background %}{{ url_for('static', filename='uploads/' + blog.feature_image) }}{% endblock %}
{% block inner_hero_title %}{{ blog.title }}{% endblock %}
{% block inner_hero_subtitle %}{{ blog.created_at.strftime('%B %d, %Y') }}{% endblock %}

{% block content %}
<section class="blog-detail pb-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <article class="blog-content">
                    {{ blog.content|safe }}
                </article>
            </div>
        </div>
    </div>
</section>

<section class="related-posts py-5 bg-light">
    <div class="container">
        <h2 class="mb-4">Related Posts</h2>
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
            {% for related_post in related_posts %}
            <div class="col">
                <div class="card h-100">
                    {% if related_post.feature_image %}
                    <img src="{{ url_for('static', filename='uploads/' + related_post.feature_image) }}" class="card-img-top" alt="{{ related_post.title }}">
                    {% endif %}
                    <div class="card-body">
                        <h5 class="card-title">{{ related_post.title }}</h5>
                        <p class="card-text">{{ related_post.content|truncate(100) }}</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">{{ related_post.created_at.strftime('%Y-%m-%d') }}</small>
                        <a href="{{ url_for('main.blog_detail', slug=related_post.slug) }}" class="btn primary_btn float-end">Read More</a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endblock %}
