<body class="videoListingBody">
<main>
    <div class="container-fluid">
        <?php include(VIEWPATH . "includes/top-bar.php"); ?>
        <?php
        if(!empty($videos)){
            ?>
            <div class="videoListing-firstContainer" style="min-height: 800px;">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-2 sidebar-wrapper">
                        </div>
                        <div class="col-md-8">
                            <div class="row">
                                <div class="col-md-12">
                                    <h6 class="videoListing-titleText">We found these videos for you</h6>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 videoListing-navbar">
                                    <div class="inside">
                                        <ul class="nav navbar-nav">
                                            <?php
                                            foreach ($categories as $category) {
                                                ?>
                                                <li class="videoListing-navbarTags">
                                                    <a href="#">
                                                        <div>
                                                            <?php echo $category['title']; ?>
                                                            <span class="noti"><?php echo $category['category_count']; ?></span>
                                                        </div>
                                                    </a>
                                                </li>
                                                <?php
                                            }
                                            ?>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="row videoTemplate-videosRows videoListing-videoTemplateRows">
                                <?php
                                foreach ($videos as $video) {
                                    ?>
                                    <div class="col-md-4 videoTemplate-videosWrapper videoListing-videoTemplateWrapper">
                                        <a href="<?php echo base_url(); ?>video-playing/<?php echo $video['id']; ?>">
                                            <div class="videoTemplate-videos" style="--background-image: url(https://img.youtube.com/vi/<?php echo $video['youtube_id']; ?>/mqdefault.jpg);">
                                                <img src="https://img.youtube.com/vi/<?php echo $video['youtube_id']; ?>/mqdefault.jpg" />
                                                <div class="videoTemplate-videosTags">
                                                    <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
                                                    <!-- <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> -->
                                                    WATCHED
                                                </div>
                                                <img class="videoTemplate-videosPlay" src="img/play.png" width="38" height="37">
                                                <div class="videoTemplate-videosDescription"><?php echo $video['title']; ?></div>
                                                <div class="videoTemplate-videosTime">0</div>
                                            </div>
                                        </a>
                                    </div>
                                    <?php
                                }
                                ?>

                            </div>
                            <!-- <div class="row videoTemplate-videosRows">
                        </div> -->
                        </div>
                    </div>
                </div>
            </div>
            <?php
        }else{
            ?>
            <div class="videoListing-firstContainer">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-2 sidebar-wrapper">
                        </div>
                        <div class="col-md-8">
                            <div class="row">
                                <p class="videoListing-noResultsFoundCursive">
                                    Oh no!
                                </p>
                                <p class="videoListing-noResultsFoundText">
                                    No results found
                                    <span class="videoListing-noResultsFoundCategoriesSelected">
                                    <?php
//                                    echo implode(",",array_map(function($item){
//                                        return $item['title'];
//                                    },$categories));
                                    ?>
                                </span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <?php
        }
        ?>

    </div>
    </div>
</main>
</body>