<app-menu></app-menu>

<div class="container mt-4">
  <h2 class="mb-4">Events</h2>
  <div class="mb-3">
    <a routerLink="/dashboard/eventForm" class="btn btn-primary">
      <i class="bi bi-plus"></i> Add New Event
    </a>
  </div>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Code</th>
        <th>Year</th>
        <th>Subject</th>
        <th>Title</th>
        <th>Subtitle</th>
        <th>Date</th>
        <th>Phone</th>
        <th>Email</th>
        <th>Active</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let event of events">
        <td>{{ event.code }}</td>
        <td>{{ event.year }}</td>
        <td>{{ event.subject }}</td>
        <td>{{ event.title }}</td>
        <td>{{ event.subTitle }}</td>
        <td>{{ event.date }}</td>
        <td>{{ event.phone }}</td>
        <td>{{ event.email }}</td>
        <td>{{ event.isActive ? 'Yes' : 'No' }}</td>
        <td>
          <a [routerLink]="['/eventForm', event.id]" class="btn btn-warning btn-sm">
            <i class="bi bi-pencil"></i> Edit
          </a>
          <button (click)="deleteEvent(event.id)" class="btn btn-danger btn-sm">
            <i class="bi bi-trash"></i> Delete
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>
