<div class="clearfix">
  <div class="pull-left">
    <div class="btn-group" role="group" aria-label="Basic example">
      <button
        type="button"
        class="btn btn-default btn-with-icon"
        [disabled]="isFetching"
        (click)="refreshCategories()"
      >
        <ion-icon class="icon" name="refresh"></ion-icon>
        <span>刷新</span>
      </button>
      <div class="btn-group" dropdown [isDisabled]="!selectedCategories.length || isFetching">
        <button
          type="button"
          class="btn btn-default  btn-with-icon dropdown-toggle"
          dropdownToggle
        >
          <ion-icon class="icon" name="list"></ion-icon>
          <span>批量操作</span>
        </button>
        <ul class="dropdown-menu" *dropdownMenu>
          <li class="dropdown-item">
            <a [href]="" (click)="delCategories()">
              <ion-icon class="icon" name="trash"></ion-icon>
              <span>删除选中</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="table-responsive">
  <div class="category-list">
    <sa-loading-spider [show]="isFetching"></sa-loading-spider>
    <table class="table table-striped table-no-borders black-muted-bg">
      <thead>
        <tr>
          <th>
            <sa-checkbox
              ngDefaultControl
              [(ngModel)]="categoriesSelectAll"
              (ngModelChange)="batchSelectChange($event)"
            >
              <span sa-checkbox-label>
                <span>&nbsp;</span>
                <strong>ID</strong>
              </span>
            </sa-checkbox>
          </th>
          <th>名称</th>
          <th>别名</th>
          <th>描述</th>
          <th class="text-center">文章</th>
          <th class="text-center" width="260px">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngIf="!categories.data.length;else dataList">
          <td colspan="7">
            <p class="text-muted text-center category-err-msg">
              {{ isFetching ? '数据请求中...' : '暂无数据' }}
            <p>
          </td>
        </tr>
        <ng-template #dataList>
          <tr *ngFor="let category of categories.data">
            <td class="no-wrap">
              <sa-checkbox
                ngDefaultControl
                [(ngModel)]="category.selected"
                (ngModelChange)="itemSelectChange()"
              >
                <span sa-checkbox-label>
                  <span>&nbsp;</span>
                  <strong>{{ category.id }}</strong>
                </span>
              </sa-checkbox>
            </td>
            <td class="no-wrap">
              <strong *ngIf="category.unrepaired" class="text-warning">
                <ion-icon class="icon" name="alert"></ion-icon>
                <span>&nbsp;</span>
              </strong>
              <strong *ngIf="category.level">└</strong>
              <strong>{{ ''.padEnd(category.level, '─') }}</strong>
              <span>&nbsp;</span>
              <strong>{{ category.name }}</strong>
            </td>
            <td class="no-wrap">{{ category.slug }}</td>
            <td>
              <div class="category-[TODO-BAK]-description" [title]="category.description">
                <span [class.text-muted]="!category.description">
                  {{ category.description || '暂无描述' }}
                </span>
              </div>
            </td>
            <td class="no-wrap">
              <div class="text-center">{{ category.count || 0 }}</div>
            </td>
            <td class="no-wrap">
              <div class="text-center">
                <div class="btn-group">
                  <button
                    type="button"
                    class="btn btn-sm btn-warning btn-with-icon"
                    (click)="editCategory(category)"
                  >
                    <ion-icon class="icon" name="create"></ion-icon>
                    <span>编辑</span>
                  </button>
                  <button
                    type="button"
                    class="btn btn-sm btn-danger btn-with-icon"
                    (click)="delCategory(category)"
                  >
                    <ion-icon class="icon" name="trash"></ion-icon>
                    <span>删除</span>
                  </button>
                  <a
                    class="btn btn-sm btn-info btn-with-icon"
                    [href]="getCategoryPath(category.slug)"
                    target="_blank"
                  >
                    <ion-icon class="icon" name="open"></ion-icon>
                    <span>查看</span>
                  </a>
                </div>
              </div>
            </td>
          </tr>
        </ng-template>
      </tbody>
    </table>
  </div>
</div>
