<clr-modal [(clrModalOpen)]="modalOpened">
  <h3 class="modal-title">{{title}}</h3>

  <div class="clr-col-lg-12 clr-col-md-12 clr-col-sm-12 clr-col-xs-12" class="modal-body">
    <form #apiKeyForm="ngForm">
      <section class="form-block">
        <div class="form-group clr-row">
          <div class="clr-col-lg-3 clr-col-md-12 clr-col-sm-12 clr-col-xs-12">
            <label for="name" class="required">{{'TITLE.NAME' | translate}}</label>
          </div>
          <div class="clr-col-lg-8 clr-col-md-4 clr-col-sm-12 clr-col-xs-12">
            <input class="form-control"
                   [(ngModel)]="apiKey.name"
                   type="text"
                   name="name"
                   required
                   id="name"
                   [placeholder]="'PLACEHOLDER.NAME' | translate"
                   size="45">
          </div>
        </div>
        <div class="form-group clr-row">
          <div class="clr-col-lg-3 clr-col-md-12 clr-col-sm-12 clr-col-xs-12">
            <label for="role" class="required">{{'TITLE.ROLE' | translate}}</label>
          </div>
          <div class="clr-col-lg-8 clr-col-md-4 clr-col-sm-12 clr-col-xs-12">
            <div class="select">
              <select id="role" [(ngModel)]="apiKey.group.id" required name="role">
                <!--这是一个坑，如果使用value获取到的是string，使用ngValue获取到的是model本身类型-->
                <option *ngFor="let group of groups" [ngValue]="group.id">{{group.name}}
                </option>
              </select>
            </div>
          </div>
        </div>
        <div class="form-group clr-row">
          <div class="clr-col-lg-3 clr-col-md-12 clr-col-sm-12 clr-col-xs-12">
            <label for="expire_in" class="required">{{'TITLE.EXPIRE_TIME' | translate}}</label>
          </div>
          <div class="clr-col-lg-8 clr-col-md-8 clr-col-sm-12 clr-col-xs-12">
            <input class="form-control"
                   [(ngModel)]="apiKey.expireIn"
                   type="number"
                   required
                   name="expire_in"
                   id="expire_in"
                   [placeholder]="'PLACEHOLDER.EXPIRE_TIME' | translate"
                   size="45">
          </div>
        </div>
        <div class="form-group clr-row">
          <div class="clr-col-lg-3 clr-col-md-12 clr-col-sm-12 clr-col-xs-12">
            <label for="description">{{'TITLE.DESCRIPTION' | translate}}</label>
          </div>
          <div class="clr-col-lg-8 clr-col-md-4 clr-col-sm-12 clr-col-xs-12">
              <textarea class="form-control"
                        type="text"
                        [(ngModel)]="apiKey.description"
                        name="description"
                        id="description"
                        size="45"></textarea>
          </div>
        </div>
        <div class="modal-footer">

          <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
          <button type="button" class="btn btn-primary" [disabled]="!isValid"
                  (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
        </div>
      </section>
    </form>
  </div>
</clr-modal>
