<div class="margin-content event-users-page">
  <div class="page-header">
    <h1>Event Registrations</h1>

    <my-button
      label="Export to Excel"
      icon="download"
      theme="primary"
      [disabled]="loading || filteredUsers.length === 0"
      (click)="exportRegistrations()"
    ></my-button>
  </div>

  <div class="filters-row">
    <div class="search-filter">
      <input type="text" placeholder="Search users" [(ngModel)]="searchQuery" />
    </div>
  </div>

  <p>Users count: {{ filteredUsers.length }}</p>

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

  <div class="table-header">
    <span>Event Name</span>
    <span>First Name</span>
    <span>Last Name</span>
    <span>Email</span>
    <span>Company Name</span>
    <span>Job Title</span>
    <span>Location</span>
    <span>Date of Registration</span>
    <span>Action</span>
  </div>

  <ng-container *ngFor="let user of filteredUsers">
    <div class="event-row">
      <div>{{ user.eventName }}</div>
      <div>{{ user.firstName }}</div>
      <div>{{ user.lastName }}</div>
      <div>{{ user.email }}</div>
      <div>{{ user.companyName }}</div>
      <div>{{ user.jobTitle }}</div>
      <div>{{ user.country }}</div>
      <div>{{ user.createdAt | date : "medium" }}</div>
      <div class="actions">
        <my-action-dropdown
          container="body"
          placement="bottom-right auto"
          buttonIcon="more-horizontal"
          [actions]="deleteActions"
          [entry]="user"
        >
        </my-action-dropdown>

      </div>
    </div>
  </ng-container>

  <div *ngIf="filteredUsers.length === 0 && !loading" class="no-events">
    <p>No registrations found.</p>
  </div>
</div>
