{% extends 'base.html' %}
{% load i18n %}
{% load bookmark_extras %}

{% block content %}
<div id="post-toc-layout">
  <div class="main-content" id="post-main-content">
    <a href="{% url 'bookmark-list' %}" class="back-link">
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
        {% trans "Back to Bookmarks" %}
    </a>

    <!-- Header -->
    <div class="post-header-row">
      <div class="bookmark-author">
        {% if bookmark.author_profile_image_url %}
        <a href="https://x.com/{{ bookmark.author_screen_name }}" target="_blank" rel="noopener">
          <img src="{{ bookmark.author_profile_image_url }}" alt="" class="bookmark-avatar" loading="lazy">
        </a>
        {% endif %}
        <div>
          <a href="https://x.com/{{ bookmark.author_screen_name }}" target="_blank" rel="noopener" class="bookmark-name">{{ bookmark.author_name|default:bookmark.author_screen_name }}</a>
          <div class="bookmark-handle">@{{ bookmark.author_screen_name }}</div>
        </div>
      </div>
      <div class="post-actions">
        <a href="{{ bookmark.url|default:'#' }}" target="_blank" rel="noopener" class="action-btn action-btn-blue">
          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
          </svg>
          {% trans "Open on X" %}
        </a>
      </div>
    </div>

    {% if bookmark.text %}
    <div class="bookmark-detail-text">{{ bookmark.text|urlizetrunc:60|linebreaksbr }}</div>
    {% endif %}

    {% if bookmark.summary %}
    <div class="bookmark-detail-summary">{{ bookmark.summary }}</div>
    {% endif %}

    {% if bookmark.media %}
    <div class="bm-media {{ bookmark.media|length|media_grid_class }}">
      {% for m in bookmark.media %}
        {% if m.type == 'photo' %}
        <a class="bm-cell" href="{{ m.media_large|default:m.media_url }}" target="_blank" rel="noopener">
          <img src="{{ m.media_large|default:m.media_url }}" alt="{{ m.alt_text|default:'' }}" loading="lazy">
        </a>
        {% elif m.type == 'video' or m.type == 'animated_gif' %}
        {% with v=m.video %}
        <a class="bm-cell" href="{{ bookmark.url|default:'#' }}" target="_blank" rel="noopener" title="{% trans 'Open on X to play' %}">
          <span class="bm-vbadge">{% if m.type == 'animated_gif' %}GIF{% else %}VIDEO{% endif %}</span>
          <img src="{{ v.poster|default:m.media_thumb|default:m.media_large|default:m.media_url }}" alt="" loading="lazy">
          <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 %}

    {% if bookmark.has_card and bookmark.card_data %}
      {% with c=bookmark.card_data %}
      {% if c.title or c.description or c.image %}
      <a class="bm-cardlink" href="{{ c.url|default:'#' }}" target="_blank" rel="noopener">
        {% 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 %}

    {% if bookmark.is_quote and bookmark.quoted_data %}
      {% with q=bookmark.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">
        <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:''|linebreaksbr }}</div>
      </a>
      {% endwith %}
      {% endif %}
      {% endwith %}
    {% endif %}

    <!-- Metrics -->
    <div class="bookmark-detail-metrics">
      {% if bookmark.reply_count %}<span class="bookmark-metric">💬 {{ bookmark.reply_count }} <span class="metric-label">{% trans "Replies" %}</span></span>{% endif %}
      {% if bookmark.retweet_count %}<span class="bookmark-metric">🔁 {{ bookmark.retweet_count }} <span class="metric-label">{% trans "Retweets" %}</span></span>{% endif %}
      {% if bookmark.favorite_count %}<span class="bookmark-metric">❤ {{ bookmark.favorite_count }} <span class="metric-label">{% trans "Likes" %}</span></span>{% endif %}
      {% if bookmark.bookmark_count %}<span class="bookmark-metric">🔖 {{ bookmark.bookmark_count }} <span class="metric-label">{% trans "Bookmarks" %}</span></span>{% endif %}
      {% if bookmark.view_count %}<span class="bookmark-metric">📊 {{ bookmark.view_count }} <span class="metric-label">{% trans "Views" %}</span></span>{% endif %}
    </div>

    <!-- Timestamps -->
    <div class="post-timestamps">
      {% if bookmark.tweet_created_at %}
      <div class="timestamp-item">
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
        </svg>
        <span class="timestamp-label">{% trans "Posted" %}:</span>
        <time datetime="{{ bookmark.tweet_created_at|date:'Y-m-d H:i' }}">{{ bookmark.tweet_created_at|date:"Y-m-d H:i" }}</time>
      </div>
      {% endif %}
      <div class="timestamp-item">
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v1a2 2 0 01-2 2M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8"/>
        </svg>
        <span class="timestamp-label">{% trans "Bookmarked" %}:</span>
        <time datetime="{{ bookmark.created_at|date:'Y-m-d H:i' }}">{{ bookmark.created_at|date:"Y-m-d H:i" }}</time>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
  /* ============================================================
     Apple-inspired design system — Bookmark detail page
     Mirrors the post detail page: #f5f5f7 canvas, SF typography,
     soft shadows, pill buttons, generous rounded cards, 80rem page.
     ============================================================ */
  :root {
    --apple-bg: #f5f5f7;
    --apple-text: #1d1d1f;
    --apple-gray: #6e6e73;
    --apple-blue: #0071e3;
    --apple-blue-hover: #0077ed;
    --apple-red: #ff3b30;
    --apple-green: #1e7b34;
    --apple-separator: rgba(0, 0, 0, 0.06);
    --apple-ease: cubic-bezier(0.28, 0.11, 0.32, 1);
    --apple-radius-lg: 28px;
    --apple-radius-md: 22px;
    --apple-radius-sm: 14px;
    --apple-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.05);
  }

  body {
    background-color: var(--apple-bg) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
      "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--apple-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* page shell — same max-width as the post-detail layout (#post-toc-layout: 80rem) */
  #post-toc-layout { max-width: 80rem; margin: 0.5rem auto; padding: 0.5rem; }
  .main-content {
    background: #fff;
    border-radius: var(--apple-radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: var(--apple-shadow-card);
    padding: clamp(1.25rem, 4vw, 2.5rem);
    max-width: 44rem;
    margin: 0 auto;
  }

  .back-link {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.85rem; font-weight: 600; color: var(--apple-gray);
    text-decoration: none; margin-bottom: 1.25rem;
  }
  .back-link svg { width: 1rem; height: 1rem; }
  .back-link:hover { color: var(--apple-text); }

  .post-header-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.85rem; margin-bottom: 1.1rem; }
  .post-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; flex-wrap: wrap; }

  .action-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 1rem; border-radius: 980px;
    font-size: 0.85rem; font-weight: 600; border: none; cursor: pointer;
    text-decoration: none; white-space: nowrap;
    transition: background 0.25s var(--apple-ease), color 0.25s var(--apple-ease), transform 0.2s var(--apple-ease);
  }
  .action-btn:active { transform: scale(0.96); }
  .action-btn svg { width: 1rem; height: 1rem; }
  .action-btn-blue { background: rgba(0, 113, 227, 0.10); color: var(--apple-blue); }
  .action-btn-blue:hover { background: rgba(0, 113, 227, 0.18); }

  .bookmark-author { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
  .bookmark-avatar { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; border: 1px solid var(--apple-separator); }
  .bookmark-name { font-weight: 700; color: var(--apple-text); text-decoration: none; }
  .bookmark-name:hover { text-decoration: underline; }
  .bookmark-handle { font-size: 0.85rem; color: var(--apple-gray); }

  .bookmark-detail-text {
    font-size: 1.05rem; line-height: 1.55; color: var(--apple-text);
    white-space: pre-wrap; word-wrap: break-word; unicode-bidi: plaintext;
    margin-top: 0.75rem;
  }
  .bookmark-detail-text a { color: var(--apple-blue); text-decoration: none; }
  .bookmark-detail-text a:hover { text-decoration: underline; }
  .bookmark-detail-summary {
    margin-top: 0.85rem; font-size: 0.9rem; color: var(--apple-green);
    background: rgba(48, 209, 88, 0.10); border: 1px solid rgba(48, 209, 88, 0.25);
    border-radius: var(--apple-radius-sm); padding: 0.6rem 0.85rem;
  }

  /* media grid (photos/video) */
  .bm-media { margin-top: 1.1rem; display: grid; gap: 4px; }
  .bm-media.one { grid-template-columns: 1fr; }
  .bm-media.two { grid-template-columns: 1fr 1fr; }
  .bm-media.three { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
  .bm-media.three .bm-cell:nth-child(1) { grid-row: 1 / span 2; }
  .bm-media.four { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
  .bm-cell { position: relative; overflow: hidden; border-radius: var(--apple-radius-sm); cursor: pointer;
    background: #0d1b27; min-height: 160px; display: block; text-decoration: none; }
  .bm-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.2s; }
  .bm-cell:hover img { filter: brightness(0.92); }
  .bm-vbadge { position: absolute; left: 10px; top: 10px; background: rgba(0, 0, 0, 0.65); color: #fff;
    font-size: 10.5px; padding: 2px 8px; border-radius: 6px; pointer-events: none; font-weight: 600; }
  .bm-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
  .bm-play .ring { width: 54px; height: 54px; border-radius: 50%; background: rgba(0, 0, 0, 0.55);
    display: flex; align-items: center; justify-content: center; color: #fff; backdrop-filter: blur(2px); }
  .bm-dur { position: absolute; right: 8px; bottom: 8px; background: rgba(0, 0, 0, 0.7); color: #fff;
    font-size: 11px; padding: 1px 6px; border-radius: 4px; pointer-events: none; font-weight: 600; }
  .bm-xbadge { position: absolute; right: 8px; top: 8px; background: rgba(0, 113, 227, 0.92); color: #fff;
    font-size: 10px; padding: 1px 7px; border-radius: 5px; font-weight: 700; pointer-events: none; }

  /* link preview card */
  .bm-cardlink { border: 1px solid var(--apple-separator); border-radius: var(--apple-radius-sm); overflow: hidden; display: flex;
    text-decoration: none; color: var(--apple-text); margin-top: 1.1rem; transition: border-color 0.15s, background 0.15s; }
  .bm-cardlink:hover { border-color: rgba(0, 0, 0, 0.10); background: var(--apple-bg); }
  .bm-cardlink .ci { flex: 1; padding: 0.7rem 0.85rem; min-width: 0; }
  .bm-cardlink .csite { color: var(--apple-gray); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bm-cardlink .ct { font-weight: 700; margin: 3px 0 2px; font-size: 0.95rem; line-height: 1.25; }
  .bm-cardlink .cd { color: var(--apple-gray); font-size: 0.82rem; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .bm-cardlink img { width: 140px; max-height: 200px; object-fit: cover; flex: 0 0 140px; }

  /* quoted post */
  .bm-quote { margin-top: 1.1rem; border: 1px solid var(--apple-separator); border-radius: var(--apple-radius-sm); padding: 0.85rem 0.9rem;
    cursor: pointer; background: var(--apple-bg); text-decoration: none; display: block; transition: border-color 0.15s, background 0.15s; }
  .bm-quote:hover { border-color: rgba(0, 0, 0, 0.10); background: #ececef; }
  .bm-quote .qhead { display: flex; gap: 8px; align-items: center; font-size: 0.88rem; color: var(--apple-text); }
  .bm-quote .qhead img { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--apple-separator); }
  .bm-quote .qhead .name { font-weight: 700; }
  .bm-quote .qhead .handle { color: var(--apple-gray); font-size: 0.82rem; }
  .bm-quote .qtext { font-size: 0.92rem; margin-top: 0.55rem; white-space: pre-wrap; unicode-bidi: plaintext;
    line-height: 1.45; color: var(--apple-text); }

  /* metrics */
  .bookmark-detail-metrics { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--apple-separator); }
  .bookmark-metric { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--apple-text);
    background: var(--apple-bg); border-radius: 980px; padding: 0.4rem 0.85rem; font-weight: 600; }
  .bookmark-metric .metric-label { font-weight: 500; color: var(--apple-gray); }

  /* timestamps */
  .post-timestamps { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; font-size: 0.85rem; color: var(--apple-gray);
    background: var(--apple-bg); border-radius: 980px; padding: 0.6rem 1.1rem; margin-top: 1.25rem; }
  .post-timestamps .timestamp-item { display: flex; align-items: center; }
  .post-timestamps svg { width: 1rem; height: 1rem; margin-right: 0.4rem; color: #a1a1a6; }
  .post-timestamps .timestamp-label { font-weight: 600; color: var(--apple-text); margin-right: 0.25rem; }
</style>
{% endblock %}