<main class="main">
    <section class="section-box">
      <div class="banner-hero banner-head-image" style="background: url(<?= base_url() . 'uploads/category/' . $landing['category_landingpage_image']; ?>);">
        <div class="container"> 
          <div class="text-center">
            <h1 class="text-heading-1 color-white mt-30"><?= $landing['category_landingpage_link']; ?></h1>
          </div>
        </div>
      </div>
    </section>

    <?php if(!$category_alias) : ?>
      <div class="section-box overflow-visible mt-70">
        <div class="container">
          <div class="row justify-content-md-center">
            <?php foreach($partners as $partner) : ?>
                <div class="col-lg-2 col-md-3 col-sm-4 col-6 text-center"><a class="item-logo box-hover-shadow hover-up" href="<?= $partner['banner_link']; ?>" target="_blank"><img alt="Banner" src="<?= base_url() . 'uploads/brand/' . $partner['logo']; ?>"></a></div>
            <?php endforeach; ?>  
          </div>
        </div>
      </div>
    <?php endif; ?>

    <div class="section-box mt-70"></div>
    <div class="container">
      <div class="row dr-rtl">
        <div class="col-xl-9 col-lg-8 col-md-12 col-sm-12 col-12 dr-ltr">
          <div class="filters-products d-flex">
            <div class="number-info"><strong class="text-body-lead color-gray-500">There are total <?= $count_event; ?> <?= $category_title; ?></strong></div>
            <!-- <div class="fitler-info">
              <div class="icon-sort text-body-text color-gray-500">Sort by: 
                <div class="color-green-900 d-inline">
                  <div class="dropdown dropdown-sort">
                    <button class="btn dropdown-toggle" id="dropdownSort" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static"><span>Latest</span><i class="fi-rr-angle-small-down"></i></button>
                    <ul class="dropdown-menu dropdown-menu-light" aria-labelledby="dropdownSort">
                      <li><a class="dropdown-item" href="#">Latest</a></li>
                      <li><a class="dropdown-item" href="#">Oldest</a></li>
                      <li><a class="dropdown-item" href="#">A - Z</a></li>
                      <li><a class="dropdown-item" href="#">Z - A</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div> -->
          </div>
          <div class="row mt-40">
            <?php foreach($events as $event) : ?>
              <div class="col-lg-6 col-md-6 col-sm-6">
                <div class="card-grid-style-4">
                  <div class="grid-4-img"><a href="<?= base_url() . 'communities/' . strtolower($event->alias); ?>"><img src="<?= base_url() . 'uploads/product/' . $event->image1; ?>" alt="<?= $event->title ?>"></a></div>
                  <a class="text-heading-4" href="<?= base_url() . 'communities/' . strtolower($event->alias); ?>" data-toggle="tooltip" data-placement="top" title="<?= $event->title ?>"><?= $event->title ?></a>
                  <div class="time-display">
                    <div class="time-display-2cols">
                      <div>
                        <div><i class="fa fa-calendar"></i> <?= date('d M Y', strtotime($event->date)); ?></div>
                        <a class="popup-youtube" href="<?= $event->map_embed; ?>" style="color: #101828">
                          <i class="fa fa-map-marker"></i> <?= $event->location; ?>
                        </a>
                      </div>  
                      <div><i class="fa fa-clock-o"></i> <?= $event->time; ?></div>
                    </div>  
                  </div>
                </div>
              </div>
            <?php endforeach; ?>
          </div>
          <!-- <div class="paginations">
            <ul class="pager">
              <li><a class="prev-page" href="#"></a></li>
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a class="page-dotted" href="#"></a></li>
              <li><a class="next-page" href="#"></a></li>
            </ul>
          </div> -->
        </div>
        <div class="col-xl-3 col-lg-4 col-md-12 col-sm-12 col-12 dr-ltr">
          <div class="sidebar">
            <div class="widget-title">
              <h3 class="text-heading-5 color-gray-900">Event Type</h3>
            </div>
            <div class="widget-content">
              <ul class="list-type">
                <li><a href="<?= base_url() . 'communities'; ?>" class="eventLink">All Events</a></li>
                <?php foreach($categories as $category) : ?>
                  <li><a href="<?= base_url() . 'communities/category/' . $category['alias']; ?>" class="eventLink eventActive"><?= ucwords($category['category']); ?></a></li>
                <?php endforeach; ?>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

<script>
  $('#checkbox').on('change', function() {
    location.reload();
  });
</script>