{include file="component/head" /}
{include file="component/header" /}
<div class="layui-container" style="padding: 20px 0;">
    <div class="layui-row">
        <div class="layui-col-md12">
            <!-- 搜索头部 -->
            <div class="layui-card">
                <div class="layui-card-header" style="display: flex; align-items: center;">
                    <h6 class="layui-inline" style="margin-bottom: 0;padding:10px 0;">搜索结果：{$keyword}</h6>
                    <!-- <div class="layui-inline" style="float: right;">
                        <a href="/index/search/list?keyword={$keyword}&type=article" class="layui-btn layui-btn-sm {$type == 'article' ? 'layui-btn-normal' : 'layui-btn-primary'}">文章</a>
                        <a href="/index/search/list?keyword={$keyword}&type=resource" class="layui-btn layui-btn-sm {$type == 'resource' ? 'layui-btn-normal' : 'layui-btn-primary'}">资源</a>
                    </div> -->
                </div>
            </div>

            <!-- 搜索结果列表 -->
            <div class="layui-row layui-col-space20" style="margin-top: 20px;">
                {if $items}
                    {volist name="items" id="item"}
                    <div class="layui-col-md12">
                        <div class="search-result-item" onclick="window.location.href='<?php echo $type == 'articles' ? url('articles/detail', ['id' => $item['id']]) : $item['detail_url'] ?>'">
                            <div class="search-result-image">
                                <?php if($type == 'article'): ?>
                                    <img src="<?php echo $item['image'] ?: '/static/images/default.jpg' ?>" alt="<?php echo $item['title'] ?>">
                                <?php else: ?>
                                    <img src="<?php echo $item['icon'] ?: '/static/images/default.jpg' ?>" alt="<?php echo $item['title'] ?>">
                                <?php endif; ?>
                            </div>
                            <div class="search-result-content">
                                <h3 class="search-result-title"><?php echo $item['title'] ?></h3>
                                <div class="search-result-meta">
                                    <span class="layui-badge layui-bg-blue"><?php echo $item['cate'] ?></span>
                                    <?php if($type == 'article'): ?>
                                        <span class="layui-badge layui-bg-green">作者：<?php echo $item['author'] ?></span>
                                    <?php else: ?>
                                        <span class="layui-badge layui-bg-green">上传者：<?php echo $item['uploader'] ?></span>
                                    <?php endif; ?>
                                    <span class="layui-badge layui-bg-gray"><?php echo $item['publishdate'] ?></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    {/volist}
                {else}
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-body" style="text-align: center; padding: 50px 0;">
                                <i class="layui-icon layui-icon-face-surprised" style="font-size: 48px; color: #999;"></i>
                                <p style="margin-top: 15px; color: #999;">暂无相关{$type == 'article' ? '文章' : '资源'}</p>
                            </div>
                        </div>
                    </div>
                {/if}
            </div>

            <!-- 分页 -->
            <div id="pagination" style="text-align: center; margin-top: 20px;"></div>
        </div>
    </div>
</div>
{include file="component/footer" /}
{include file="component/foot" /}

<script>
layui.use(['laypage'], function(){
    var laypage = layui.laypage;
    
    //执行一个laypage实例
    laypage.render({
        elem: 'pagination',
        count: {$count},
        limit: {$limit},
        curr: {$page},
        jump: function(obj, first){
            if(!first){
                var url = '/index/search/list?keyword={$keyword}&type={$type}&page=' + obj.curr + '&limit=' + obj.limit;
                window.location.href = url;
            }
        }
    });
});
</script>

<style>
.search-result-item {
    display: flex;
    align-items: center;
    padding: 15px;
    transition: all 0.3s ease;
    border-radius: 4px;
    background-color: #fff;
}

.search-result-item:hover {
    background-color:rgb(255, 255, 255);
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 174, 255, 0.5);
}

.search-result-image {
    margin-right: 20px;
    flex-shrink: 0;
}

.search-result-image img {
    width: 250px;
    height: 140px;
    object-fit: cover;
    border-radius: 4px;
}

.search-result-content {
    flex: 1;
}

.search-result-title {
    font-size: 18px;
    color: #333;
    margin: 0 0 10px 0;
}

.search-result-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.search-result-meta .layui-badge {
    margin-right: 5px;
}
</style>