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

  @if (data().length === 0) {
    @if (!isLoading()) {
      <p>{{t('no-data')}}</p>
    }
    <app-loading [loading]="isLoading()" />

  } @else {
    <app-responsive-table [rows]="data()" [trackByFn]="trackBy">
      <ng-template #tableTemplate>
        <ngx-datatable
          class="bootstrap"
          [rows]="data()"
          [columnMode]="'force'"
          rowHeight="auto"
          [footerHeight]="50"
        >

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


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

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

          <ngx-datatable-column prop="sent" [sortable]="true" [draggable]="false" [resizeable]="false">
            <ng-template let-column="column" ngx-datatable-header-template>
              {{t('sent-header')}}
            </ng-template>
            <ng-template let-item="row" ngx-datatable-cell-template>
              @if (item.sent) {
                <i class="fa-solid fa-check-circle successful-validation ms-1">
                  <span class="visually-hidden">{{t('sent-tooltip')}}</span>
                </i>
              } @else {
                <i class="error fa-solid fa-exclamation-circle ms-1">
                  <span class="visually-hidden">{{t('not-sent-tooltip')}}</span>
                </i>
              }
            </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">
            <!-- Header with template name and status -->
            <div class="d-flex justify-content-between align-items-start mb-3">
              <h5 class="card-title mb-0">{{item.emailTemplate}}</h5>
              <div>
                @if (item.sent) {
                  <i class="fa-solid fa-check-circle text-success" aria-hidden="true"></i>
                  <span class="visually-hidden">{{t('sent-tooltip')}}</span>
                } @else {
                  <i class="fa-solid fa-exclamation-circle text-danger" aria-hidden="true"></i>
                  <span class="visually-hidden">{{t('not-sent-tooltip')}}</span>
                }
              </div>
            </div>

            <!-- Details -->
            <div class="row g-2">
              <div class="col-6">
                <div class="text-muted small">{{t('date-header')}}</div>
                <div>{{item.sendDate | utcToLocalTime}}</div>
              </div>

              <div class="col-6">
                <div class="text-muted small">{{t('user-header')}}</div>
                <div>{{item.toUserName}}</div>
              </div>
            </div>
          </div>
        </div>
      </ng-template>
    </app-responsive-table>
  }
</ng-container>
