<?php require_once("../resources/config.php"); 
$naziv = "Kategorije";
?>
<!DOCTYPE html>
<html lang="sr">

<?php include(TEMPLATE_FRONT . DS . "head.php"); ?>
    
<body>
    
<span class="loader"></span>
<header>
    <?php include(TEMPLATE_FRONT . DS . "header.php");?>   
</header>
<section class="banner pb-0" style="background-color: #f7f7f7 ;">
  <div class="container">
    <ol class="breadcrumb">
      <li class="breadcrumb-item">
        <a href="index.php">Početna</a>
      </li>
        <li class="breadcrumb-item">
        <a href="#"><?php get_cat_name(); ?></a>
      </li>
    </ol>
    <h2><?php get_cat_name(); ?></h2>
  </div>
</section>
<section class="section-occasion gap no-top" style="background-color: #f7f7f7 ;">
  <div class="container">
    <div class="row">

      <div class="col-lg-8">
        <div class="products">
          <h6>Ukupno: <?php number_products(); ?> proizvoda</h6>
          <div class="sort-by d-flex align-items-center">
<!--
            <span>Sort By</span><select class="nice-select Advice">
                <option>Recently Added</option>
                <option>Select Topic 1</option>
                <option>Select Topic 2</option>
                <option>Select Topic 3</option>
                <option>Select Topic 4</option>
            </select>
-->
            <div class="nav nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
              <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">
                <i>
                  <svg height="112pt" viewBox="0 -38 512 512" width="112pt" xmlns="http://www.w3.org/2000/svg"><path d="m180 0h-160c-11.046875 0-20 8.953125-20 20v160c0 11.046875 8.953125 20 20 20h160c11.046875 0 20-8.953125 20-20v-160c0-11.046875-8.953125-20-20-20zm-20 160h-120v-120h120zm76-98c0-11.046875 8.953125-20 20-20h236c11.046875 0 20 8.953125 20 20s-8.953125 20-20 20h-236c-11.046875 0-20-8.953125-20-20zm276 76c0 11.046875-8.953125 20-20 20h-236c-11.046875 0-20-8.953125-20-20s8.953125-20 20-20h236c11.046875 0 20 8.953125 20 20zm-332 98h-160c-11.046875 0-20 8.953125-20 20v160c0 11.046875 8.953125 20 20 20h160c11.046875 0 20-8.953125 20-20v-160c0-11.046875-8.953125-20-20-20zm-20 160h-120v-120h120zm352-98c0 11.046875-8.953125 20-20 20h-236c-11.046875 0-20-8.953125-20-20s8.953125-20 20-20h236c11.046875 0 20 8.953125 20 20zm0 76c0 11.046875-8.953125 20-20 20h-236c-11.046875 0-20-8.953125-20-20s8.953125-20 20-20h236c11.046875 0 20 8.953125 20 20zm0 0"/></svg>
                </i>
              </button>
              <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">
                <i>
                  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                   viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
                    <path d="M0,0v237.268h237.268V0H0z M199.805,199.805H37.463V37.463h162.341V199.805z"/>
                    <path d="M274.732,0v237.268H512V0H274.732z M474.537,199.805H312.195V37.463h162.341V199.805z"/>
                    <path d="M0,274.732V512h237.268V274.732H0z M199.805,474.537H37.463V312.195h162.341V474.537z"/>
                    <path d="M274.732,274.732V512H512V274.732H274.732z M474.537,474.537H312.195V312.195h162.341V474.537z"/>
                </svg>
                </i>
              </button>
          </div>
          </div>
        </div>
        <div class="tab-content" id="v-pills-tabContent">
          <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
            <?php get_products_in_cat_page(); ?>

              <div class="pagination-gap">
                <ul id="border-pagination">
                  <li class="ps-0"><a href="javascript:void(0)"><i class="fa-solid fa-angle-left"></i></a></li>
                  <li><a href="javascript:void(0)" class="active">01</a></li>
                  <li><a href="javascript:void(0)">02</a></li>
                  <li>....</li>
                  <li><a href="javascript:void(0)">08</a></li>
                  <li><a href="javascript:void(0)"><i class="fa-solid fa-angle-right"></i></a></li>
                </ul>
              </div>
              
          </div>
          <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
            
            <div class="row list">
            <?php get_products_in_cat_page2(); ?>
              
        
              <div class="pagination-gap">
                <ul id="border-pagination">
                  <li class="ps-0"><a href="javascript:void(0)"><i class="fa-solid fa-angle-left"></i></a></li>
                  <li><a href="javascript:void(0)" class="active">01</a></li>
                  <li><a href="javascript:void(0)">02</a></li>
                  <li>....</li>
                  <li><a href="javascript:void(0)">08</a></li>
                  <li><a href="javascript:void(0)"><i class="fa-solid fa-angle-right"></i></a></li>
                </ul>
              </div>
                
            </div>
          </div>
        </div>
      </div>
    
        <div class="col-lg-4">
        <div class="accordion">
        <?php get_categories2(); ?>    

        
        </div>
      </div>
        
    </div>
  </div>
</section>
<footer class="gap">
    <?php include(TEMPLATE_FRONT . DS . "footer.php");?>  
</footer>
<!-- progress -->
<div id="progress">
      <span id="progress-value"><i class="fa-solid fa-arrow-up"></i></span>
</div>
<!-- jQuery -->
<script src="assets/js/jquery-3.6.0.min.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>

<script src="assets/js/jquery.nice-select.min.js"></script>
<!-- fancybox -->
<script src="assets/js/jquery.fancybox.min.js"></script>
<script src="assets/js/script.js"></script>
<script src="assets/js/custom.js"></script>
</body>
</html>