<app-loading [condition]="isLoading"></app-loading>

<app-toast [message]="toast.message"></app-toast>

<div class="card" *ngIf="!isLoading">
  <h4 class="card-header">จำนวนเเมว ({{cats.length}}) ตัว</h4>
  <div class="card-block">
    <table class="table table-bordered table-striped">
      <thead class="thead-default">
        <tr>
          <th>ชื่อเเมว</th>
          <th>อายุ</th>
          <th>น้ำหนัก</th>
          <th>เเก้ไข/ลบ</th>
        </tr>
      </thead>
      <tbody *ngIf="cats.length === 0">
        <tr>
          <td colspan="4">ยังไม่มีข้อมูลเเมวอยู่ในฐานข้อมูล.</td>
        </tr>  
      </tbody>
      <tbody *ngIf="!isEditing">
        <tr *ngFor="let cat of cats">
          <td>{{cat.name}}</td>
          <td>{{cat.age}}</td>
          <td>{{cat.weight}}</td>
          <td>
            <button class="btn btn-sm btn-warning" (click)="enableEditing(cat)"><i class="fa fa-pencil"></i> เเก้ไข</button> 
            <button class="btn btn-sm btn-danger" (click)="deleteCat(cat)"><i class="fa fa-trash"></i> ลบ</button>
          </td>
        </tr>  
      </tbody>
      <tbody *ngIf="isEditing">
        <tr>
          <td colspan="4">
            <form class="form-inline" #form="ngForm" (ngSubmit)="editCat(cat)" style="display:inline">
              <div class="form-group">
                <input class="form-control" type="text" name="name" [(ngModel)]="cat.name" placeholder="ชื่อเเมว" required>
              </div>
              <div class="form-group">
                <input class="form-control" type="number" name="age" [(ngModel)]="cat.age" placeholder="อายุ" min="0" required>
              </div>
              <div class="form-group">
                <input class="form-control" type="number" name="weight" [(ngModel)]="cat.weight" placeholder="น้ำหนัก" step="any" min="0" required>
              </div>
              <button class="btn btn-sm btn-primary" type="submit" [disabled]="!form.form.valid"><i class="fa fa-floppy-o"></i> เเก้ไข</button>
            </form>
            <button class="btn btn-sm btn-warning" (click)="cancelEditing()"><i class="fa fa-times"></i> ยกเลิก</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<div class="card" *ngIf="!isEditing">
  <h4 class="card-header">เพิ่มข้อมูลเเมว</h4>
  <div class="card-block">
    <form class="form-inline" [formGroup]="addCatForm" (ngSubmit)="addCat()" style="text-align:center">
      <div class="form-group">
        <input class="form-control" type="text" name="name" formControlName="name" placeholder="ชื่อเเมว">
      </div>
      <div class="form-group">
        <input class="form-control" type="number" name="age" formControlName="age" placeholder="อายุ" min="0">
      </div>
      <div class="form-group">
        <input class="form-control" type="number" name="weight" formControlName="weight" placeholder="น้ำหนัก" step="any" min="0">
      </div>
      <button class="btn btn-primary" type="submit" [disabled]="!addCatForm.valid"><i class="fa fa-floppy-o"></i> เพิ่ม</button>
    </form>
  </div>
</div>