{% macro media(article, eager=false) %}
  {% set item = article.media[0] if article.media else none %}
  {% if item and item.type == 'image' %}
    <img src="{{ item.url }}" alt="{{ item.alt or article.title }}" {% if item.width %}width="{{ item.width }}"{% endif %} {% if item.height %}height="{{ item.height }}"{% endif %} loading="{{ 'eager' if eager else 'lazy' }}" decoding="async">
  {% elif item and item.type == 'video' %}
    <video src="{{ item.url }}" muted playsinline preload="metadata" aria-label="{{ item.alt or article.title }}"></video>
  {% else %}
    <span class="media-placeholder"><img src="/static/favi.png" alt="" width="96" height="96"></span>
  {% endif %}
{% endmacro %}

{% macro meta(article) %}
  <div class="article-meta">
    <time datetime="{{ article.published_at.isoformat() }}">{{ article.published_at|ekb_date }} · {{ article.published_at|ekb_time }}</time>
    <a class="category-link" href="/category/{{ article.category_tag }}">{{ article.category_name }}</a>
    <a class="producer-link" href="/brand/{{ article.producer_tag }}">{{ article.producer_name }}</a>
  </div>
{% endmacro %}

{% macro row(article) %}
  <article class="feed-row">
    <a class="feed-row-media" href="{{ article_path(article) }}" tabindex="-1">{{ media(article) }}</a>
    <div class="feed-row-copy">
      {{ meta(article) }}
      <h2><a href="{{ article_path(article) }}">{{ article.title }}</a></h2>
      <p>{{ article.lead or article.body|excerpt(210) }}</p>
    </div>
  </article>
{% endmacro %}