{% extends 'public/base.html' %}

{# 单张导航卡片：热门 / 个人 / 普通分类共用 #}
{% macro nav_card(item, cls='', mine=None) %}
<a class="card {{ cls }}"
   href="{{ item.url }}"
   data-nav-id="{{ item.id }}"
   {%- if mine is not none %} data-mine="{{ mine }}"{% endif %}
   {%- if item.is_external %} target="_blank" rel="noopener noreferrer"{% endif %}>
    <div class="icon-wrap">
        <i class="layui-icon {{ item.icon }}"></i>
    </div>
    <div class="card-body">
        <div class="title-row">
            <div class="title" title="{{ item.title }}">{{ item.title }}</div>
            {% if item.is_external %}
            <span class="ext-tag" title="外部链接"><i class="layui-icon layui-icon-link"></i></span>
            {% endif %}
        </div>
        <div class="desc">{{ item.description or '暂无描述' }}</div>
        <div class="url" title="{{ item.url }}">{{ item.url }}</div>
        <div class="visit-count" data-nav-visit="{{ item.visit_count or 0 }}">
            {%- if mine is not none -%}
                我点过 {{ item.mine_count or 0 }} 次
            {%- else -%}
                {%- set vc = item.visit_count or 0 -%}
                {%- if vc >= 3 -%}访问 {{ '{:,}'.format(vc) }}
                {%- else -%}新
                {%- endif -%}
            {%- endif -%}
        </div>
    </div>
    <div class="card-arrow"><i class="layui-icon layui-icon-right"></i></div>
</a>
{% endmacro %}

{# 分类目录条（sticky 顶部导航） #}
{% block cat_nav %}
{% if groups or top_navs or my_navs %}
<nav class="cat-nav" aria-label="分类导航">
    <div class="cat-nav-inner" id="cat-nav-inner">
        {% if my_navs %}<a href="#cat-mine" class="cat-nav-mine">★ 我常访问</a>{% endif %}
        {% if top_navs %}<a href="#cat-top" class="cat-nav-hot">🔥 热门网址</a>{% endif %}
        {% for category in groups.keys() %}
            <a href="#cat-{{ loop.index }}">{{ category }}</a>
        {% endfor %}
    </div>
</nav>
{% endif %}
{% endblock %}

{% block content %}
    {% if not groups and not top_navs and not my_navs %}
        <div class="empty">
            <i class="layui-icon layui-icon-face-surprised" style="font-size:48px;color:#ccc;"></i>
            <p>暂无导航数据，请先在后台【系统管理 → 导航管理】添加。</p>
        </div>
    {% else %}

        {# ===== 我常访问：基于匿名 ID + 本机 localStorage 的个人榜 ===== #}
        {% if my_navs %}
            <section class="section section-mine" id="cat-mine">
                <div class="section-header">
                    <h2><i class="layui-icon layui-icon-star-fill"></i> 我常访问</h2>
                    <div class="meta">只在这台设备上统计 · <a href="javascript:;" id="clear-mine">清除</a></div>
                </div>
                <div class="grid" id="mine-grid">
                    {% for item in my_navs %}
                        {{ nav_card(item, 'card-mine', item.mine_score) }}
                    {% endfor %}
                </div>
            </section>
        {% endif %}

        {# ===== 热门网址：跨分类聚合的全站 TOP N ===== #}
        {% if top_navs %}
            <section class="section section-hot" id="cat-top">
                <div class="section-header">
                    <h2><i class="layui-icon layui-icon-fire"></i> 热门网址</h2>
                    <div class="meta">全站访客共同热度，前 {{ top_navs|length }} 个</div>
                </div>
                <div class="grid">
                    {% for item in top_navs %}
                        {{ nav_card(item, 'card-top') }}
                    {% endfor %}
                </div>
            </section>
        {% endif %}

        {% for category, items in groups.items() %}
            {% set cat_id = 'cat-' ~ loop.index %}
            <section class="section" id="{{ cat_id }}">
                <div class="section-header">
                    <h2>{{ category }}</h2>
                    <div class="meta">
                        共 {{ items|length }} 个 ·
                        <a href="{{ url_for('public_nav.category_detail', name=category) }}">查看全部 →</a>
                    </div>
                </div>
                <div class="grid">
                    {% for item in items %}
                        {{ nav_card(item) }}
                    {% endfor %}
                </div>
            </section>
        {% endfor %}
    {% endif %}
{% endblock %}