{% load i18n %}
{% load bookmark_extras %}

{% for b in bookmarks %}
<article class="bm-tweet"
  data-media="{% if b.media %}1{% endif %}"
  data-photo="{% if b.has_photo %}1{% else %}0{% endif %}"
  data-video="{% if b.has_video %}1{% else %}0{% endif %}"
  data-card="{% if b.has_card %}1{% else %}0{% endif %}"
  data-quote="{% if b.is_quote %}1{% else %}0{% endif %}"
  data-blob="{{ b.text|lower|escapejs }} {{ b.author_name|lower|escapejs }} @{{ b.author_screen_name|lower|escapejs }} {{ b.summary|lower|escapejs }}">

  <!-- head -->
  <div class="bm-head">
    {% if b.author_profile_image_url %}
    <a href="https://x.com/{{ b.author_screen_name }}" target="_blank" rel="noopener" onclick="event.stopPropagation()">
      <img class="bm-avatar" src="{{ b.author_profile_image_url }}" alt="" loading="lazy">
    </a>
    {% else %}
    <div class="bm-avatar"></div>
    {% endif %}
    <div class="bm-who">
      <div class="top">
        <a href="https://x.com/{{ b.author_screen_name }}" target="_blank" rel="noopener" onclick="event.stopPropagation()">
          <span class="name">{{ b.author_name|default:b.author_screen_name }}</span>
        </a>
      </div>
      <div>
        <span class="handle">@{{ b.author_screen_name }}</span>
        {% if b.tweet_created_at %}<span class="sep">·</span><span class="time">{{ b.tweet_created_at|date:"M j, Y" }}</span>{% endif %}
      </div>
    </div>
    <a class="bm-ext" href="{% if b.url %}{{ b.url }}{% else %}https://x.com/i/status/{{ b.tweet_id }}{% endif %}"
       target="_blank" rel="noopener" title="{% trans 'Open on X' %}" onclick="event.stopPropagation()">
      <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" viewBox="0 0 24 24"><path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
    </a>
  </div>

  <!-- text -->
  {% if b.text %}
  <div class="bm-text">{{ b.text|truncatechars:600|urlizetrunc:40|linebreaksbr }}</div>
  {% endif %}
  {% if b.summary %}
  <div class="bm-summary">{{ b.summary }}</div>
  {% endif %}

  {% if b.media %}
  <div class="bm-media {{ b.media|length|media_grid_class }}">
    {% for m in b.media %}
      {% if m.type == 'photo' %}
      <div class="bm-cell" onclick="bmLightbox(this)" data-full="{{ m.media_large|default:m.media_url }}">
        <img loading="lazy" src="{{ m.media_thumb|default:m.media_large|default:m.media_url }}" alt="{{ m.alt_text|default:'' }}">
      </div>
      {% elif m.type == 'video' or m.type == 'animated_gif' %}
      {% with v=m.video %}
      <a class="bm-cell" href="{% if b.url %}{{ b.url }}{% else %}https://x.com/i/status/{{ b.tweet_id }}{% endif %}"
         target="_blank" rel="noopener" title="{% trans 'Open on X to play' %}" onclick="event.stopPropagation()">
        <span class="bm-vbadge">{% if m.type == 'animated_gif' %}GIF{% else %}VIDEO{% endif %}</span>
        <img loading="lazy" src="{{ v.poster|default:m.media_thumb|default:m.media_large|default:m.media_url }}" alt="">
        <span class="bm-play"><span class="ring"><svg width="22" height="22" fill="#fff" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></span></span>
        {% if v.duration_ms %}<span class="bm-dur">{{ v.duration_ms|ms_to_duration }}</span>{% endif %}
        <span class="bm-xbadge">X</span>
      </a>
      {% endwith %}
      {% endif %}
    {% endfor %}
  </div>
  {% endif %}

  <!-- link card -->
  {% if b.has_card and b.card_data %}
    {% with c=b.card_data %}
    {% if c.title or c.description or c.image %}
    <a class="bm-cardlink" href="{{ c.url|default:'#' }}" target="_blank" rel="noopener" onclick="event.stopPropagation()">
      {% if c.image %}<img src="{{ c.image }}" loading="lazy" alt="">{% endif %}
      <div class="ci">
        <div class="csite">{{ c.site|default:'' }}</div>
        {% if c.title %}<div class="ct">{{ c.title }}</div>{% endif %}
        {% if c.description %}<div class="cd">{{ c.description }}</div>{% endif %}
      </div>
    </a>
    {% endif %}
    {% endwith %}
  {% endif %}

  <!-- quote tweet -->
  {% if b.is_quote and b.quoted_data %}
    {% with q=b.quoted_data %}
    {% if q.tombstone or q.unavailable %}
    <div class="bm-quote">{% trans "This post is unavailable." %}</div>
    {% else %}
    {% with qa=q.author %}
    <a class="bm-quote" href="{% if q.url %}{{ q.url }}{% else %}https://x.com/i/status/{{ q.id }}{% endif %}"
       target="_blank" rel="noopener" onclick="event.stopPropagation()">
      <div class="qhead">
        {% if qa.profile_image_url %}<img src="{{ qa.profile_image_url }}" loading="lazy" alt="">{% endif %}
        <span class="name">{{ qa.name|default:'' }}</span>
        <span class="handle">@{{ qa.screen_name|default:'' }}</span>
      </div>
      <div class="qtext">{{ q.text|default:''|truncatechars:280|linebreaksbr }}</div>
    </a>
    {% endwith %}
    {% endif %}
    {% endwith %}
  {% endif %}

  <!-- metrics -->
  <div class="bm-metrics">
    {% if b.reply_count %}<span class="bm-metric">💬 {{ b.reply_count }}</span>{% endif %}
    {% if b.retweet_count %}<span class="bm-metric">🔁 {{ b.retweet_count }}</span>{% endif %}
    {% if b.favorite_count %}<span class="bm-metric">❤ {{ b.favorite_count }}</span>{% endif %}
    {% if b.bookmark_count %}<span class="bm-metric bkm">🔖 {{ b.bookmark_count }}</span>{% endif %}
    {% if b.view_count %}<span class="bm-metric">📊 {{ b.view_count }}</span>{% endif %}
    <a href="{{ b.url|default:'#' }}" target="_blank" rel="noopener" class="bm-metric"
       style="color:var(--bm-accent);margin-left:auto" onclick="event.stopPropagation()">{% trans "View on X" %} ↗</a>
  </div>
</article>
{% empty %}
<div class="bm-empty">
  <div class="tle">{% trans "No bookmarks found" %}</div>
  {% trans "Try a different search or filter." %}
</div>
{% endfor %}