<article class="article-cover-image" style="background-image: url('{{ post.imageurl }}');" onclick="openArticle('{{ post.get_absolute_url }}')">
    <div class="article-cover-desc">
        <div class="article-cover-desc-items">
            <div class="absolute rounded-full px-2 py-1 bg-gray-800 text-gray-200 bg-opacity-90 capitalize"
                x-data="{ pin: true }"
                @mouseover="pin = true"
                @mouseover.away="pin = false"
            >
                <i class="fa-solid fa-thumbtack rotate-45 mx-0.5"></i>
                <span class="ml-0.5" x-show="pin">Angepinnt</span>
            </div>
            <ul class="article-cover-tags">
                {% for t in post.three_tag_names %}
                    <li><a href="{% url 'posts:tags' t %}">#{{ t }}</a></li>
                {% endfor %}
            </ul>    
            <div>
                <a href="{{ post.get_absolute_url }}"><h3 class="text-gray-50">{{ post.title|safe }}</h3></a>
                <div class="text-gray-200">
                    <i class="fas fa-clock"></i>
                    {{ post.date|date:"d. F Y" }}
                </div>
            </div>
        </div>
    </div>
</article>
