{% if article is defined %}
    {% set card_title = article.title|default('')|trim %}
    <div class="card">
        <div class="metadata">
            {% if category %}
                <small>{{ category }}</small>
            {% else %}
                {% if not is_author_profile %}
                    <p>by <twig:Molecules:UserFromNpub ident="{{ article.pubkey }}" /></p>
                {% endif %}
                <small>{{ article.displayDateTime|date('F j Y') }}</small>
            {% endif %}
        </div>
        <a href="{{ (article.pubkey and npub_from_hex(article.pubkey) != '') ? path('article', { npub: npub_from_hex(article.pubkey), slug: article.slug }) : path('article-legacy-redirect', { slug: article.slug }) }}">
            <div class="card-header">
                {% if category %}<small class="text-uppercase">{{ category }}</small>{% endif %}
                <img
                    src="{{ article_card_cover(article.image, article.pubkey) }}"
                    alt="{{ ('Illustration for ' ~ (card_title != '' ? card_title : (article.slug|default('')|replace({'-': ' '})|title)))|e('html_attr') }}"
                    width="800"
                    height="450"
                    loading="lazy"
                    decoding="async"
                    onerror="this.onerror=null;this.style.display='none';"
                >
            </div>
            <div class="card-body">
                    <h2 class="card-title">{% if card_title != '' %}{{ card_title }}{% else %}{{ article.slug|default('')|replace({'-': ' '})|title }}{% endif %}</h2>
                    {% if article.summary %}
                        <p class="lede">
                            {{ article.summary }}
                        </p>
                    {% endif %}
            </div>
        </a>
        <div class="card-footer"></div>
    </div>
{% endif %}