<div class="reading-sessions-container" *transloco="let t; prefix: 'metadata.readingSessions'">
  @if (loading && sessions.length === 0) {
    <div class="loading-state">
      <p-progressSpinner strokeWidth="4" fill="transparent" animationDuration=".8s"></p-progressSpinner>
      <p class="loading-text">{{ t('loading') }}</p>
    </div>
  } @else if (sessions.length === 0) {
    <div class="empty-state">
      <i class="pi pi-clock" style="font-size: 3rem; color: var(--text-color-secondary);"></i>
      <p>{{ t('emptyState') }}</p>
    </div>
  } @else {
    <p-table
      [value]="sessions"
      [paginator]="true"
      [rows]="rows"
      [loading]="loading"
      [showCurrentPageReport]="true"
      currentPageReportTemplate="Showing {first} to {last} of {totalRecords} sessions"
      class="p-datatable-sm">
      <ng-template pTemplate="header">
        <tr>
          <th>{{ t('headerSession') }}</th>
          <th>{{ t('headerType') }}</th>
          <th>{{ t('headerDuration') }}</th>
          <th>{{ t('headerProgress') }}</th>
          <th>{{ t('headerProgressDelta') }}</th>
          <th>{{ t('headerLocation') }}</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-session>
        <tr>
          <td>
            <div class="session-time">
              <span class="session-date">{{ formatSessionDate(session.startTime) }}</span>
              <span class="session-range">{{ formatTime(session.startTime) }} → {{ formatTime(session.endTime) }}</span>
            </div>
          </td>
          <td>
            <span class="book-type-badge" [ngClass]="'book-type-' + session.bookType.toLowerCase()">
              <i [class]="getBookTypeIcon(session.bookType)"></i>
              <span>{{ formatBookType(session.bookType) }}</span>
            </span>
          </td>
          <td>{{ getActualDuration(session) }}</td>
          <td>
            @if (session.startProgress !== null && session.startProgress !== undefined && session.endProgress !== null && session.endProgress !== undefined) {
              <span>{{ session.startProgress }}% → {{ session.endProgress }}%</span>
            } @else {
              <span class="text-color-secondary">-</span>
            }
          </td>
          <td>
            @if (session.progressDelta !== null && session.progressDelta !== undefined) {
              <span class="progress-delta-badge" [ngClass]="getProgressDeltaClass(session.progressDelta)">
                <i [class]="getProgressDeltaIcon(session.progressDelta)"></i>
                <span>{{ (session.progressDelta > 0 ? '+' : '') + session.progressDelta }}%</span>
              </span>
            } @else {
              <span class="text-color-secondary">-</span>
            }
          </td>
          <td>
            @if (session.startLocation && session.endLocation) {
              <span class="location-text">{{ formatLocation(session) }}</span>
            } @else {
              <span class="text-color-secondary">-</span>
            }
          </td>
        </tr>
      </ng-template>
    </p-table>
  }
</div>
