<section class="page-hero page-hero-sm">
  <div class="container">
    <h1>Chamber Events</h1>
    <p>Networking events, workshops, webinars, and conferences to help your business grow.</p>
  </div>
</section>

<section class="section">
  <div class="container">
    <!-- Filters -->
    <form class="filter-bar" method="GET">
      <select name="type" class="filter-select" onchange="this.form.submit()">
        <option value="">All Types</option>
        <option value="in-person" <%= type === 'in-person' ? 'selected' : '' %>>In-Person</option>
        <option value="virtual" <%= type === 'virtual' ? 'selected' : '' %>>Virtual</option>
        <option value="hybrid" <%= type === 'hybrid' ? 'selected' : '' %>>Hybrid</option>
        <option value="webinar" <%= type === 'webinar' ? 'selected' : '' %>>Webinar</option>
        <option value="networking" <%= type === 'networking' ? 'selected' : '' %>>Networking</option>
      </select>
    </form>

    <% if (events && events.length) { %>
    <div class="events-list">
      <% events.forEach(e => { %>
      <div class="event-list-item">
        <div class="eli-date">
          <span class="eli-month"><%= new Date(e.start_date).toLocaleDateString('en-US',{month:'short'}) %></span>
          <span class="eli-day"><%= new Date(e.start_date).getDate() %></span>
        </div>
        <div class="eli-body">
          <div class="eli-meta">
            <span class="event-type-badge"><%= e.event_type %></span>
            <% if (e.is_free) { %><span class="event-free-badge">Free</span>
            <% } else { %><span class="event-paid-badge">$<%= parseFloat(e.ticket_price).toFixed(2) %></span><% } %>
          </div>
          <h3><a href="/events"><%= e.title %></a></h3>
          <% if (e.short_description) { %><p><%= e.short_description %></p><% } %>
          <div class="eli-details">
            <span><i class="bi bi-clock"></i> <%= new Date(e.start_date).toLocaleTimeString('en-US',{hour:'numeric',minute:'2-digit'}) %></span>
            <% if (e.location) { %><span><i class="bi bi-geo-alt-fill"></i> <%= e.location %></span><% } %>
            <% if (e.org_name) { %><span><i class="bi bi-building"></i> <%= e.org_name %></span><% } %>
          </div>
        </div>
        <div class="eli-action">
          <% if (currentUser) { %>
          <a href="/member/events/<%= e.id %>" class="btn btn-primary btn-sm">Register</a>
          <% } else { %>
          <a href="/register" class="btn btn-primary btn-sm">Join to Register</a>
          <% } %>
        </div>
      </div>
      <% }) %>
    </div>
    <% } else { %>
    <div class="empty-state">
      <i class="bi bi-calendar-x"></i>
      <h3>No upcoming events</h3>
      <p>Check back soon for new events, or <a href="/register">join the chamber</a> to create your own.</p>
    </div>
    <% } %>
  </div>
</section>
