{% extends "base.html" %}
{% block title %}PPT 图卡解读 · 雪糕冰脚{% endblock %}

{% block content %}
<div class="page-head">
  <h1>PPT 图卡解读</h1>
  <p>每一页 PPT 单独解读：图、分类关键词、解说词、创建日期、来源主题。<br>
     <span style="font-size:12.5px;color:var(--text-3)">分类为人工创建的独立关键词：纳入全站搜索，共享同一分类的图卡在详情页自动聚类为相似图卡。</span></p>
</div>

<div class="stats" style="grid-template-columns:repeat(3,minmax(0,1fr))">
  <div class="stat">
    <div class="num">{{ total }}</div>
    <div class="lbl">你可查看的图卡</div>
  </div>
  <div class="stat">
    <div class="num locked">{{ locked }}</div>
    <div class="lbl">需解锁</div>
  </div>
  <div class="stat">
    <div class="num">{{ total + locked }}</div>
    <div class="lbl">本栏目已发布总数</div>
  </div>
</div>

{% if locked > 0 %}
<div class="locked-note">
  <div>
    本栏目还有 <b>{{ locked }}</b> 张图卡不在你的可见范围内。
    {% if not current_user %}注册后可查看注册起 1 个月内的内容。{% else %}到会员中心查看它们分布在哪些时间段。{% endif %}
  </div>
  <div style="white-space:nowrap">
    {% if current_user %}
      <a class="btn primary small" href="{{ url_for('member.center') }}">查看可见范围</a>
    {% else %}
      <a class="btn primary small" href="{{ url_for('auth.register') }}">注册解锁</a>
    {% endif %}
  </div>
</div>
{% endif %}

{% if items %}
  <div class="grid cols-3">
    {% for it in items %}
      {% include "gallery/_card.html" %}
    {% endfor %}
  </div>

  {% if total_pages > 1 %}
  <div class="pager">
    {% if page > 1 %}
      <a href="{{ url_for('gallery.index', page=page-1) }}">上一页</a>
    {% endif %}
    {% for p in range(1, total_pages + 1) %}
      {% if p == page %}
        <span class="cur">{{ p }}</span>
      {% elif p <= 2 or p > total_pages - 2 or (p >= page - 2 and p <= page + 2) %}
        <a href="{{ url_for('gallery.index', page=p) }}">{{ p }}</a>
      {% elif p == 3 or p == total_pages - 2 %}
        <span style="border:none;background:none">…</span>
      {% endif %}
    {% endfor %}
    {% if page < total_pages %}
      <a href="{{ url_for('gallery.index', page=page+1) }}">下一页</a>
    {% endif %}
  </div>
  {% endif %}
{% else %}
  <div class="empty">
    暂无图卡数据。<br>
    <span style="font-size:12.5px">运行 <code>python scripts/import_ppt.py</code> 导入讲座 PPT 图卡。</span>
  </div>
{% endif %}
{% endblock %}