{% load static %}
<a href="{% url 'library:project_detail' project.slug %}" class="pack-card">
    <div class="pack-card-thumb">
        {% if project.thumbnail %}
            <img src="{{ project.thumbnail_url }}" alt="">
        {% else %}
            <i class="fas fa-box-open pack-card-thumb-icon"></i>
        {% endif %}
    </div>
    <div class="pack-card-body">
        <h3>{{ project.title }}</h3>
        <p class="pack-card-author"><i class="fas fa-user"></i> {{ project.owner.username }}</p>
        <p class="pack-card-desc">{{ project.summary|default:"No description yet." }}</p>
        <div class="pack-card-tags">
            {% for link in project.tag_links.all|slice:":4" %}
                <span class="tag-chip" style="border-color: {{ link.tag.category.color }}; color: {{ link.tag.category.color }};">{{ link.tag.name }}</span>
            {% endfor %}
        </div>
        <div class="pack-card-meta">
            {% with latest=project.versions.all|first %}
            <span class="pack-card-version"><i class="fas fa-tag"></i> {{ latest.version_name|default:"no versions" }}</span>
            {% endwith %}
            <span class="pack-card-downloads"><i class="fas fa-download"></i> {{ project.downloads }}</span>
        </div>
    </div>
</a>