<div class="container-xl">
  <h1 style="float: left;" i18n="Registered assets page header">Registered assets</h1>
  <br>

  <div class="clearfix"></div>

  <form [formGroup]="searchForm" class="form-inline">
    <div class="input-group m-2">
      <input style="width: 250px;" formControlName="searchText" type="text" class="form-control" i18n-placeholder="Search Assets Placeholder Text" placeholder="Search asset">
      <div class="input-group-append">
        <button [disabled]="!searchForm.get('searchText')?.value.length" class="btn btn-secondary" type="button" (click)="searchForm.get('searchText')?.setValue('');" autocomplete="off" i18n="Search Clear Button">Clear</button>
      </div>
    </div>
  </form>

  <ng-container *ngIf="(assets$ | async) as filteredAssets; else isLoading">
    <table class="table table-borderless table-striped">
      <thead>
        <th class="td-name" i18n="Asset name header">Name</th>
        <th i18n="Asset ticker header">Ticker</th>
        <th class="d-none d-md-block" i18n="Asset Issuer Domain header">Issuer domain</th>
        <th i18n="Asset ID header">Asset ID</th>
        <th class="d-none d-lg-block" i18n="Asset issuance transaction header">Issuance TX</th>
      </thead>
      <tbody>
        <tr *ngFor="let asset of filteredAssets; trackBy: trackByAsset">
          <td class="td-name">{{ asset.name }}</td>
          <td>{{ asset.ticker }}</td>
          <td class="d-none d-md-block"><a *ngIf="asset.entity" target="_blank" href="{{ 'http://' + asset.entity.domain }}">{{ asset.entity.domain }}</a></td>
          <td><a [routerLink]="['/asset/' | relativeUrl, asset.asset_id]">{{ asset.asset_id | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="asset.asset_id"></app-clipboard></td>
          <td class="d-none d-lg-block"><ng-template [ngIf]="asset.issuance_txin"><a [routerLink]="['/tx/' | relativeUrl, asset.issuance_txin.txid]">{{ asset.issuance_txin.txid | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="asset.issuance_txin.txid"></app-clipboard></ng-template></td>
        </tr> 
      </tbody>
    </table>

    <br>

    <ngb-pagination [collectionSize]="assets.length" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="5" [boundaryLinks]="true"></ngb-pagination>

  </ng-container>

  <ng-template #isLoading>

    <table class="table table-borderless table-striped">
      <thead>
        <th i18n="Asset name header">Name</th>
        <th i18n="Asset ticker header">Ticker</th>
        <th i18n="Asset Issuer Domain header">Issuer domain</th>
        <th i18n="Asset ID header">Asset ID</th>
        <th i18n="Asset issuance transaction header">Issuance TX</th>
      </thead>
      <tbody>
        <tr *ngFor="let dummy of [0,0,0]">
          <td><span class="skeleton-loader"></span></td>
          <td><span class="skeleton-loader"></span></td>
          <td class="d-none d-md-block"><span class="skeleton-loader"></span></td>
          <td><span class="skeleton-loader"></span></td>
          <td class="d-none d-lg-block"><span class="skeleton-loader"></span></td>
        </tr> 
      </tbody>
    </table>

  </ng-template>

  <ng-template [ngIf]="error">
    <div class="text-center">
      <ng-container i18n="Asset data load error">Error loading assets data.</ng-container>
      <br>
      <i>{{ error.error }}</i>
    </div>
  </ng-template>

</div>

<br>