<?php include 'header.php'; ?>
<?php include '_top-header.php'; ?>

<div class="page">

    <div class="container p-0">

        <div class="mt-4 mb-3">
            <h4> Electronics </h4>
        </div>

        <div class="d-block card mb-4">

            <div class="flex-between mb-3">
                <h5 class="ms-0"> Mobiles </h5>
            </div>

            <div class="swiper-slider-wrapper arrows-sides pagination-bottom ">

                <div class="swiper-container swiper-custom"
                    data-per-view="9"
                    data-per-view-md="6"
                    data-per-view-sm="4"
                    data-per-view-xs="2"
                    data-space-between="20"
                    data-next-button="categories-button-next"
                    data-prev-button="categories-button-prev"
                    data-pagination="categories-pagination"
                    data-pagination-type="progressbar">

                    <div class="swiper-wrapper">

                        <?php foreach ($categoriesList as $index => $item) { ?>

                            <div class="swiper-slide">
                                <?php include 'shared-html/category-card.php' ?>
                            </div>

                        <?php } ?>

                    </div>

                </div> <!-- swiper-container -->

                <div class="swiper-button-prev categories-button-prev">
                    <i class="icon icon-arrow-circle-left"></i>
                </div>

                <div class="swiper-button-next categories-button-next">
                    <i class="icon icon-arrow-circle-right"></i>
                </div>

                <div class="pagination-wrapper">
                    <div class="swiper-pagination" id="categories-pagination"></div>
                </div>

            </div> <!-- swiper-slider-wrapper -->

        </div>

        <div class="products-list-layout">

            <div class="start">
                <?php include '_products-filter.php' ?>
            </div><!-- start -->

            <div class="end">

                <div class="row flex-row-stretched">

                    <div class="col-md-3 mb-3 d-none">

                        <div class="product-card-square">

                            <div class="top">

                                <div class="w-100 h-200px border-radius-sm overflow-hidden mb-1">
                                    <div class="shimmer"></div>
                                </div>

                            </div><!-- top -->

                            <div class="bottom">

                                <div class="w-100 h-10px border-radius-sm overflow-hidden mb-2">
                                    <div class="shimmer"></div>
                                </div>

                                <div class="w-100 h-10px border-radius-sm overflow-hidden mb-2">
                                    <div class="shimmer"></div>
                                </div>

                                <div class="flex-between align-items-end">
                                    <div class="d-block w-50">
                                        <div class="w-100 h-10px border-radius-sm overflow-hidden mb-2">
                                            <div class="shimmer"></div>
                                        </div>
                                        <div class="w-100 h-10px border-radius-sm overflow-hidden mb-2">
                                            <div class="shimmer"></div>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-end w-25">

                                        <div class="w-30px h-30px border-radius-sm overflow-hidden mb-2">
                                            <div class="shimmer"></div>
                                        </div>
                                    </div>
                                </div>

                            </div><!-- bottom -->

                        </div><!-- product-card-square -->

                    </div>

                    <?php foreach (range(0, 11) as $index) { ?>

                        <?php $productType = 1 ?>

                        <div class="col-md-3 mb-3">
                            <?php include 'shared-html/product-card-square.php' ?>
                        </div>

                    <?php } ?>

                </div>

            </div> <!-- custom-tabs-wrapper -->

        </div> <!-- products-list-layout -->

    </div>

</div>


<?php include 'footer.php'; ?>