<?php
/**
 *  For Displaying Archieve Courses
 *
 *
 * @package Felicityhealth
 * @since Felicityhealth 1.0
 */
?>
<?php get_header(); ?>
 

<?php
$categories = get_categories( array(
    'orderby' => 'name',
    'order'   => 'ASC'
) );
?>

<!-- Page content -->
<section class="container">
<!-- Breadcrumb -->
<nav class="pt-4 mt-lg-3" aria-label="breadcrumb">
  <ol class="breadcrumb mb-0">
    <li class="breadcrumb-item">
      <a href="<?php echo site_url() ?>"><i class="bx bx-home-alt fs-lg me-1"></i>Home</a>
    </li>
    <li class="breadcrumb-item active" aria-current="page"> <?= the_archive_title() ?></li>
  </ol>
</nav>

<!-- Page title + Filters -->
<div class="d-lg-flex align-items-center justify-content-between py-4 mt-lg-2">
  <h1 class="me-3"> <?= the_archive_title() ?></h1>
  <div class="d-md-flex mb-3">
    <select class="form-select me-md-4 mb-2 mb-md-0" style="min-width: 240px;">
    <option value="All"><?php echo __( 'All categories', 'felicityhealth' );?></option>
    <?php foreach( $categories as $category ) { ?>
        <option value="<?= get_category_link( $category->term_id ) ?>"><?= esc_html( $category->name) ?></option>
    <?php }  ?>
    </select>
    <div class="position-relative" style="min-width: 300px;">
      <input type="text" class="form-control pe-5" placeholder="Search courses">
      <i class="bx bx-search text-nav fs-lg position-absolute top-50 end-0 translate-middle-y me-3"></i>
    </div>
  </div>
</div>

<!-- Courses grid -->
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 gx-3 gx-md-4 mt-n2 mt-sm-0">
    <?php  if ( have_posts() ) : ?>
        <?php while ( have_posts() )  : the_post(); ?>
            <?php get_template_part( 'template-parts/content-course' );?>
        <?php endwhile; ?>
    <?php endif; ?> 
</div>

<!-- Pagination: Basic example -->
<!-- <nav class="pb-5" aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item">
      <a href="#" class="page-link">
        <i class="bx bx-chevron-left ms-n1 me-1"></i>
        Prev
      </a>
    </li>
    <li class="page-item disabled d-sm-none">
      <span class="page-link text-body">1 / 4</span>
    </li>
    <li class="page-item active d-none d-sm-block" aria-current="page">
      <span class="page-link">
        1
        <span class="visually-hidden">(current)</span>
      </span>
    </li>
    <li class="page-item d-none d-sm-block">
      <a href="#" class="page-link">2</a>
    </li>
    <li class="page-item d-none d-sm-block">
      <a href="#" class="page-link">3</a>
    </li>
    <li class="page-item d-none d-sm-block">
      <a href="#" class="page-link">4</a>
    </li>
    <li class="page-item">
      <a href="#" class="page-link">
        Next
        <i class="bx bx-chevron-right me-n1 ms-1"></i>
      </a>
    </li>
  </ul>
</nav> -->


<!-- Sign up CTA -->
<div class="bg-secondary rounded-3 my-2 my-md-4 my-lg-5 py-5 px-3 px-md-0">
  <div class="row align-items-center">
    <div class="col-md-5 offset-lg-1 text-center text-md-start ps-md-5 ps-lg-0 ps-xl-5 pb-2 pb-md-0 mb-4 mb-md-0">
      <p class="lead mb-3">Ready to get started?</p>
      <h2 class="h1 pb-2 pb-md-4">Take Your <span class="text-primary">Skills</span> to the Next Level</h2>
      <a href="#" class="btn btn-primary btn-lg">Sign up now!</a>
    </div>
    <div class="col-lg-6 col-md-7">
      <div class="d-table mx-auto">
        <img src="assets/img/landing/online-courses/steps/04-dark.svg" class="d-dark-mode-none" width="380" alt="Illustration">
        <img src="assets/img/landing/online-courses/steps/04-light.svg" class="d-none d-dark-mode-block" width="380" alt="Illustration">
      </div>
    </div>
  </div>
</div>
</section>
<?php get_footer(); ?>
 