<div class="da-list-wrap">
  <div class="da-content-banner">
    <d-breadcrumb>
      <d-breadcrumb-item
        ><a routerLink="/">{{ 'list.breadcrumb.home' | translate }}</a></d-breadcrumb-item
      >
      <d-breadcrumb-item>{{ 'list.breadcrumb.formPage' | translate }}</d-breadcrumb-item>
      <d-breadcrumb-item>{{ 'list.breadcrumb.basicList' | translate }}</d-breadcrumb-item>
    </d-breadcrumb>
    <div class="da-content-banner-title">
      {{ 'list.basicList.title' | translate }}
    </div>
    <div>{{ 'list.basicList.description' | translate }}</div>
  </div>
  <div class="da-content-wrapper">
    <da-layout-row [daGutter]="[24, 24]">
      <da-col-item [daSpan]="24" [daXs]="24">
        <div class="da-list-container">
          <div class="da-list-header">
            <div class="da-header-left">
              <div class="da-header-item">
                <div class="da-header-item-label">Border Type：</div>
                <d-select [placeholder]="'change table style'" [options]="options" [(ngModel)]="searchForm.borderType"></d-select>
              </div>
              <div class="da-header-item">
                <div class="da-header-item-label">Size：</div>
                <d-select [placeholder]="'change table size'" [options]="sizeOptions" [(ngModel)]="searchForm.size"></d-select>
              </div>
              <div class="da-header-item">
                <div class="da-header-item-label">Layout：</div>
                <d-select [placeholder]="'change table layout'" [options]="layoutOptions" [(ngModel)]="searchForm.layout"></d-select>
              </div>
            </div>
            <div class="header-right">
              <d-button (click)="reset()">Reset</d-button>
            </div>
          </div>
          <div class="list-content" dLoading [loading]="busy">
            <d-data-table
              #datatable
              [dataSource]="basicDataSource"
              [borderType]="searchForm.borderType"
              [size]="searchForm.size"
              [tableLayout]="searchForm.layout"
              [scrollable]="true"
            >
              <d-column field="id" header="Id" [width]="'100px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">
                    {{ cellItem }}
                  </ng-template>
                </d-cell>
              </d-column>
              <d-column field="title" header="Title" [width]="'300px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">
                    <span [title]="cellItem" class="over-flow-ellipsis" [style.width]="'300px'">
                      <d-tag [tag]="'Epic'" [labelStyle]="'epic'"></d-tag>
                      {{ cellItem }}
                    </span>
                  </ng-template>
                </d-cell>
              </d-column>
              <d-column field="priority" header="Priority" [width]="'100px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">
                    <d-tag [tag]="cellItem" [labelStyle]="cellItem"></d-tag>
                  </ng-template>
                </d-cell>
              </d-column>
              <d-column field="iteration" header="Iteration" [width]="'100px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">
                    {{ cellItem }}
                  </ng-template>
                </d-cell>
              </d-column>
              <d-column field="assignee" header="Assignee" [width]="'100px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">
                    <div class="over-flow-ellipsis">
                      <d-avatar [name]="cellItem" [width]="24" [height]="24"></d-avatar>
                      <span style="margin-left: 6px">{{ cellItem }}</span>
                    </div>
                  </ng-template>
                </d-cell>
              </d-column>
              <d-column field="status" header="Status" [width]="'100px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">
                    <span [ngClass]="cellItem.split(' ')[0]">{{ cellItem || '--' }}</span>
                  </ng-template>
                </d-cell>
              </d-column>
              <d-column field="timeline" header="Timeline" [width]="'100px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">
                    <div class="over-flow-ellipsis">
                      {{ cellItem }}
                    </div>
                  </ng-template>
                </d-cell>
              </d-column>
              <d-column field="Actions" header="Actions" [width]="'100px'">
                <d-cell>
                  <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
                    <div class="btn-group over-flow-ellipsis">
                      <d-button icon="icon-edit" bsStyle="text-dark" title="edit" (click)="editRow(rowItem, rowIndex)"></d-button>
                      <d-button icon="icon-delete" bsStyle="text-dark" title="delete" (click)="deleteRow(rowIndex)"></d-button>
                    </div>
                  </ng-template>
                </d-cell>
              </d-column>
            </d-data-table>
          </div>
          <div class="da-list-footer">
            <d-pagination
              [size]="'sm'"
              [total]="pager.total"
              [(pageSize)]="pager.pageSize"
              [(pageIndex)]="pager.pageIndex"
              [canViewTotal]="true"
              [canChangePageSize]="true"
              [canJumpPage]="true"
              [maxItems]="5"
              (pageIndexChange)="onPageChange($event)"
              (pageSizeChange)="onSizeChange($event)"
            >
            </d-pagination>
          </div>
        </div>
      </da-col-item>
    </da-layout-row>
  </div>
</div>

<ng-template #EditorTemplate>
  <da-admin-form [formConfig]="formConfig" [formData]="formData" (submitted)="onSubmitted($event)" (canceled)="onCanceled()">
  </da-admin-form>
</ng-template>