<?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>

        <?php if (have_posts()) : ?>
            <div class="idiom-grid">
                <?php while (have_posts()) : the_post(); ?>
                    <div class="idiom-item">
                        <a href="<?php the_permalink(); ?>" class="idiom-link">
                            <div class="idiom-word"><?php the_title(); ?></div>
                            <div class="idiom-pinyin">
                                <?php 
                                $pinyin = get_post_meta(get_the_ID(), '_idiom_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-idiom-found">
                <p>暂无成语条目。</p>
            </div>
        <?php endif; ?>
    </main>
</div>

<style>
/* 成语词典归档页面样式 */
.idiom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

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

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

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

.idiom-word {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

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

.no-idiom-found {
    text-align: center;
    padding: 40px 0;
    color: #666;
}
</style>

<?php
get_footer();