<form
  name="addCatrgory"
  class="category-edit-form"
  [formGroup]="editForm"
  (ngSubmit)="submitEditForm()"
>
  <div class="form-group" [ngClass]="controlStateClass(name)">
    <label for="category-name">
      <h5>名称</h5>
    </label>
    <input
      type="text"
      class="form-control"
      id="category-name"
      placeholder="分类名称"
      [formControl]="name"
    >
    <span class="help-block sub-little-text">这将是它在站点上显示的名字</span>
  </div>
  <div class="form-group" [ngClass]="controlStateClass(slug)">
    <label for="category-slug">
      <h5>别名</h5>
    </label>
    <input
      type="text"
      class="form-control"
      id="category-slug"
      placeholder="分类别名"
      [formControl]="slug"
    >
    <span class="help-block sub-little-text">“别名”是在URL中使用的别称，建议小写，字母、数字、连字符（-）</span>
  </div>
  <div class="form-group" [ngClass]="controlStateClass(pid)">
    <label for="category-parent">
      <h5>父分类</h5>
    </label>
    <select class="form-control" id="category-parent" [formControl]="pid">
      <option [ngValue]="null">无</option>
      <ng-template [ngIf]="categories && categories.length">
        <option
          *ngFor="let cate of categories"
          [ngValue]="cate._id"
          [disabled]="isDisableCateSelect(cate)"
        >
          <span *ngIf="cate.level">└</span>
          <span>{{ ''.padEnd(cate.level, '─') }}</span>
          <span>&nbsp;</span>
          <span>{{ cate.name }}</span>
        </option>
      </ng-template>
    </select>
    <span class="help-block sub-little-text">可以选择父级分类</span>
  </div>
  <div class="form-group" [ngClass]="controlStateClass(description)">
    <label for="category-description">
      <h5>描述</h5>
    </label>
    <textarea
      name="category-description"
      id="category-description"
      class="form-control category-description"
      cols="30"
      rows="20"
      placeholder="分类描述"
      [formControl]="description"
    >
    </textarea>
    <span class="help-block sub-little-text">该分类的描述</span>
  </div>
  <div  class="form-group"[ngClass]="controlStateClass(extends)">
    <label for="category-extend">
      <h5>自定义扩展</h5>
    </label>
    <div class="input-group" *ngFor="let extend of extends.value; let i = index">
      <input
        type="text"
        id="category-extend"
        class="form-control"
        placeholder="key"
        [(ngModel)]="extend.name"
        [ngModelOptions]="{ standalone: true }"
      >
      <input
        type="text"
        id="category-extend-value"
        class="form-control"
        placeholder="value"
        [(ngModel)]="extend.value"
        [ngModelOptions]="{ standalone: true }"
      >
      <div class="input-group-append">
        <button
          class="btn btn-default"
          (click)="delExtendItem(i)"
          [disabled]="extends.value.length < 2"
        >
          <ion-icon class="icon" name="trash"></ion-icon>
        </button>
      </div>
    </div>
    <button
      type="button"
      class="btn btn-default btn-sm btn-block btn-with-icon"
      (click)="addExtendItem()"
    >
      <ion-icon class="icon" name="add"></ion-icon>
      <span>增加扩展</span>
    </button>
    <span class="help-block sub-little-text">可以为当前标签扩展自定义扩展属性</span>
  </div>
  <hr>
  <div class="row">
    <div class="col-sm-12">
      <button
        type="submit"
        class="btn btn-success btn-with-icon submit-btn"
        [disabled]="!editForm.valid || isFetching"
      >
        <ion-icon class="icon" name="checkmark-done"></ion-icon>
        <span *ngIf="isFetching">分类{{ category ? '修改' : '添加' }}中</span>
        <span *ngIf="!isFetching">{{ category ? '修改' : '添加' }}分类目录</span>
      </button>
      <button class="btn btn-default btn-with-icon" (click)="resetEditForm(true)">
        <ion-icon class="icon" name="refresh"></ion-icon>
        <span>重置</span>
      </button>
    </div>
  </div>
</form>
