{% extends 'base_new.html' %}

{% block title %}{{ skill.name }} - Skills | ZJPB{% endblock %}

{% block extra_head %}
<meta name="description" content="{{ skill.short_desc or (skill.description[:150] if skill.description else '') }}">
<meta name="keywords" content="{{ skill.name }},Skills,AI工具,自己品吧,ZJPB">
<link rel="canonical" href="{{ request.url }}">

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="{{ skill.name }} - Skills">
<meta property="og:description" content="{{ skill.short_desc or skill.description[:150] }}">
<meta property="og:url" content="{{ request.url }}">
{% if skill.logo %}<meta property="og:image" content="{{ request.url_root.rstrip('/') }}{{ skill.logo }}">{% endif %}
{% endblock %}

{% block extra_css %}
<style>
    .skill-detail-header {
        padding: 40px 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

    .skill-detail-content {
        max-width: 900px;
        margin: 0 auto;
        padding: 40px 24px;
    }

    .skill-detail-logo {
        width: 80px;
        height: 80px;
        border-radius: 16px;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 40px;
        margin-bottom: 20px;
    }

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

    .skill-detail-title {
        font-size: 32px;
        font-weight: 700;
        margin-bottom: 12px;
    }

    .skill-detail-desc {
        font-size: 18px;
        opacity: 0.9;
        margin-bottom: 20px;
    }

    .skill-detail-meta {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }

    .skill-meta-item {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        background: rgba(255,255,255,0.2);
        border-radius: 20px;
        font-size: 14px;
    }

    .skill-section {
        margin-bottom: 32px;
    }

    .skill-section-title {
        font-size: 20px;
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 2px solid #e2e8f0;
    }

    .skill-content-box {
        background: #f8fafc;
        border-radius: 12px;
        padding: 24px;
    }

    .skill-content-box pre {
        background: #1e293b;
        color: #e2e8f0;
        padding: 16px;
        border-radius: 8px;
        overflow-x: auto;
        font-family: 'Monaco', 'Menlo', monospace;
        font-size: 14px;
        line-height: 1.6;
    }

    .skill-content-box code {
        font-family: 'Monaco', 'Menlo', monospace;
    }

    .github-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 24px;
        background: #24292e;
        color: white;
        text-decoration: none;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .github-link:hover {
        background: #1b1f23;
        transform: translateY(-2px);
    }

    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #64748b;
        text-decoration: none;
        margin-bottom: 24px;
    }

    .back-link:hover {
        color: #0ea5e9;
    }
</style>
{% endblock %}

{% block main %}
<div class="skill-detail-header">
    <div class="skill-detail-content">
        <a href="/skills" class="back-link" style="color: white;">
            ← 返回 Skills 列表
        </a>
        <div class="skill-detail-logo">
            {% if skill.logo %}
            <img src="{{ skill.logo }}" alt="{{ skill.name }}">
            {% else %}
            🛠️
            {% endif %}
        </div>
        <h1 class="skill-detail-title">{{ skill.name }}</h1>
        <p class="skill-detail-desc">{{ skill.short_desc or skill.description }}</p>
        <div class="skill-detail-meta">
            {% if skill.source_type == 'github' %}
            <span class="skill-meta-item">📦 来源: GitHub</span>
            {% if skill.source_repo %}
            <span class="skill-meta-item">{{ skill.source_repo }}</span>
            {% endif %}
            {% else %}
            <span class="skill-meta-item">✏️ 来源: 手动添加</span>
            {% endif %}
            <span class="skill-meta-item">👁 浏览: {{ skill.view_count or 0 }}</span>
        </div>
    </div>
</div>

<div class="skill-detail-content">
    {% if skill.description %}
    <div class="skill-section">
        <h2 class="skill-section-title">📖 介绍</h2>
        <div class="skill-content-box">
            {{ skill.description | replace('\n', '<br>') | safe }}
        </div>
    </div>
    {% endif %}

    {% if skill.usage %}
    <div class="skill-section">
        <h2 class="skill-section-title">🚀 使用方法</h2>
        <div class="skill-content-box">
            {{ skill.usage | replace('\n', '<br>') | safe }}
        </div>
    </div>
    {% endif %}

    {% if skill.examples %}
    <div class="skill-section">
        <h2 class="skill-section-title">💡 使用示例</h2>
        <div class="skill-content-box">
            <pre>{{ skill.examples }}</pre>
        </div>
    </div>
    {% endif %}

    {% if skill.github_url %}
    <div class="skill-section">
        <h2 class="skill-section-title">🔗 GitHub</h2>
        <a href="{{ skill.github_url }}" target="_blank" class="github-link">
            <svg height="20" width="20" viewBox="0 0 16 16" fill="currentColor">
                <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
            </svg>
            在 GitHub 查看
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}