<div class="margin-content manage-event-page">
  <h1>{{ eventId ? 'Edit Event' : 'Create Event' }}</h1>

  <form (ngSubmit)="saveEvent()" class="event-form">
    <div class="event-actions" *ngIf="eventId">
      <button type="button" class="btn btn-secondary" (click)="setEventState('active')" [disabled]="!eventChannelId || formEvent.state === 'active' || pendingDelete">Active</button>
      <button type="button" class="btn btn-secondary" (click)="setEventState('disabled')" [disabled]="!eventChannelId || formEvent.state === 'disabled' || pendingDelete">Disable</button>
      <button type="button" class="btn btn-primary" (click)="enableEditMode()" [disabled]="isEditMode">Edit</button>
      <button type="button" class="btn btn-danger" (click)="deleteCurrentEvent()" [disabled]="!eventChannelId || pendingDelete">Delete</button>
    </div>

    <div class="form-group">
      <label>Channel *</label>
    
      <div class="select-field channel-select">
        <select
          [(ngModel)]="selectedChannelId"
          name="channelId"
          required
          class="form-control"
          [disabled]="!!eventId"
        >
          <option *ngFor="let channel of userChannels" [ngValue]="channel.id">
            {{ channel.displayName }}
          </option>
        </select>
      </div>
    </div>
    

    <div class="form-group">
      <label for="thumbnailfile" i18n>Event thumbnail</label>
    
      <my-image-input
        inputLabel="Edit"
        inputName="thumbnailfile"
        (ngModelChange)="thumbnailFile = $event"
        [(ngModel)]="thumbnailFile"
        name="thumbnailfile">
      </my-image-input>
    </div>
    

    <div class="form-group">
      <label>Event Title *</label>
      <input 
        type="text" 
        [(ngModel)]="formEvent.title" 
        name="title"
        placeholder="Enter event title"
        class="form-control"
        [disabled]="eventId && !isEditMode"
        required
      />
    </div>

    <div class="form-group">
      <label>Description</label>
      <textarea 
        [(ngModel)]="formEvent.description" 
        name="description"
        placeholder="Event description (optional)"
        class="form-control"
        rows="4"
        [disabled]="eventId && !isEditMode"
      ></textarea>
    </div>

    <div class="form-group">
      <label>Live URL</label>
      <input
        type="url"
        [(ngModel)]="formEvent.liveUrl"
        name="liveUrl"
        placeholder="https://example.com/live"
        class="form-control"
        [disabled]="eventId && !isEditMode"
      />
    </div>

    <div class="form-row">
      <div class="form-group">
        <label>Start Time *</label>
        <input 
          type="datetime-local" 
          [(ngModel)]="formEvent.startTime" 
          name="startTime"
          class="form-control"
          [disabled]="eventId && !isEditMode"
          required
        />
      </div>

      <div class="form-group">
        <label>End Time *</label>
        <input 
          type="datetime-local" 
          [(ngModel)]="formEvent.endTime" 
          name="endTime"
          class="form-control"
          [disabled]="eventId && !isEditMode"
          required
        />
      </div>
    </div>

    <div class="form-actions">
      <button type="submit" class="btn btn-primary" [disabled]="eventId && !isEditMode && !hasPendingAction">
        {{ eventId ? 'Update Event' : 'Create Event' }}
      </button>
      <button type="button" class="btn btn-secondary" (click)="cancel()">
        Cancel
      </button>
    </div>
  </form>
</div>
