{% extends 'base_new.html' %}

{% block title %}Skills - AI 工具技能库 | ZJPB{% endblock %}

{% block extra_head %}
<meta name="description" content="ZJPB Skills - 发现和使用各种 AI 工具 Skills，提升工作效率">
<meta name="keywords" content="AI Skills,Claude Code,OpenClaw,工具技能,ZJPB">
<link rel="canonical" href="{{ request.url }}">
{% endblock %}

{% block extra_css %}
<style>
    .skills-hero {
        padding: 40px 0;
        text-align: center;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        margin-bottom: 40px;
    }

    .skills-hero h1 {
        font-size: 36px;
        font-weight: 700;
        margin-bottom: 12px;
    }

    .skills-hero p {
        font-size: 18px;
        opacity: 0.9;
    }

    .featured-skills {
        padding: 0 24px;
        margin-bottom: 40px;
    }

    .featured-skills h2 {
        font-size: 24px;
        margin-bottom: 20px;
        color: #1e293b;
    }

    .skill-card {
        background: white;
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        text-decoration: none;
        display: block;
    }

    .skill-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    }

    .skill-card-logo {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
        margin-bottom: 16px;
    }

    .skill-card-logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 12px;
    }

    .skill-card-name {
        font-size: 18px;
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 8px;
    }

    .skill-card-desc {
        font-size: 14px;
        color: #64748b;
        line-height: 1.6;
        margin-bottom: 12px;
    }

    .skill-card-meta {
        display: flex;
        gap: 12px;
        font-size: 12px;
        color: #94a3b8;
    }

    .skill-card-badge {
        display: inline-block;
        padding: 4px 8px;
        background: #f1f5f9;
        border-radius: 4px;
        font-size: 12px;
        color: #64748b;
    }

    .skills-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
        padding: 0 24px;
    }
</style>
{% endblock %}

{% block main %}
<div class="skills-hero">
    <div class="hero-content">
        <h1>🛠️ Skills</h1>
        <p>发现和使用各种 AI 工具 Skills，提升工作效率</p>
    </div>
</div>

<div class="tools-section" style="max-width: 1280px; margin: 0 auto;">
    {% if featured_skills %}
    <div class="featured-skills">
        <h2>⭐ 推荐 Skills</h2>
        <div class="skills-grid">
            {% for skill in featured_skills %}
            <a href="{{ url_for('skill_detail', slug=skill.slug) }}" class="skill-card">
                <div class="skill-card-logo">
                    {% if skill.logo %}
                    <img src="{{ skill.logo }}" alt="{{ skill.name }}">
                    {% else %}
                    🛠️
                    {% endif %}
                </div>
                <div class="skill-card-name">{{ skill.name }}</div>
                <div class="skill-card-desc">{{ skill.short_desc or skill.description[:100] }}</div>
                <div class="skill-card-meta">
                    {% if skill.source_type == 'github' %}
                    <span class="skill-card-badge">📦 GitHub</span>
                    {% else %}
                    <span class="skill-card-badge">✏️ 手动添加</span>
                    {% endif %}
                    <span>👁 {{ skill.view_count or 0 }}</span>
                </div>
            </a>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <div class="featured-skills">
        <h2>📋 所有 Skills</h2>
        {% if skills %}
        <div class="skills-grid">
            {% for skill in skills %}
            <a href="{{ url_for('skill_detail', slug=skill.slug) }}" class="skill-card">
                <div class="skill-card-logo">
                    {% if skill.logo %}
                    <img src="{{ skill.logo }}" alt="{{ skill.name }}">
                    {% else %}
                    🛠️
                    {% endif %}
                </div>
                <div class="skill-card-name">{{ skill.name }}</div>
                <div class="skill-card-desc">{{ skill.short_desc or skill.description[:100] }}</div>
                <div class="skill-card-meta">
                    {% if skill.source_type == 'github' %}
                    <span class="skill-card-badge">📦 GitHub</span>
                    {% else %}
                    <span class="skill-card-badge">✏️ 手动添加</span>
                    {% endif %}
                    <span>👁 {{ skill.view_count or 0 }}</span>
                </div>
            </a>
            {% endfor %}
        </div>
        {% else %}
        <div style="text-align: center; padding: 60px 20px; color: #64748b;">
            <p style="font-size: 18px;">暂无 Skills</p>
            <p>请在后台添加 Skills</p>
        </div>
        {% endif %}
    </div>

    {% if pagination and pagination.pages > 1 %}
    <div class="pagination" style="justify-content: center; margin-top: 40px; display: flex; gap: 8px;">
        {% if pagination.has_prev %}
        <a href="?page={{ pagination.prev_num }}" class="page-btn">上一页</a>
        {% endif %}

        {% for page_num in pagination.iter_pages(left_edge=2, right_edge=2, left_current=2, right_current=2) %}
            {% if page_num %}
                <a href="?page={{ page_num }}" class="page-btn {% if page_num == pagination.page %}active{% endif %}">{{ page_num }}</a>
            {% else %}
                <span>...</span>
            {% endif %}
        {% endfor %}

        {% if pagination.has_next %}
        <a href="?page={{ pagination.next_num }}" class="page-btn">下一页</a>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}