{% extends "main/master.html" %}

{% block content %}
<article class="blog-post">
    <header class="mb-4">
        <h1 class="post-title">{{ post.title }}</h1>
        <div class="post-meta">
            {% if post.created_at %}
            <span><i class="far fa-calendar"></i> {{ post.created_at|truncate(10, True, '') }}</span>
            {% endif %}
            {% if post.author %}
            <span class="ml-3"><i class="far fa-user"></i> {{ post.author }}</span>
            {% endif %}





            {% if post.category %}
            <span><i class="far fa-folder"></i>
                <a href="/category/{{ post.category.slug }}" class="text-muted">{{ post.category.name }}</a>
            </span>
            {% endif %}





            {% if post.tags %}
            <span class="ml-3"><i class="fas fa-tags"></i>
                {% for tag in post.tags %}
                <a href="/tag/{{ tag }}" class="text-muted">{{ tag }}</a>{% if not loop.last %}, {% endif %}
                {% endfor %}
            </span>
            {% endif %}
        </div>
        <div class="post-excerpt">{{ post.description }}</div>
    </header>

    <div class="content">
        {{ post.content|safe }}
    </div>

    {% if post.tags %}
    <div class="tags mt-5">
        <h5 class="mb-3">Tags</h5>
        <div class="tag-cloud">
            {% for tag in post.tags %}
            <a href="/tag/{{ tag }}" class="tag-link">{{ tag }}</a>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    {% if related_posts %}
    <div class="related-posts mt-5">
        <h3 class="mb-4">You might also like</h3>
        <div class="row">
            {% for related in related_posts %}
            <div class="col-md-4">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title">{{ related.title }}</h5>
                        <p class="card-text">{{ related.description|truncate(100) }}</p>
                    </div>
                    <div class="card-footer bg-white border-0">
                        <a href="/post/{{ related.slug }}" class="read-more">Read More <i
                                class="fas fa-arrow-right ml-1"></i></a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</article>
{% endblock %}