<?php
/**
 * 汉字归档页面模板 - 带拼音索引
 */

get_header(); ?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <header class="page-header">
            <h1 class="page-title">汉字字典</h1>
            <p class="page-description">按拼音索引浏览汉字</p>
        </header>

        <!-- 拼音索引导航 -->
        <div class="pinyin-index-nav">
            <div class="index-container">
                <?php 
                $letters = range('A', 'Z');
                foreach ($letters as $letter) :
                    // 创建带锚点的链接，假设我们通过URL参数过滤
                    $url = add_query_arg('pinyin_initial', strtolower($letter), get_pagenum_link(1));
                ?>
                    <a href="<?php echo esc_url($url); ?>" class="index-letter"><?php echo $letter; ?></a>
                <?php endforeach; ?>
                <a href="<?php echo remove_query_arg('pinyin_initial'); ?>" class="index-letter active">全部</a>
            </div>
        </div>

        <?php if (have_posts()) : ?>
            <div class="characters-grid">
                <?php while (have_posts()) : the_post(); ?>
                    <div class="character-item">
                        <a href="<?php the_permalink(); ?>" class="character-link">
                            <div class="character-char"><?php the_title(); ?></div>
                            <div class="character-pinyin">
                                <?php 
                                $pinyin = get_post_meta(get_the_ID(), '_character_pinyin', true);
                                echo $pinyin ? esc_html($pinyin) : '';
                                ?>
                            </div>
                        </a>
                    </div>
                <?php endwhile; ?>
            </div>

            <?php
            the_posts_pagination(array(
                'prev_text' => '上一页',
                'next_text' => '下一页',
            ));
            ?>

        <?php else : ?>
            <div class="no-characters-found">
                <p>暂无汉字条目。</p>
            </div>
        <?php endif; ?>
    </main>
</div>

<style>
/* 汉字归档页面样式 */
.characters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.character-item {
    text-align: center;
}

.character-link {
    display: block;
    text-decoration: none;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.character-link:hover {
    background-color: #f5f5f5;
    border-color: #0073aa;
}

.character-char {
    font-size: 32px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.character-pinyin {
    font-size: 14px;
    color: #666;
}

.no-characters-found {
    text-align: center;
    padding: 50px;
    color: #999;
}

/* 拼音索引样式 */
.pinyin-index-nav {
    margin: 20px 0;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.index-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.index-letter {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 50%;
    text-decoration: none;
    color: #495057;
    font-weight: 500;
    transition: all 0.3s ease;
}

.index-letter:hover,
.index-letter.active {
    background-color: #0073aa;
    border-color: #0073aa;
    color: white;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .index-container {
        gap: 6px;
    }
    
    .index-letter {
        width: 32px;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
    }
    
    .characters-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 15px;
    }
    
    .character-char {
        font-size: 28px;
    }
}
</style>

<?php get_footer(); ?>