<nz-tabset [nzTabBarExtraContent]="extraTemplate">
  <nz-tab nzTitle="通道详情">

    <nz-list nzBordered>
      <nz-list-item><span>名称</span>{{data.name}}</nz-list-item>
      <nz-list-item><span>类型</span>{{data.type}}</nz-list-item>
      <nz-list-item><span>地址</span>{{data.addr}}</nz-list-item>
      <nz-list-item>
        <span>服务器</span>
        <a [routerLink]="'/admin/server/detail/'+data.server_id">{{data.server}}</a>
      </nz-list-item>
      <nz-list-item><span>状态</span>{{data.running ? '启动' : '停止'}}</nz-list-item>
      <nz-list-item>
        <span>禁用</span>
        <nz-switch [ngModel]="data.disabled" (ngModelChange)="onEnableChange($event)"></nz-switch>
      </nz-list-item>
      <nz-list-item><span>上线时间</span>{{data.last|dateString}}</nz-list-item>
      <nz-list-item><span>创建时间</span>{{data.created|dateString}}</nz-list-item>
    </nz-list>

    <a [routerLink]="'/admin/tunnel/monitor/'+data.id">监控</a>

  </nz-tab>
  <nz-tab nzTitle="相关设备">
    <ng-template nz-tab>
      <app-tunnel-device [id]="id"></app-tunnel-device>
    </ng-template>
  </nz-tab>
  <nz-tab nzTitle="日志">
    <ng-template nz-tab>
      <app-event type="tunnel" [id]="id"></app-event>
    </ng-template>
  </nz-tab>

</nz-tabset>

<ng-template #extraTemplate>
  <a (click)="load()" title="刷新">
    <i nz-icon nzType="reload" [nzSpin]="loading"></i>
  </a>
  <nz-divider nzType="vertical"></nz-divider>
  <a title="原始数据" appViewConfig [config]="data">
    <i nz-icon nzType="profile"></i>
  </a>
  <nz-divider nzType="vertical"></nz-divider>
  <a title="编辑" [routerLink]="'/admin/tunnel/edit/'+id">
    <i nz-icon nzType="form"></i>
  </a>
</ng-template>
