<div class="margin-content events-hub-page">
  <!-- Loading State -->
  @if (loading) {
    <div class="loading-container">
      <div class="spinner"></div>
      <p class="loading-text">Loading events...</p>
    </div>
  }

  <!-- Empty State -->
  @if (!loading && events.length === 0) {
    <div class="empty-state">
      <div class="empty-state-icon">📅</div>
      <h3>No Active Events</h3>
      <p>There are no active events at the moment. Check back soon!</p>
    </div>
  }

  <!-- Events Grid -->
  @if (!loading && events.length > 0) {
    <div class="events-section">
      <h2 class="section-title">Upcoming Events</h2>
      <div class="events-grid">
        @for (event of events; track event.id) {
          <article class="event-card" [attr.data-event-id]="event.id" [routerLink]="['/events-hub', event.id]">
            <!-- Thumbnail -->
            <div class="card-media">
              <img
                [src]="event.thumbnailFilename
                  ? '/lazy-static/event-thumbnails/' + event.thumbnailFilename
                  : 'assets/images/favicon.png'"
                [alt]="event.title"
                class="event-thumbnail"
                loading="lazy"
              />
              <div class="card-overlay">
                <span class="state-badge" [class.state-active]="event.state === 'active'">
                  {{ event.state | uppercase }}
                </span>
              </div>
            </div>

            <!-- Card Content -->
            <div class="card-content">
              <h3 class="event-title">{{ event.title }}</h3>

              @if (event.description) {
                <p class="event-description">
                  {{ event.description | slice: 0: 100 }}{{ event.description.length > 100 ? '...' : '' }}
                </p>
              }

              <div class="event-meta">
                <div class="meta-item">
                  <span class="meta-label">📍 Starts:</span>
                  <time [dateTime]="event.startTime">
                    {{ event.startTime | date: 'medium' }}
                  </time>
                </div>

                @if (event.endTime) {
                  <div class="meta-item">
                    <span class="meta-label">📍 Ends:</span>
                    <time [dateTime]="event.endTime">
                      {{ event.endTime | date: 'medium' }}
                    </time>
                  </div>
                }
              </div>
            </div>

            <!-- Card Footer -->
            <div class="card-footer">
              <a [routerLink]="[ '/events-hub', event.id ]" class="view-button">View Details →</a>
            </div>
          </article>
        }
      </div>
    </div>
  }
</div>
