{# templates/blog/blog_show.html.twig #}
{% extends 'base.html.twig' %}

{% block title %} Blogpost {% endblock %}

{% block body %}
    <div class="container">
        <div class="row">
            <!-- blog List -->
            <div class="col-sm-12">
                {% for blogpost in blogs %}
                    <div class="blog-container my-4">
                        <a href="{{ path('blog', { slug: blogpost.slug }) }} ">
                            {% if blogpost.teaserImage %}
                                <img class="blog-img" src="{{ asset('build/images/asteroid.jpeg') }}" alt="asteroid">
                            {% endif %}
                            <div class="article-title d-inline-block pl-3 align-middle">
                                <span>{{ blogpost.title }}</span>
                            </div>
                        </a>
                        <br>
                        <span class="align-left blog-details">
                            <img class="article-author-img rounded-circle"
                                 src="{{ asset('build/images/alien-profile.png') }}" alt="profile">
                            {{ blogpost.author }}
                        </span>
                        <span class="pl-5 blog-details float-right">{{ blogpost.createdAt|ago }}</span>
                        <br>
                        <span class="blog-teaser">
                        {{ blogpost.teaser }}
                    </span>
                    </div>
                {% endfor %}

            </div>
        </div>
    </div>
{% endblock %}