<div class="margin-content event-hub-page">

  <h1>Event Hub Controller</h1>

  <!-- Tabs -->
  <nav class="sub-tabs">
    <a class="sub-menu-entry" (click)="filterState = 'ALL'" [class.active]="filterState === 'ALL'">All Events</a>
    <a class="sub-menu-entry" (click)="filterState = 'UPCOMING'" [class.active]="filterState === 'UPCOMING'">Upcoming Events</a>
    <a class="sub-menu-entry" (click)="filterState = 'PAST'" [class.active]="filterState === 'PAST'">Past Events</a>
  </nav>

  <!-- Filters Row -->
  <div class="filters-row">
    <div class="search-filter">
      <input 
        type="text" 
        placeholder="Search events" 
        [(ngModel)]="searchQuery"
      />
      <select>
        <option>All events</option>
        <option>Live</option>
        <option>Private</option>
      </select>
    </div>

    <button class="create-event-btn" (click)="openEventForm()">
      Create Event
    </button>
  </div>

  <p>Events count: {{ filteredEvents.length }}</p>

  <!-- Loading State -->
  <div *ngIf="loading" class="loading-indicator">
    Loading events...
  </div>

  <!-- Table Header -->
  <div class="table-header">
    <span>Name</span>
    <span>State</span>
    <span>Date</span>
    <span>Actions</span>
  </div>

  <!-- Event Rows -->
  <ng-container *ngFor="let event of filteredEvents">
    <div class="event-row">
      <div class="event-info">
        <img class="thumb" [src]="event.thumbnail" />
        <div class="event-title">{{ event.title }}</div>
      </div>
      <div class="state">
        <span class="badge waiting-live" *ngIf="event.state === 'ACTIVE'">ACTIVE</span>
        <!-- <span class="badge published" *ngIf="event.state === 'PAST'">PAST</span>
        <span class="badge scheduled" *ngIf="event.state === 'UPCOMING'">UPCOMING</span>
        <span class="badge draft" *ngIf="event.state === 'DRAFT'">DRAFT</span> -->
        <span class="badge draft" *ngIf="event.state === 'DISABLED'">DISABLED</span>
      </div>
      <div class="date">{{ event.startTime | date: 'short' }}</div>
      <div class="actions">
        <my-button class="me-2" label="Manage" theme="secondary" (click)="openEventForm(event)"></my-button>

        <my-action-dropdown
          container="body"
          placement="bottom-right auto"
          buttonIcon="more-horizontal"
          [actions]="eventActions"
          [entry]="event"
        ></my-action-dropdown>
      </div>
    </div>
  </ng-container>

  <div *ngIf="filteredEvents.length === 0 && !loading" class="no-events">
    <p>No events found. <a (click)="openEventForm()">Create one now!</a></p>
  </div>

</div>

  
