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

    <h1>Live Stream Controller</h1>
  
    <!-- Filters Row -->
    <div class="filters-row">
  
      <div class="search-filter">
        <input
          type="text"
          placeholder="Search lives"
          [(ngModel)]="searchQuery"
        />
      </div>
  
      <button class="create-event-btn" (click)="openVideoForm()">
        Schedule Live
      </button>
  
    </div>
  
    <p>Lives count: {{ filteredVideos.length }}</p>
  
    <!-- Loading -->
    <div *ngIf="loading" class="loading-indicator">
      Loading...
    </div>
  
    <!-- Table Header -->
    <div class="table-header">
      <span>Name</span>
      <span>Camera</span>
      <span>Start Time</span>
      <span>End Time</span>
      <span>Actions</span>
    </div>
  
    <!-- Live Video Rows -->
    <ng-container *ngFor="let video of filteredVideos">
  
      <div class="event-row">
  
        <!-- Video Info -->
        <div class="event-info">
            <img
            class="thumb"
            [src]="video.thumbnail"
            (error)="video.thumbnail='assets/images/favicon.png'"
          />
          <div class="event-title">{{ video.title }}</div>
        </div>
  
        <!-- Camera -->
        <div class="camera">
          {{ video.camera }}
        </div>
  
        <!-- Start Time -->
        <div class="date">
          {{ video.startTime | date: 'short' }}
        </div>
  
        <!-- End Time -->
        <div class="date">
          {{ video.endTime | date: 'short' }}
        </div>
  
        <!-- Actions -->
        <div class="actions">
  
          <my-button
            class="me-2"
            label="Manage"
            theme="secondary"
            (click)="openVideoForm(video)">
          </my-button>
  
          <my-action-dropdown
            container="body"
            placement="bottom-right auto"
            buttonIcon="more-horizontal"
            [actions]="videoActions"
            [entry]="video"
          >
          </my-action-dropdown>
  
        </div>
  
      </div>
  
    </ng-container>
  
    <!-- Empty State -->
    <div *ngIf="filteredVideos.length === 0 && !loading" class="no-events">
      <p>No live videos found. <a (click)="openVideoForm()">Schedule one now!</a></p>
    </div>
  
  </div>