paperless-ngx/src-ui/src/app/components/common/share-link-bundle-manage-dialog/share-link-bundle-manage-dialog.component.html

<div class="modal-header">
  <h4 class="modal-title">{{ title }}</h4>
  <button type="button" class="btn-close" aria-label="Close" (click)="close()"></button>
</div>

<div class="modal-body">
  @if (loading) {
    <div class="d-flex align-items-center gap-2">
      <div class="spinner-border spinner-border-sm" role="status"></div>
      <span i18n>Loading share link bundles…</span>
    </div>
  }
  @if (!loading && error) {
    <div class="alert alert-danger mb-0" role="alert">
      {{ error }}
    </div>
  }
  @if (!loading && !error) {
    <div class="d-flex justify-content-between align-items-center mb-2">
      <p class="mb-0 text-muted small">
        <ng-container i18n>Status updates every few seconds while bundles are being prepared.</ng-container>
      </p>
    </div>
    @if (bundles.length === 0) {
      <p class="mb-0 text-muted fst-italic" i18n>No share link bundles currently exist.</p>
    }
    @if (bundles.length > 0) {
      <div class="table-responsive">
        <table class="table table-sm align-middle mb-0">
          <thead>
            <tr>
              <th scope="col" i18n>Created</th>
              <th scope="col" i18n>Status</th>
              <th scope="col" i18n>Size</th>
              <th scope="col" i18n>Expires</th>
              <th scope="col" i18n>Documents</th>
              <th scope="col" i18n>File version</th>
              <th scope="col" class="text-end" i18n>Actions</th>
            </tr>
          </thead>
          <tbody>
            @for (bundle of bundles; track bundle.id) {
              <tr>
                <td>
                  <div>{{ bundle.created | date: 'short' }}</div>
                  @if (bundle.built_at) {
                    <div class="small text-muted">
                      <ng-container i18n>Built:</ng-container> {{ bundle.built_at | date: 'short' }}
                    </div>
                  }
                </td>
                <td>
                  <div class="d-flex align-items-center gap-2">
                    @if (bundle.status === statuses.Processing || bundle.status === statuses.Pending) {
                      <span class="spinner-border spinner-border-sm" role="status"></span>
                    }
                    <span class="badge text-bg-secondary text-uppercase">{{ statusLabel(bundle.status) }}</span>
                  </div>
                  @if (bundle.last_error && bundle.status === statuses.Failed) {
                    <div class="small text-danger mt-1">{{ bundle.last_error }}</div>
                  }
                </td>
                <td>
                  @if (bundle.size_bytes !== undefined && bundle.size_bytes !== null) {
                    {{ bundle.size_bytes | fileSize }}
                  }
                  @if (bundle.size_bytes === undefined || bundle.size_bytes === null) {
                    <span class="text-muted">&mdash;</span>
                  }
                </td>
                <td>
                  @if (bundle.expiration) {
                    {{ bundle.expiration | date: 'short' }}
                  }
                  @if (!bundle.expiration) {
                    <span i18n>Never</span>
                  }
                </td>
                <td>{{ bundle.document_count }}</td>
                <td>{{ fileVersionLabel(bundle.file_version) }}</td>
                <td class="text-end">
                  <div class="btn-group btn-group-sm">
                    <button
                      type="button"
                      class="btn btn-outline-primary"
                      [disabled]="bundle.status !== statuses.Ready"
                      (click)="copy(bundle)"
                    >
                      @if (copiedSlug === bundle.slug) {
                        <i-bs name="clipboard-check"></i-bs>
                      }
                      @if (copiedSlug !== bundle.slug) {
                        <i-bs name="clipboard"></i-bs>
                      }
                      <span class="visually-hidden" i18n>Copy share link</span>
                    </button>
                    @if (bundle.status === statuses.Failed) {
                      <button
                        type="button"
                        class="btn btn-outline-warning"
                        [disabled]="loading"
                        (click)="retry(bundle)"
                      >
                        <i-bs name="arrow-clockwise"></i-bs>
                        <span class="visually-hidden" i18n>Retry</span>
                      </button>
                    }
                    <button
                      type="button"
                      class="btn btn-outline-danger"
                      [disabled]="loading"
                      (click)="delete(bundle)"
                    >
                      <i-bs name="trash"></i-bs>
                      <span class="visually-hidden" i18n>Delete share link bundle</span>
                    </button>
                  </div>
                </td>
              </tr>
            }
          </tbody>
        </table>
      </div>
    }
  }
</div>

<div class="modal-footer">
  <button type="button" class="btn btn-outline-secondary btn-sm" (click)="close()" i18n>Close</button>
</div>