<?php 

/**
 * Template Name: event page
 
 */
get_header(); ?>
    <section class="section-top">
        <div class="container">
          <div class="col-lg-10 offset-lg-1 text-center">
            <div class="section-top-title">
              <h1>Events</h1>
              <ul>
                <li><a href="/">Home</a></li>
                <li class="ms-1"> / events</li>
              </ul>
            </div>
          </div>
        </div>

      </section>
 <section class="event-section">
  <div class="container">
    <!-- Section Title -->
     <div class="section-title text-center">
        <h2>Latest Events</h2>
        <p>We offer a brand new approach to the most basic learning paradigms. Choose from a wide range of learning options and gain new skills! Our school is known.</p>
      </div>

    <div class="row">

         <?php
            $args = [
                'post_type'      => 'event',      
                'posts_per_page' => -1,           
                'post_status'    => 'publish',    
				      
            ];

            $events = new WP_Query($args);

            if ($events->have_posts()) :
                while ($events->have_posts()) : $events->the_post();
                    $event_date1   = get_the_date('j');
                    $event_date2   = get_the_date('M');
                    $event_image   = get_the_post_thumbnail_url(get_the_ID(), 'full');
                    $event_time    = get_field('event_time');
                    $event_location = get_field('event_location');
                    $event_title   = get_the_title();
            ?>
      <div class="col-md-4 event123 gallery-item">
        <a href="<?php the_permalink(); ?>">
          <div class="card event-card event-list1">
            <img src="<?= esc_url($event_image); ?>" alt="">
             <div class="event-date-badge">
            <span class="month"><?= esc_attr($event_date1); ?></span>
            <span class="day"><?= esc_attr($event_date2); ?></span>
          </div>
            <div class="card-img-overlay1">
              <div class="event-meta">
                <!-- <span><i class="bi bi-calendar-event"></i> 2025-12-23</span> -->
                <span><i class="bi bi-clock"></i><?= esc_attr($event_time); ?></span>
                <span><i class="bi bi-geo-alt"></i><?= esc_attr($event_location); ?></span>
              </div>

              <h2 class="event-title">
              <?= esc_html(mb_substr($event_title, 0, 30)) . (mb_strlen($event_title) > 30 ? '...' : ''); ?>
              </h2>
            </div>
          </div>
        </a>
      </div> 
  <?php endwhile; wp_reset_postdata(); endif; ?>

    
  </div>
    </div>
</section>

     <nav class="mt-4">
  <ul class="pagination justify-content-center" id="pagination"></ul>
</nav>
<?php get_footer(); ?>