{# Compact item card for deck columns #}
<article class="ms-item-card-compact{% if item._is_read %} ms-item-card-compact--read{% endif %}"
         data-item-id="{{ item._id }}">
  <a href="{{ readerBaseUrl }}/item/{{ item._id }}" class="ms-item-card-compact__link">
    {% if item.photo and item.photo.length > 0 %}
    <img src="{{ item.photo[0] }}"
         alt=""
         class="ms-item-card-compact__photo"
         loading="lazy">
    {% endif %}
    <div class="ms-item-card-compact__body">
      {% if item.name %}
      <h4 class="ms-item-card-compact__title">{{ item.name }}</h4>
      {% elif item.content %}
      <p class="ms-item-card-compact__text">
        {% if item.content.text %}{{ item.content.text | truncate(80) }}{% elif item.content.html %}{{ item.content.html | safe | striptags | truncate(80) }}{% endif %}
      </p>
      {% endif %}
      <div class="ms-item-card-compact__meta">
        {% if item._source %}
        <span class="ms-item-card-compact__source">
          {%- if item._source.photo %}<img src="{{ item._source.photo }}" alt="" class="ms-item-card-compact__favicon" width="16" height="16" loading="lazy"> {% endif -%}
          {{- item._source.name or item._source.url -}}
        </span>
        {% elif item.author %}
        <span class="ms-item-card-compact__source">{{ item.author.name }}</span>
        {% endif %}
        {% if item.published %}
        <time datetime="{{ item.published }}" class="ms-item-card-compact__date">
          {{ item.published | date("PP") }}
        </time>
        {% endif %}
      </div>
    </div>
    {% if not item._is_read %}
    <span class="ms-item-card-compact__unread" aria-label="Unread"></span>
    {% endif %}
  </a>
</article>