<div class="container">
  <div class="row">
    <div class="col-md-12 m-40">
      <h1>{{'subscriptions.title' | translate}}</h1>
      <div class="row">
        <div class="col-md-12 m-40">
          @if (loading$ | async) {
            <ds-loading></ds-loading>
          }
          <ng-container *ngVar="(subscriptions$ | async) as subscriptions">

            @if (subscriptions?.pageInfo?.totalElements > 0 && (loading$ | async) !== true) {
              <ds-pagination
                [paginationOptions]="config"
                [collectionSize]="subscriptions?.pageInfo?.totalElements"
                [hideGear]="true"
                [hidePagerWhenSinglePage]="true">
                <div class="table-responsive">
                  <table id="formats" class="table table-striped table-hover" data-test="subscription-table">
                    <thead>
                      <tr>
                        <th style="width: 50%" scope="col">{{'subscriptions.table.dso' | translate}}</th>
                        <th scope="col">{{'subscriptions.table.subscription_type' | translate}}</th>
                        <th scope="col">{{'subscriptions.table.subscription_frequency' | translate}}</th>
                        <th scope="col">{{'subscriptions.table.action' | translate}}</th>
                      </tr>
                    </thead>
                    <tbody>
                      @for (subscription of subscriptions?.page; track subscription) {
                        <tr ds-subscription-view
                          [dso]="(subscription?.resource | async)?.payload"
                          [eperson]="(subscription?.eperson | async)?.payload?.id"
                          [subscription]="subscription"
                          (reload)="refresh()">
                        </tr>
                      }
                    </tbody>
                  </table>
                </div>
              </ds-pagination>
            }

            @if (subscriptions?.pageInfo?.totalElements === 0 && (loading$ | async) !== true) {
              <ds-alert [type]="AlertType.Info" data-test="empty-alert">
                {{ 'subscriptions.table.empty.message' | translate }}
              </ds-alert>
            }

          </ng-container>
        </div>

      </div>
    </div>
  </div>
</div>
