{% extends "base.html" %}
{% block title %}{{ card.title }} · PPT 图卡{% endblock %}
{% block desc %}{{ card.narration|mask_summary(80) if card.narration else card.title }}{% endblock %}

{% block content %}
<div class="detail">
  <p style="font-size:13px;margin:20px 0 14px">
    <a href="{{ url_for('gallery.index') }}">PPT 图卡</a>
    {% if card.source_ppt %} / <span style="color:var(--text-3)">{{ card.source_ppt }}</span>{% endif %}
  </p>

  {# ---- 管理员工具条 ---- #}
  {% if current_user and current_user.role == 'admin' %}
  <div class="admin-bar">
    <span class="lbl">管理员</span>
    <a class="btn small" href="{{ url_for('gallery.edit_card', cid=card.id) }}">编辑此卡</a>
    <form method="post" action="{{ url_for('gallery.delete_card', cid=card.id) }}"
          onsubmit="return confirm('确定删除这张图卡？删除后不可恢复。')">
      <button class="btn small danger" type="submit">删除</button>
    </form>
  </div>
  {% endif %}

  {# ---- 左图右文 7 : 2 ---- #}
  <div class="detail-grid">
    <div class="slide">
      {% if card.thumb_lg %}
        <img src="{{ card.thumb_lg }}" alt="{{ card.title }}">
      {% elif card.slide_img %}
        <img src="{{ card.slide_img }}" alt="{{ card.title }}">
      {% else %}
        <div style="padding:80px 0;color:var(--text-3)">图片缺失</div>
      {% endif %}
    </div>

    <aside class="side">
      <h1>{{ card.title }}</h1>

      {# 五要素之「分类」：每个分类 = 一个独立关键词；点击=该关键词的相似图卡聚类 #}
      {% if tags %}
      <div class="tags">
        {% for t in tags %}
          <a class="tag" href="{{ url_for('main.search', q=t.name) }}">{{ t.name }}</a>
        {% endfor %}
      </div>
      {% endif %}

      {# 五要素之「解说词」 #}
      {% if card.narration %}
      <div class="narration">{{ card.narration }}</div>
      {% else %}
      <div class="narration side-empty">这张图卡还没有填写解说词。</div>
      {% endif %}
    </aside>
  </div>

  {# ---- 五要素之「创建日期」「来源 PPT 主题」+ 浏览量 ---- #}
  <div class="meta-bar cols-3">
    <div>
      <div class="k">创建日期</div>
      <div class="v">{{ card.publish_at|dt('%Y 年 %m 月 %d 日') }}</div>
    </div>
    <div>
      <div class="k">来源 PPT 主题</div>
      <div class="v">
        {% if card.source_ppt %}{{ card.source_ppt }}{% else %}—{% endif %}
        {% if card.slide_no %}<span style="color:var(--text-3)"> · 第 {{ card.slide_no }} 页</span>{% endif %}
      </div>
    </div>
    <div>
      <div class="k">浏览量</div>
      <div class="v">{{ card.view_count }}</div>
    </div>
  </div>

  {# ---- 相似图卡聚类：共享分类越多越相似 ---- #}
  {% if similar_cards %}
  <section style="margin-top:32px">
    <h2 style="font-size:15px;font-weight:600;margin:0 0 4px">
      相似图卡 · 按共享分类聚类
    </h2>
    <p style="font-size:12.5px;color:var(--text-3);margin:0 0 12px">
      与本卡共享分类关键词的其他图卡，共享越多排得越靠前。
    </p>
    <div class="grid cols-4">
      {% for s in similar_cards %}
        <a class="card pt" href="{{ url_for('gallery.detail', cid=s.id) }}" style="text-decoration:none">
          {% if s.thumb_sm %}
            <img class="thumb" src="{{ s.thumb_sm }}" alt="{{ s.title }}" loading="lazy">
          {% else %}
            <div class="thumb-ph">无图</div>
          {% endif %}
          <div class="body">
            <h3 style="color:var(--text)">{{ s.title }}</h3>
            <div class="meta"><span>{{ s.publish_at|dt }}</span><span style="color:var(--accent)">共享 {{ s.shared }} 个分类</span></div>
          </div>
        </a>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  {# ---- 同主题更多：内容独有的横切维度 ---- #}
  {% if same_topic %}
  <section style="margin-top:32px">
    <h2 style="font-size:15px;font-weight:600;margin:0 0 12px">
      同主题更多 · {{ card.source_ppt }}
    </h2>
    <div class="grid cols-4">
      {% for s in same_topic %}
        <a class="card pt" href="{{ url_for('gallery.detail', cid=s.id) }}" style="text-decoration:none">
          {% if s.thumb_sm %}
            <img class="thumb" src="{{ s.thumb_sm }}" alt="{{ s.title }}" loading="lazy">
          {% else %}
            <div class="thumb-ph">无图</div>
          {% endif %}
          <div class="body">
            <h3 style="color:var(--text)">{{ s.title }}</h3>
            <div class="meta"><span>{{ s.publish_at|dt }}</span><span></span></div>
          </div>
        </a>
      {% endfor %}
    </div>
  </section>
  {% endif %}
</div>
{% endblock %}