<?php
defined('ABSPATH') || exit;

get_header('shop');
do_action('woocommerce_before_main_content');

$shop_layout = get_theme_mod('shop_page_layout', 'rtl');
?>

<div class="shop-area space-extra-bottom">
    <div class="container">
        <div class="row gx-40 ml-5">

            <?php if (is_active_sidebar('sidebar-1') && $shop_layout === 'ltl') : ?>
                <div class="col-md-4 col-xl-4 col-lg-4 mt-3">
                    <?php dynamic_sidebar('sidebar-1'); ?>
                </div>
            <?php endif; ?>

            <?php if ($shop_layout === 'no-sidebar') : ?>
                <div class="col-12">
                <?php else : ?>
                    <div class="col-xxl-8 col-lg-7">
                    <?php endif; ?>
                        <div class="row">
                            <!-- SORT + GRID/LIST BUTTON -->
                            <div class="shop-sort-bar">
                                <div class="row justify-content-between align-items-center">
                                    <div class="col-md">
                                        <?php do_action('woocommerce_before_shop_loop'); ?>
                                    </div>
                                    <div class="col-md-auto">
                                        <div class="nav shop-navbar">
                                            <a href="#" class="active" data-bs-toggle="tab" data-bs-target="#tab-grid">
                                                <i class="fas fa-th"></i>
                                            </a>
                                            <a href="#" data-bs-toggle="tab" data-bs-target="#tab-list">
                                                <i class="fas fa-list"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-content mb-20">

                                <!-- ================= GRID ================= -->
                                <div class="tab-pane fade show active" id="tab-grid">
                                    <?php
                                    if (woocommerce_product_loop()) {

                                        woocommerce_product_loop_start();

                                        while (have_posts()) {
                                            the_post();
                                            do_action('woocommerce_shop_loop');
                                            wc_get_template_part('content', 'product');
                                        }

                                        woocommerce_product_loop_end();
                                    }
                                    ?>
                                </div>

                                <!-- ================= LIST ================= -->
                                <div class="tab-pane fade" id="tab-list">
                                    <?php
                                    rewind_posts();

                                    if (woocommerce_product_loop()) {

                                        woocommerce_product_loop_start();

                                        while (have_posts()) {
                                            the_post();
                                            do_action('woocommerce_shop_loop');
                                            wc_get_template_part('content', 'product-list');
                                        }

                                        woocommerce_product_loop_end();
                                    }
                                    ?>
                                </div>

                            </div>

                            <?php do_action('woocommerce_after_shop_loop'); ?>

                        </div>
                    </div>

                    <?php if (is_active_sidebar('sidebar-1') && $shop_layout === 'rtl') : ?>
                        <div class="col-md-4 col-xl-4 col-lg-4 mt-3">
                            <?php dynamic_sidebar('sidebar-1'); ?>
                        </div>
                    <?php endif; ?>

                </div>
        </div>
    </div>

    <?php
    do_action('woocommerce_after_main_content');
    get_footer('shop');
