{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}
<div class="container-lg mt-5">
    <h4 class="">{% trans "Featured" %}</h4>
    <div class="row row-cols-1 row-cols-md-5 my-4">
        {% for post in featured_posts %}
        <div class="card col m-2 p-0">
            <a class="text-reset link-offset-2 link-underline link-underline-opacity-0" href=" {% url 'blog:post' post.category.slug post.slug %}">
                <img src="{{ post.thumbnail.url }}" class="card-img-top img-fluid" style="max-height: 150px;" alt="thumbnail">
                <div class="card-body" style="height: 100px;">
                    {% if LANGUAGE_CODE == "de" %}
                    <h5 class="card-title">{{ post.title_de }}<small class="text-body-secondary">{{ post.subtitle }}</small></h5>
                    <p class="card-text">{{ post.desc_de }}</p>
                    {% elif LANGUAGE_CODE == "en" %}
                    <h5 class="card-title">{{ post.title_en }}<small class="text-body-secondary">{{ post.subtitle }}</small></h5>
                    <p class="card-text">{{ post.desc_en }}</p>
                    {% else %}
                    <h5 class="card-title">{{ post.title_en }}<small class="text-body-secondary">{{ post.subtitle }}</small></h5>
                    <p class="card-text">{{ post.desc_en }}</p>
                    {% endif %}
                </div>
                <div class="container pt-5">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">{% translate "category" %}: <b>{{ post.category.name }}</b></li>
                        {% for keyword in post.keywords.all %}
                        {% if LANGUAGE_CODE == "de" %}
                        <li class="list-group-item">{{ keyword.text_de }}</li>
                        {% elif LANGUAGE_CODE == "en" %}
                        <li class="list-group-item">{{ keyword.text_en }}</li>
                        {% else %}
                        <li class="list-group-item">{{ keyword.text_en }}</li>
                        {% endif %}
                        {% endfor %}
                    </ul>
                </div>
            </a>
        </div>
        {% endfor %}
    </div>
</div>
