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

<div class="page">
    <div class="container p-0">
        <div class="profile-layout">
            <div class="start">
                <?php include '_profile-layout-side-menu.php' ?>
            </div><!-- start -->

            <div class="end">

                <div class="card">

                    <div class="flex-between mb-3">

                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#"> Help center </a></li>
                            <li class="breadcrumb-item active"> How it works </li>
                        </ol>

                    </div>

                    <div class="content">

                        <div class="custom-tabs-wrapper style4">

                            <div class="nav-tabs-wrapper">

                                <ul class="nav nav-tabs justify-content-start">

                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="user-tab" data-toggle="tab" data-target="#user"> user </button>
                                    </li>

                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="post-owner-tab" data-toggle="tab" data-target="#post-owner"> Post owner </button>
                                    </li>

                                </ul>

                            </div>

                            <div class="tab-content" id="myTabContent">

                                <div class="tab-pane fade show active" id="user">

                                    <div class="py-4">

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

                                            <div class="swiper-container swiper-custom"
                                                data-per-view="1"
                                                data-per-view-md="1"
                                                data-per-view-sm="1"
                                                data-per-view-xs="1"
                                                data-space-between="20"
                                                data-next-button="user-button-next"
                                                data-prev-button="user-button-prev"
                                                data-pagination="user-pagination"
                                                data-pagination-type="progressbar">

                                                <div class="swiper-wrapper">

                                                    <?php foreach (range(0, 7) as $i) { ?>

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

                                                    <?php } ?>

                                                </div>

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

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

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

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

                                    </div>

                                </div>

                                <div class="tab-pane fade" id="post-owner">

                                    111

                                </div>

                            </div>

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



                    </div>





                </div>
            </div> <!-- end -->
        </div> <!-- profile-layout -->
    </div> <!-- container -->
</div> <!-- page -->

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