{#
  Item card for timeline display
  Inspired by Aperture/Monocle reader
#}
<article class="ms-item-card{% if item._is_read %} ms-item-card--read{% endif %}"
         data-item-id="{{ item._id }}"
         data-feed-id="{{ item._feedId or '' }}"
         data-is-read="{{ item._is_read | default(false) }}">

  {# Context bar for interactions (Aperture pattern) #}
  {# Helper to extract URL from value that may be string or object #}
  {% macro getUrl(val) %}{{ val.url or val.value or val if val is string else val }}{% endmacro %}

  {% if item["like-of"] and item["like-of"].length > 0 %}
  {% set contextUrl = item['like-of'][0].url or item['like-of'][0].value or item['like-of'][0] %}
  <div class="ms-item-card__context">
    {{ icon("like") }}
    <span>Liked</span>
    <a href="{{ contextUrl }}" target="_blank" rel="noopener">
      {{ contextUrl | replace("https://", "") | replace("http://", "") | truncate(50) }}
    </a>
  </div>
  {% elif item["repost-of"] and item["repost-of"].length > 0 %}
  {% set contextUrl = item['repost-of'][0].url or item['repost-of'][0].value or item['repost-of'][0] %}
  <div class="ms-item-card__context">
    {{ icon("repost") }}
    <span>Reposted</span>
    <a href="{{ contextUrl }}" target="_blank" rel="noopener">
      {{ contextUrl | replace("https://", "") | replace("http://", "") | truncate(50) }}
    </a>
  </div>
  {% elif item["in-reply-to"] and item["in-reply-to"].length > 0 %}
  {% set contextUrl = item['in-reply-to'][0].url or item['in-reply-to'][0].value or item['in-reply-to'][0] %}
  <div class="ms-item-card__context">
    {{ icon("reply") }}
    <span>Reply to</span>
    <a href="{{ contextUrl }}" target="_blank" rel="noopener">
      {{ contextUrl | replace("https://", "") | replace("http://", "") | truncate(50) }}
    </a>
  </div>
  {% elif item["bookmark-of"] and item["bookmark-of"].length > 0 %}
  {% set contextUrl = item['bookmark-of'][0].url or item['bookmark-of'][0].value or item['bookmark-of'][0] %}
  <div class="ms-item-card__context">
    {{ icon("bookmark") }}
    <span>Bookmarked</span>
    <a href="{{ contextUrl }}" target="_blank" rel="noopener">
      {{ contextUrl | replace("https://", "") | replace("http://", "") | truncate(50) }}
    </a>
  </div>
  {% endif %}

  <a href="{{ baseUrl }}/item/{{ item._id }}" class="ms-item-card__link">
    {# Author #}
    {% if item.author %}
    <div class="ms-item-card__author">
      <div class="ms-item-card__avatar-wrap" data-avatar-fallback>
        {% if item.author.photo %}
        <img src="{{ item.author.photo }}"
             alt=""
             class="ms-item-card__author-photo"
             width="40"
             height="40"
             loading="lazy">
        {% endif %}
        <span class="ms-item-card__author-photo ms-item-card__author-photo--default" aria-hidden="true">{{ item.author.name[0] | upper if item.author.name else "?" }}</span>
      </div>
      <div class="ms-item-card__author-info">
        <span class="ms-item-card__author-name">{{ item.author.name or "Unknown" }}</span>
        {% if item._source %}
        <span class="ms-item-card__source">{{ item._source.name or item._source.url }}</span>
        {% elif item.author.url %}
        <span class="ms-item-card__source">{{ item.author.url | replace("https://", "") | replace("http://", "") }}</span>
        {% endif %}
      </div>
    </div>
    {% endif %}

    {# Title (for articles) #}
    {% if item.name %}
    <h3 class="ms-item-card__title">{{ item.name }}</h3>
    {% endif %}

    {# Content with overflow handling #}
    {% if item.summary or item.content %}
    <div class="ms-item-card__content{% if (item.content.text or item.summary or '') | length > 300 %} ms-item-card__content--truncated{% endif %}">
      {% if item.content.html %}
      {{ item.content.html | safe | striptags | truncate(400) }}
      {% elif item.content.text %}
      {{ item.content.text | truncate(400) }}
      {% elif item.summary %}
      {{ item.summary | truncate(400) }}
      {% endif %}
    </div>
    {% endif %}

    {# Categories/Tags #}
    {% if item.category and item.category.length > 0 %}
    <div class="ms-item-card__categories">
      {% for cat in item.category %}
      {% if loop.index0 < 5 %}
      <span class="ms-item-card__category">#{{ cat | replace("#", "") }}</span>
      {% endif %}
      {% endfor %}
    </div>
    {% endif %}

    {# Photo grid (Aperture multi-photo pattern) #}
    {% if item.photo and item.photo.length > 0 %}
    {% set photoCount = item.photo.length if item.photo.length <= 4 else 4 %}
    <div class="ms-item-card__photos ms-item-card__photos--{{ photoCount }}">
      {% for photo in item.photo %}
      {% if loop.index0 < 4 %}
      <img src="{{ photo }}"
           alt=""
           class="ms-item-card__photo"
           loading="lazy">
      {% endif %}
      {% endfor %}
    </div>
    {% endif %}

    {# Video preview #}
    {% if item.video and item.video.length > 0 %}
    <div class="ms-item-card__media">
      <video src="{{ item.video[0] }}"
             class="ms-item-card__video"
             controls
             preload="metadata"
             {% if item.photo and item.photo.length > 0 %}poster="{{ item.photo[0] }}"{% endif %}>
      </video>
    </div>
    {% endif %}

    {# Audio preview #}
    {% if item.audio and item.audio.length > 0 %}
    <div class="ms-item-card__media">
      <audio src="{{ item.audio[0] }}" class="ms-item-card__audio" controls preload="metadata"></audio>
    </div>
    {% endif %}

    {# Footer with date and actions #}
    <footer class="ms-item-card__footer">
      {% if item.published %}
      <time datetime="{{ item.published }}" class="ms-item-card__date">
        {{ item.published | date("PP", { locale: locale, timeZone: application.timeZone }) }}
      </time>
      {% endif %}
      {% if not item._is_read %}
      <span class="ms-item-card__unread" aria-label="Unread">●</span>
      {% endif %}
    </footer>
  </a>

  {# Inline actions (Aperture pattern) #}
  <div class="ms-item-actions">
    {% if item._source and item._source.type === "activitypub" and item.author and item.author.url %}
    <a href="{{ baseUrl }}/actor?url={{ item.author.url | urlencode }}" class="ms-item-actions__button" title="View actor profile">
      {{ icon("mention") }}
      <span class="-!-visually-hidden">Actor profile</span>
    </a>
    {% endif %}
    {% if item.url %}
    <a href="{{ item.url }}" class="ms-item-actions__button" target="_blank" rel="noopener" title="View original">
      {{ icon("syndicate") }}
      <span class="-!-visually-hidden">Original</span>
    </a>
    {% endif %}
    <a href="{{ baseUrl }}/compose?reply={{ item.url | urlencode }}" class="ms-item-actions__button" title="Reply">
      {{ icon("reply") }}
      <span class="-!-visually-hidden">Reply</span>
    </a>
    <a href="{{ baseUrl }}/compose?like={{ item.url | urlencode }}" class="ms-item-actions__button" title="Like">
      {{ icon("like") }}
      <span class="-!-visually-hidden">Like</span>
    </a>
    <a href="{{ baseUrl }}/compose?repost={{ item.url | urlencode }}" class="ms-item-actions__button" title="Repost">
      {{ icon("repost") }}
      <span class="-!-visually-hidden">Repost</span>
    </a>
    <a href="{{ baseUrl }}/compose?bookmark={{ item.url | urlencode }}" class="ms-item-actions__button" title="Bookmark">
      {{ icon("bookmark") }}
      <span class="-!-visually-hidden">Bookmark</span>
    </a>
    {% if not item._is_read %}
    {% if item._feedId %}
    <span class="ms-item-actions__mark-read-group">
      <button type="button"
              class="ms-item-actions__button ms-item-actions__mark-read"
              data-action="mark-read"
              data-item-id="{{ item._id }}"
              {% if item._channelUid %}data-channel-uid="{{ item._channelUid }}"{% endif %}
              {% if item._channelId %}data-channel-id="{{ item._channelId }}"{% endif %}
              title="Mark as read">
        {{ icon("tick") }}
        <span class="-!-visually-hidden">Mark read</span>
      </button>
      <button type="button"
              class="ms-item-actions__button ms-item-actions__mark-read-caret"
              aria-label="More mark-read options"
              title="More options">&#9662;</button>
      <div class="ms-item-actions__mark-read-popover" hidden>
        <button type="button"
                class="ms-item-actions__mark-source-read"
                data-feed-id="{{ item._feedId }}"
                {% if item._channelUid %}data-channel-uid="{{ item._channelUid }}"{% endif %}
                {% if item._channelId %}data-channel-id="{{ item._channelId }}"{% endif %}>
          Mark {{ item._source.name or item.author.name or "source" }} as read
        </button>
      </div>
    </span>
    {% else %}
    <button type="button"
            class="ms-item-actions__button ms-item-actions__mark-read"
            data-action="mark-read"
            data-item-id="{{ item._id }}"
            {% if item._channelUid %}data-channel-uid="{{ item._channelUid }}"{% endif %}
            {% if item._channelId %}data-channel-id="{{ item._channelId }}"{% endif %}
            title="Mark as read">
      {{ icon("tick") }}
      <span class="-!-visually-hidden">Mark read</span>
    </button>
    {% endif %}
    {% endif %}
    {% if application.readlaterEndpoint %}
    <button type="button"
            class="ms-item-actions__button ms-item-actions__save-later"
            data-action="save-later"
            data-url="{{ item.url }}"
            data-title="{{ item.name or '' }}"
            title="Save for later">
      {{ icon("bookmark") }}
      <span class="-!-visually-hidden">Save for later</span>
    </button>
    {% endif %}
  </div>
</article>