<ng-container *transloco="let t; prefix:'manage-user-tokens'">
  <p>{{t('description')}}</p>

  <app-responsive-table [rows]="users" [trackByFn]="trackBy">
    <ng-template #tableTemplate>
      <ngx-datatable
        class="bootstrap"
        [rows]="users"
        [columnMode]="ColumnMode.force"
        rowHeight="auto"
        [footerHeight]="50"
      >

        <ngx-datatable-column prop="username" [sortable]="true" [draggable]="false" [resizeable]="false">
          <ng-template let-column="column" ngx-datatable-header-template>
            {{t('username-header')}}
          </ng-template>
          <ng-template let-item="row" ngx-datatable-cell-template>
            {{item.username}}
          </ng-template>
        </ngx-datatable-column>


        <ngx-datatable-column prop="aniListValidUntilUtc" [sortable]="false" [draggable]="false" [resizeable]="false">
          <ng-template let-column="column" ngx-datatable-header-template>
            {{t('anilist-header')}}
          </ng-template>
          <ng-template let-item="row" ngx-datatable-cell-template>
            @if (item.isAniListTokenSet) {
              {{t('token-set-label')}} <span class="text-muted ms-1">{{t('expires-label', {date: item.aniListValidUntilUtc | utcToLocalTime})}}</span>
            } @else {
              {{null | defaultValue}}
            }
          </ng-template>
        </ngx-datatable-column>

        <ngx-datatable-column prop="validUntilUtc" [sortable]="false" [draggable]="false" [resizeable]="false">
          <ng-template let-column="column" ngx-datatable-header-template>
            {{t('mal-header')}}
          </ng-template>
          <ng-template let-item="row" ngx-datatable-cell-template>
            @if (item.isMalTokenSet) {
              {{t('token-set-label')}}
            } @else {
              {{null | defaultValue}}
            }
          </ng-template>
        </ngx-datatable-column>
      </ngx-datatable>
    </ng-template>

    <ng-template #cardTemplate let-item let-idx="index">
      <div class="card mb-3">
        <div class="card-body">
          <h5 class="card-title mb-3">{{item.username}}</h5>

          <div class="row g-2">
            <div class="col-12">
              <div class="text-muted small">{{t('anilist-header')}}</div>
              <div>
                @if (item.isAniListTokenSet) {
                  {{t('token-set-label')}}
                  <span class="text-muted ms-1">{{t('expires-label', {date: item.aniListValidUntilUtc | utcToLocalTime})}}</span>
                } @else {
                  {{null | defaultValue}}
                }
              </div>
            </div>

            <div class="col-12">
              <div class="text-muted small">{{t('mal-header')}}</div>
              <div>
                @if (item.isMalTokenSet) {
                  {{t('token-set-label')}}
                } @else {
                  {{null | defaultValue}}
                }
              </div>
            </div>
          </div>
        </div>
      </div>
    </ng-template>

  </app-responsive-table>
</ng-container>
