<!DOCTYPE html>
<html lang="{{site.dist.country_lang }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
<meta property="og:locale" content="{{site.dist.country_lang | replace: '-', '_' }}" />
<meta name="description" content="{{ category.seo_description | strip_html| strip_newlines  }}">
<meta name="keywords" content="{{category.seo_keywords}}">
<title>{{category.seo_title}}</title>
<meta name="author" content="Mietubl">
{% include '_header_css.liquid' %}
</head>
<body>

<!-- MAIN WRAPPER -->
<div class="body-wrap shop-default shop-cards shop-tech">
    <div id="st-container" class="st-container">



        <div class="st-pusher">
            <div class="st-content">
                <div class="st-content-inner">
                    <!-- HEADER -->
                    {% include '_header.liquid' %}
                    <!-- END: HEADER -->
                    <!-- BREADCRUMB -->
                    <section class="slice sct-color-1">
                        <div class="container">
                            <div class="page-title">
                                <div class="row align-items-center">
                                    <div class="d-flex justify-content-end col-lg-12 col-12">
                                        {% for  breadcrumb in breadcrumbs %}
                                            <h2 class="heading heading-6 text-capitalize strong-500 mb-0">
                                                <a href="{{ breadcrumb.url }}" class="link text-underline--none">
                                                    &nbsp;
                                                    {% if forloop.index == 1 %}
                                                        <!-- 第一个 breadcrumb 使用 ion-ios-home 图标 -->
                                                        <i class="ion-ios-home"></i>
                                                    {% else %}
                                                        <!-- 其它 breadcrumb 使用 ion-ios-arrow-forward 图标 -->
                                                        <i class="ion-ios-arrow-forward"></i>
                                                    {% endif %}
                                                    {{ breadcrumb.name }}
                                                </a>
                                            </h2>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <!-- END: BREADCRUMB -->
                    <section class="slice sct-color-2">
                        <div class="container">
                            <h4 class="heading heading-xs text-uppercase strong-600 mb-0 text-center">
                                Trending
                            </h4>
                            <div class="section-title section-title--style-1 text-center mt-1">
                                <h3 class="section-title-inner heading-3 strong-600 line-height-1_6">
                                    <span>{{category.name}}</span>
                                </h3>
                                <span class="section-title-delimiter clearfix d-none"></span>
                            </div>

                            <div class="row-wrapper">
                                <div class="row cols-xs-space cols-sm-space cols-md-space">
                                    {% for item in products %}

                                    <div class="col-lg-3 col-md-6 col-wrapper--spaced-y">
                                        <div class="card card-product z-depth-1-top z-depth-2--hover">
                                            <div class="card-body">
                                                <h2 class="heading heading-6 strong-600 mt-2 mb-3 title-over-flow">
                                                    <a  href="/products/{{ item.id }}" target="_blank" title="{{ item.title | strip_html }}">
                                                        {{ item.title | strip_html }}
                                                    </a>
                                                </h2>

                                                <div class="card-image swiper-js-container">
                                                    <div class="">
                                                        <div class="swiper-container" data-swiper-items="1" data-swiper-space-between="0">
                                                            <div class="swiper-wrapper">
                                                                <div class="swiper-slide">
                                                                    <a  href="/products/{{ item.id }}" target="_blank" >
                                                                        {% if item.images and item.images[0].image_url %}
                                                                            {% assign image_url = item.images[0].image_url %}
                                                                            <img src="{% if image_url contains 'http' %}{{ image_url }}{% else %}{{ site.image_base_url }}{{ image_url | append: '?x-oss-process=image/resize,m_pad,w_200,h_200' }}{% endif %}"
                                                                                 class="img-fluid img-center img-primary default-image-thumbnail-small">
                                                                        {% else %}
                                                                            <div class="img-fluid img-center img-primary default-image-thumbnail-small no-image-placeholder-thumbnail-small">
                                                                                <span>No Image</span>
                                                                            </div>
                                                                        {% endif %}
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="mt-3">

                                                    <p class="product-description mt-3 mb-0 title-over-flow" >
                                                        {{ item.content | strip_html| strip_newlines | default: "No description " }}
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="card-footer">
                                                <div class="product-buttons">
                                                    <div class="row align-items-center">
                                                        <div class="col-2"></div>
                                                        <div class="col-8">
                                                            <a  href="/products/{{ item.id }}" target="_blank" >
                                                            <button type="button" class="btn btn-block btn-base-1 btn-circle btn-icon-left">
                                                                View Details
                                                            </button>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    {% endfor %}
                                </div>

                            </div>

                            <div class="pt-5">
                                <nav aria-label="Product pagination">
                                    <ul class="pagination pagination--style-2 justify-content-center">
                                        <!-- Previous Page Link -->
                                        {% if paginator.previous_page %}
                                            <li class="page-item">
                                                <a class="page-link" href="{{ paginator.previous_page_url }}" tabindex="-1">Previous</a>
                                            </li>
                                        {% else %}
                                            <li class="page-item disabled">
                                                <a class="page-link" href="#" tabindex="-1">Previous</a>
                                            </li>
                                        {% endif %}

                                        <!-- Pagination Links -->
                                        {% for page in paginator.pages %}
                                            {% if page == paginator.current_page %}
                                                <li class="page-item active">
                                                    <span class="page-link">{{ page }}</span>
                                                </li>
                                            {% else %}
                                                <li class="page-item">
                                                    <a class="page-link" href="{{ paginator.page_url[page] }}">{{ page }}</a>
                                                </li>
                                            {% endif %}
                                        {% endfor %}

                                        <!-- Next Page Link -->
                                        {% if paginator.next_page %}
                                            <li class="page-item">
                                                <a class="page-link" href="{{ paginator.next_page_url }}">Next</a>
                                            </li>
                                        {% else %}
                                            <li class="page-item disabled">
                                                <a class="page-link" href="#">Next</a>
                                            </li>
                                        {% endif %}
                                    </ul>
                                </nav>
                            </div>

                        </div>
                    </section>






                    <!-- FOOTER -->
                    {% include '_footer.liquid' %}
                </div>
            </div>
        </div><!-- END: st-pusher -->
    </div><!-- END: st-container -->
</div><!-- END: body-wrap -->
<a href="#" class="back-to-top btn-back-to-top"></a>
{% include '_footer_js.liquid' %}
</body>
</html>
