{extend name="../view/default/basetmp.htm" /}
{block name="css"}
<link rel="stylesheet" href="__INDEX__/css/royalcms.news.css">
{/block}
{block name="main"}

    {include file='../view/default/innerbanner.htm'}  
    
<!-- 新闻列表内容 -->
<section class="royal-category-content">
    <div class="royal-container"> 
    {include file='../view/default/left.htm'}

        <!-- 新闻筛选区域 -->
        <div class="royal-inner-news-filter">
            <div class="royal-inner-news-count">
                {if $ArtRes->count() > 0}
                {:lang('news_display_count', [$ArtRes->count(), $ArtRes->total()])}
                {else}
                {:lang('news_total_count', [0])}
                {/if}
            </div>
            <div class="royal-inner-news-controls">
                <div class="royal-inner-news-sort">
                    <select id="royal-inner-news-sort">
                        <option value="default" {if $sort == 'default'}selected{/if}>{:lang('sort_default')}</option>
                        <option value="newest" {if $sort == 'newest'}selected{/if}>{:lang('sort_newest')}</option>
                        <option value="popular" {if $sort == 'popular'}selected{/if}>{:lang('sort_popular')}</option>
                        <option value="oldest" {if $sort == 'oldest'}selected{/if}>{:lang('sort_oldest')}</option>
                        <option value="star" {if $sort == 'star'}selected{/if}>{:lang('sort_star')}</option>
                    </select>
                </div>
              
                <div class="royal-inner-news-view">
                    <button class="royal-inner-news-view-btn" data-view="grid">
                        <i class="fas fa-th"></i>
                    </button>
                    <button class="royal-inner-news-view-btn royal-active" data-view="list">
                        <i class="fas fa-list"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- 新闻列表容器 -->
        <div class="royal-inner-news-container royal-list-view">
            {if $ArtRes->count() > 0}
            {volist name="ArtRes" id="v"}
            <div class="royal-inner-news-item">
                <a href="{$v.url}" class="royal-inner-news-image">
                    <img src="{$v.thumb}" alt="{$v.title}" onerror="this.src='__INDEX__/images/default-thumb.jpg'">
                </a>
                <div class="royal-inner-news-content"> 
                    <h3 class="royal-inner-news-title">
                        <a href="{$v.url}">{$v.title|cut_str=40}</a>
                    </h3>
                    <p class="royal-inner-news-excerpt">{$v.stitle|cut_str=50}</p>
                    <div class="royal-inner-news-meta">
                        <div class="royal-inner-num">
                            <span class="royal-inner-news-date">
                                <i class="far fa-calendar"></i> {$v.create_time|date='Y-m-d'}
                            </span>
                            <span class="royal-inner-news-views">
                                <i class="far fa-eye"></i> {$v.click}
                            </span>
                        </div>
                       
                        <a href="{$v.url}" class="royal-inner-news-read-more">
                            {:lang('read_more')} <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>
            {/volist}
            {else}
            <div class="royal-no-results">
                <i class="fas fa-newspaper"></i>
                <h3>{:lang('no_news_title')}</h3>
                <p>{:lang('no_news_description')}</p>
            </div>
            {/if}
        </div>

        {if $ArtRes->count() > 0}
        {include file='../view/default/pagination.htm'}
        {/if}
         
    </div>
</section>
  
{/block}

{block name="js"}
<script>
$(function() {
    // 视图切换功能
    $('.royal-inner-news-view-btn').click(function() {
        var viewType = $(this).data('view');
        
        $('.royal-inner-news-view-btn').removeClass('royal-active');
        $(this).addClass('royal-active');
        
        $('.royal-inner-news-container')
            .removeClass('royal-list-view royal-grid-view')
            .addClass('royal-' + viewType + '-view');
            
        // 保存视图偏好到本地存储
        localStorage.setItem('newsViewType', viewType);
    });

    // 恢复视图偏好
    var savedViewType = localStorage.getItem('newsViewType');
    if (savedViewType && savedViewType !== 'list') {
        $('.royal-inner-news-view-btn[data-view="' + savedViewType + '"]').click();
    }

    // 排序功能
    $('#royal-inner-news-sort').change(function() {
        var sort = $(this).val();
        
        var url = new URL(window.location.href);
        url.searchParams.set('sort', sort);
        
        // 添加加载指示
        $('.royal-inner-news-container').addClass('royal-loading');
        
        window.location.href = url.toString();
    });
});
</script>
{/block}