<h1>{{ isEdit ? 'Edit Trip' : 'Add Trip' }}</h1>

<div *ngIf="loading">Loading...</div>
<div *ngIf="error" class="text-danger">{{ error }}</div>

<form (ngSubmit)="onSave()" #f="ngForm">
  <div>
    <label>Code</label><br />
    <input name="code" [(ngModel)]="trip.code" required [readonly]="isEdit" />
  </div>

  <div>
    <label>Name</label><br />
    <input name="name" [(ngModel)]="trip.name" required />
  </div>

  <div>
    <label>Length</label><br />
    <input name="length" [(ngModel)]="trip.length" required />
  </div>

  <div>
    <label>Start Date</label><br />
    <input type="date" name="start" [(ngModel)]="trip.start" required />
  </div>

  <div>
    <label>Resort</label><br />
    <input name="resort" [(ngModel)]="trip.resort" required />
  </div>

  <div>
    <label>Per Person</label><br />
    <input name="perPerson" [(ngModel)]="trip.perPerson" required />
  </div>

  <div>
    <label>Image</label><br />
    <input name="image" [(ngModel)]="trip.image" />
  </div>

  <div>
    <label>Description</label><br />
    <textarea name="description" [(ngModel)]="trip.description" required></textarea>
  </div>

  <button type="submit" [disabled]="f.invalid || loading">
    {{ isEdit ? 'Update' : 'Create' }}
  </button>

  <button type="button" (click)="onCancel()">Cancel</button>

  <!-- quick visibility check (remove later) -->
  <!-- <pre>{{ trip | json }}</pre> -->
</form>
