<pngx-widget-frame title="Statistics" [loading]="loading()" i18n-title>
  <ng-container content>
    <div class="list-group border-light placeholder-glow">
      @if (loading()) {
        <div class="list-group-item d-flex">
          <div class="placeholder w-50"></div>
          <span class="placeholder badge rounded-pill ms-auto" style="width: 25px;">&nbsp;</span>
        </div>
        <div class="list-group-item d-flex">
          <div class="placeholder w-25"></div>
          <span class="placeholder badge rounded-pill ms-auto" style="width: 25px;">&nbsp;</span>
        </div>
        <div class="list-group-item d-flex">
          <div class="placeholder w-25"></div>
          <span class="placeholder badge rounded-pill ms-auto" style="width: 25px;">&nbsp;</span>
        </div>
        <div class="list-group-item d-flex">
          <div class="placeholder w-25"></div>
          <span class="placeholder badge rounded-pill ms-auto" style="width: 25px;">&nbsp;</span>
        </div>
        <div class="list-group-item filetypes">
          <div class="placeholder w-100 d-block mb-2"></div>
          <div class="placeholder w-100 d-block mb-2"></div>
          <div class="placeholder w-100 d-block"></div>
        </div>
      } @else {
        @if (statistics()?.documents_inbox !== null) {
          <a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" title="Go to inbox" i18n-title href="javascript:void(0)" (click)="goToInbox()">
            <ng-container i18n>Documents in inbox</ng-container>:
            <span class="badge rounded-pill" [class.bg-primary]="statistics()?.documents_inbox > 0" [class.bg-muted]="statistics()?.documents_inbox === 0">{{statistics()?.documents_inbox}}</span>
          </a>
        }
        <a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" title="Go to documents" i18n-title routerLink="/documents/">
          <ng-container i18n>Total documents</ng-container>:
          <span class="badge bg-primary rounded-pill">{{statistics()?.documents_total}}</span>
        </a>
        <div class="list-group-item d-flex justify-content-between align-items-center" routerLink="/documents/">
          <ng-container i18n>Total characters</ng-container>:
          <span class="badge bg-secondary text-light rounded-pill">{{statistics()?.character_count | number}}</span>
        </div>
        @if (statistics()?.current_asn) {
          <div class="list-group-item d-flex justify-content-between align-items-center" routerLink="/documents/">
            <ng-container i18n>Current ASN</ng-container>:
            <span class="badge bg-secondary text-light rounded-pill">{{statistics()?.current_asn}}</span>
          </div>
        }
      }
      @if (statistics()?.document_file_type_counts?.length > 1) {
        <div class="list-group-item filetypes">
          <div class="d-flex justify-content-between align-items-center my-2">
            <div class="progress flex-grow-1">
              @for (filetype of statistics()?.document_file_type_counts; track filetype; let i = $index; let last = $last) {
                <div
                  class="progress-bar bg-primary"
                  role="progressbar"
                  [ngbPopover]="getFileTypeName(filetype)"
                  i18n-ngbPopover
                  triggers="mouseenter:mouseleave"
                  (click)="filterByFileType(filetype)"
                  [attr.aria-label]="getFileTypeName(filetype)"
                  [class.me-1px]="!last"
                  [style.width]="getFileTypePercent(filetype) + '%'"
                  [style.opacity]="getItemOpacity(i)"
                  [attr.aria-valuenow]="getFileTypePercent(filetype)"
                  aria-valuemin="0"
                  aria-valuemax="100">
                </div>
              }
            </div>
          </div>
          <div class="d-flex flex-wrap align-items-start">
            @for (filetype of statistics()?.document_file_type_counts; track filetype; let i = $index) {
              <div class="d-flex">
                <div class="text-nowrap me-2" [class.cursor-pointer]="!filetype.is_other" (click)="filterByFileType(filetype)">
                  <span class="badge rounded-pill bg-primary d-inline-block p-0 me-1" [style.opacity]="getItemOpacity(i)"></span>
                  <small class="text-nowrap"><span class="fw-bold">{{ getFileTypeExtension(filetype) }}</span>&nbsp;<span class="text-muted">({{getFileTypePercent(filetype) | number: '1.0-1'}}%)</span></small>
                </div>
              </div>
            }
          </div>
        </div>
      }
    </div>

    <div class="list-group border-light mt-3">
      <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }">
        @if (loading()) {
          <div class="placeholder-glow list-group-item">
            <span class="placeholder w-100"></span>
          </div>
        }
        @if (statistics()?.tag_count > 0) {
          <a class="list-group-item d-flex justify-content-between align-items-center" routerLink="/tags/">
            <ng-container i18n>Tags</ng-container>:
            <span class="badge bg-secondary text-light rounded-pill">{{statistics()?.tag_count | number}}</span>
          </a>
        }
      </ng-container>
      <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Correspondent }">
        @if (loading()) {
          <div class="placeholder-glow list-group-item">
            <span class="placeholder w-100"></span>
          </div>
        }
        @if (statistics()?.correspondent_count > 0) {
          <a class="list-group-item d-flex justify-content-between align-items-center" routerLink="/correspondents/">
            <ng-container i18n>Correspondents</ng-container>:
            <span class="badge bg-secondary text-light rounded-pill">{{statistics()?.correspondent_count | number}}</span>
          </a>
        }
      </ng-container>
      <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.DocumentType }">
        @if (loading()) {
          <div class="placeholder-glow list-group-item">
            <span class="placeholder w-100"></span>
          </div>
        }
        @if (statistics()?.document_type_count > 0) {
          <a class="list-group-item d-flex justify-content-between align-items-center" routerLink="/documenttypes/">
            <ng-container i18n>Document Types</ng-container>:
            <span class="badge bg-secondary text-light rounded-pill">{{statistics()?.document_type_count | number}}</span>
          </a>
        }
      </ng-container>
      <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.StoragePath }">
        @if (loading()) {
          <div class="placeholder-glow list-group-item">
            <span class="placeholder w-100"></span>
          </div>
        }
        @if (statistics()?.storage_path_count > 0) {
          <a class="list-group-item d-flex justify-content-between align-items-center" routerLink="/storagepaths/">
            <ng-container i18n>Storage Paths</ng-container>:
            <span class="badge bg-secondary text-light rounded-pill">{{statistics()?.storage_path_count | number}}</span>
          </a>
        }
      </ng-container>
    </div>
  </ng-container>
</pngx-widget-frame>
