{% load i18n %}
<div class="card">
    <div class="card-header card-header-with-logo">
        {% if service.logo %}<img src="{{ service.logo.url }}" alt="{{ service.name }}">{% endif %}
        <div class="card-header-content">
            <h4>{{ service.name }}</h4>
            <small class="text-muted">{{ service.category }}</small>
        </div>
    </div>
    <div class="card-content">
        <div class="card-body flex-grow-1">
            {% if service.description %}<p class="card-text">{{ service.description|urlize }}</p>{% endif %}
        </div>
    </div>
    <div class="card-footer d-flex justify-content-between align-items-center gap-2">
        {% if service.featured_links %}
            {% with featured_link=service.featured_links.0 %}
                <a href="{{ featured_link.url }}"
                   target="_blank"
                   rel="noopener noreferrer"
                   class="btn btn-outline-primary">
                    {{ featured_link.title }}
                    <i class="bi bi-box-arrow-up-right ms-1"></i>
                </a>
            {% endwith %}
        {% else %}
            <span></span>
        {% endif %}
        <a href="{{ service.slug }}/" class="btn btn-light-primary">{% translate "Get It" %}</a>
    </div>
</div>
