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

{block name="main"}
{include file='../view/default/innerbanner.htm'}

<!-- Products List Content -->
<section class="royal-category-content">
    <div class="royal-container">
        {include file='../view/default/left.htm'}

        <!-- Products Filter Section with Animation -->
        <div class="royal-products-filter" data-aos="fade-down" data-aos-duration="600">
            <div class="royal-products-count" data-aos="fade-right" data-aos-delay="200">
                {if $ArtRes->count() > 0}
                {:lang('products_display_count', [$ArtRes->count(), $ArtRes->total()])}
                {else}
                {:lang('products_total_count', [0])}
                {/if}
            </div>
            <div class="royal-filter-controls" data-aos="fade-left" data-aos-delay="300">
                <div class="royal-sort-options" data-aos="zoom-in" data-aos-delay="400">
                    <select id="royal-sort-select">
                        <option value="default" {if $sort=='default'}selected{/if}>{:lang('sort_default')}</option>
                        <option value="popularity" {if $sort=='popularity'}selected{/if}>{:lang('sort_popularity')}</option>
                        <option value="price-low" {if $sort=='price-low'}selected{/if}>{:lang('sort_price_low')}</option>
                        <option value="price-high" {if $sort=='price-high'}selected{/if}>{:lang('sort_price_high')}</option>
                        <option value="newest" {if $sort=='newest'}selected{/if}>{:lang('sort_newest')}</option>
                        <option value="star" {if $sort=='star'}selected{/if}>{:lang('sort_star')}</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Products Grid with Staggered Animations -->
        <div class="royal-products-grid"> 
            {volist name="ArtRes" id="v"}
            <!-- Product Card with Flip Animation -->
            <div class="royal-product-card" 
                 data-aos="flip-up" 
                 data-aos-delay="{$i*80}" 
                 data-aos-duration="500">
                
                <!-- Product Image with Zoom Animation -->
                <a href="{$v.url}" class="royal-product-image" data-aos="zoom-in" data-aos-delay="{$i*80+200}">
                    <img src="{$v.thumb}" alt="{$v.title}" onerror="this.src='__INDEX__/images/default-thumb.jpg'">
                </a>
                
                <!-- Product Tag with Bounce Animation -->
                {if in_array($v.type, [1,2,3])}
                    <div class="royal-tag royal-tag-type{$v.type}">
                        {switch name="$v.type"}
                            {case value="1"}{:lang('product_tag_hot')}{/case}
                            {case value="2"}{:lang('product_tag_recommended')}{/case}
                            {case value="3"}{:lang('product_tag_popular')}{/case}
                        {/switch}
                    </div>
                {/if}
                
                <!-- Product Content with Fade Up Animations -->
                <div class="royal-product-card-content">
                    <h3 data-aos="fade-up" data-aos-delay="{$i*80+400}">
                        <a href="{$v.url}">{$v.title|cut_str=24}</a>
                    </h3>
                    <p data-aos="fade-up" data-aos-delay="{$i*80+500}">{$v.stitle|cut_str=28}</p>
                    <div class="royal-product-price" data-aos="fade-up" data-aos-delay="{$i*80+600}">¥{$v.price}</div>
                    <div class="royal-product-meta" data-aos="fade-up" data-aos-delay="{$i*80+700}">
                        <span><i class="fas fa-chart-line"></i> {$v.click}</span>
                        <span><i class="fas fa-star"></i> {$v.star}</span>
                    </div>
                </div>
            </div>
            {/volist}  
        </div>

        <!-- Pagination with Fade Up Animation -->
        {if $ArtRes->count() > 0}
        <div data-aos="fade-up" data-aos-delay="300">
            {include file='../view/default/pagination.htm'}
        </div>
        {/if}

    </div>
</section>

{/block}

{block name="js"}
<script>
$(function() {
    // Sorting functionality
    $('#royal-sort-select').change(function() {
        var sort = $(this).val();
        
        var url = new URL(window.location.href);
        url.searchParams.set('sort', sort);
        
        // Add loading indicator
        $('.royal-products-grid').addClass('royal-loading');
        
        window.location.href = url.toString();
    });
});
</script>
{/block}