{% extends "base.html" %}

<!-- ============================================================
     pages/index.html — 首页模板
     展示个人头像、欢迎语、2x2 卡片网格。
     卡片标题可点击直接进入全列表页。

     模板变量：
       - avatar_url:  String 头像图片 URL
       - about_brief: String 关于我一句话
       - latest_posts: Vec<Post> 最新 2 篇文章
       - projects:    Vec<Project> 最新 2 个项目
       - packages:    Vec<serde_json::Value> 最新 2 个包
       - site_name:   String 网站名称
     ============================================================ -->

{% block title %}{{ site_name }} — 首页{% endblock %}

{% block content %}
<!-- 头像 + 欢迎区 -->
<section class="hero">
    {% if avatar_url %}
    <img src="{{ avatar_url }}" alt="Aki" class="avatar">
    {% else %}
    <div class="avatar avatar-placeholder">Aki</div>
    {% endif %}
    <h1>欢迎来到 Aki 的小站!</h1>
    <p>Aki小站用来展示我的个人项目,文章和自用软件与文件分享!</p>
</section>

<!-- 2x2 卡片网格 -->
<div class="home-grid">
    <!-- 卡片：我的文章 -->
    <div class="home-card">
        <a href="/blog" class="home-card-title">我的文章</a>
        <div class="home-card-body">
            {% if latest_posts %}
                {% for post in latest_posts %}
                <a class="home-card-item" href="/blog/{{ post.slug }}">
                    <span class="dot">•</span> {{ post.title }}
                </a>
                {% endfor %}
            {% else %}
                <p class="home-card-empty">还没有文章呢…</p>
            {% endif %}
        </div>
    </div>

    <!-- 卡片：个人项目 -->
    <div class="home-card">
        <a href="/projects" class="home-card-title">个人项目</a>
        <div class="home-card-body">
            {% if projects %}
                {% for project in projects %}
                <a class="home-card-item" href="/projects/{{ project.slug }}">
                    <span class="dot">•</span> {{ project.title }}
                </a>
                {% endfor %}
            {% else %}
                <p class="home-card-empty">还没有项目呢…</p>
            {% endif %}
        </div>
    </div>

    <!-- 卡片：软件仓库 -->
    <div class="home-card">
        <a href="/repo" class="home-card-title">软件仓库</a>
        <div class="home-card-body">
            {% if packages %}
                {% for pkg in packages %}
                <a class="home-card-item" href="/repo/{{ pkg.slug }}">
                    <span class="dot">•</span> {{ pkg.name }}{% if pkg.latest_version %} v{{ pkg.latest_version }}{% endif %}
                </a>
                {% endfor %}
            {% else %}
                <p class="home-card-empty">暂无软件包…</p>
            {% endif %}
        </div>
    </div>

    <!-- 卡片：关于我 -->
    <div class="home-card">
        <a href="/about" class="home-card-title">关于我</a>
        <div class="home-card-body">
            <p class="home-card-brief">{{ about_brief }}</p>
        </div>
    </div>
</div>
{% endblock %}