<div class="table-responsive mt-2">
  <table class="table table-striped table-hover">
    <thead>
      <tr class="text-nowrap">
        <th scope="col">{{ 'notify-message-result.timestamp' | translate}}</th>
        <th scope="col">{{'notify-message-result.repositoryItem' | translate}}</th>
        <th scope="col">{{ 'notify-message-result.ldnService' | translate}}</th>
        <th scope="col">{{ 'notify-message-result.type' | translate }}</th>
        <th scope="col">{{ 'notify-message-result.status' | translate  }}</th>
        <th scope="col">{{ 'notify-message-result.action' | translate }}</th>
      </tr>
    </thead>
    <tbody>
      @for (message of (messagesSubject$ | async); track message) {
        <tr>
          <td class="text-nowrap">
            @if (message.queueLastStartTime) {
              <div>{{ message.queueLastStartTime | date:"YYYY/MM/d hh:mm:ss" }}</div>
            }
            @if (!message.queueLastStartTime) {
              <div>n/a</div>
            }
          </td>
          <td>
            <ds-truncatable [id]="message.id">
              <ds-truncatable-part [id]="message.id" [minLines]="2">
                @if (message.relatedItem) {
                  <a [routerLink]="'/items/' + (message.context || message.object)">{{ message.relatedItem }}</a>
                }
              </ds-truncatable-part>
            </ds-truncatable>
            @if (!message.relatedItem) {
              <div>n/a</div>
            }
          </td>
          <td>
            @if (message.ldnService) {
              <div>{{ message.ldnService }}</div>
            }
            @if (!message.ldnService) {
              <div>n/a</div>
            }
          </td>
          <td>
            <div>{{ message.activityStreamType }}</div>
          </td>
          <td>
            <div class="text-nowrap">{{ 'notify-detail-modal.' + message.queueStatusLabel | translate }}</div>
          </td>
          <td>
            <div class="d-flex flex-column">
              <button class="btn mb-2 btn-dark" (click)="openDetailModal(message)">{{ 'notify-message-result.detail' | translate }}</button>
              @if (message.queueStatusLabel !== reprocessStatus && validStatusesForReprocess.includes(message.queueStatusLabel)) {
                <button
                  (click)="reprocessMessage(message)"
                  class="btn btn-warning"
                  >
                  {{ 'notify-message-result.reprocess' | translate }}
                </button>
              }
            </div>
          </td>
        </tr>
      }
    </tbody>
  </table>
</div>
