<section class="content">
  <div class="content-block">
    <div class="block-header">
      <div class="breadcrumb-main">
        <div class="row align-items-center">
          <div class="col">
            <span class="page-title">{{ "ALL_DOCUMENTS" | translate }}
              <app-page-help-text code="ALL_DOCUMENTS"></app-page-help-text>
            </span>
          </div>
          <div class="col-auto">
            <ul class="breadcrumb-list">
              <li class="breadcrumb-item bcrumb-1">
                <button *hasClaim="'ALL_DOCUMENTS_CREATE_DOCUMENT'" [routerLink]="['/documents/add']"
                  class="btn btn-success btn-sm">
                  <i-feather name="Plus" class="btn-success small-icon"></i-feather>
                  <span class="d-none d-sm-inline"> {{'ADD_DOCUMENT' | translate}}</span>
                </button>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
        <div class="card">
          <div class="body">
            <div class="row margin-2">
              <div class="col-md-3">
                <input class="form-control" placeholder="{{'SEARCH_DOCUMENT_BY_NAME_OR_DESCRIPTION' | translate}}"
                  type="text" #input>
              </div>
              <div class="col-md-3">
                <input class="form-control" placeholder="{{'SEARCH_DOCUMENT_BY_META_TAGS' | translate}}" #metatag>
              </div>
              <div class="col-md-3">
                <ng-select placeholder="{{'SELECT_CATEGORY' | translate}}" (change)="onCategoryChange($event)">
                  <ng-option *ngFor="let category of categoryStore.categories()" [value]="category.id">
                    <div class="country-item"
                      [ngStyle]="this.direction === 'rtl'? {'margin-right.px': category.deafLevel* 20} : {'margin-left.px': category.deafLevel* 20}">
                      <div *ngIf="!category.parentId">
                        <b> {{category.name}}</b>
                      </div>
                      <div *ngIf="category.parentId">
                        {{category.name}}
                      </div>
                    </div>
                  </ng-option>
                </ng-select>
              </div>
              <div class="col-md-3">
                <ng-select (change)="onStorageChange($event)" placeholder="{{'STORAGE' | translate}}">
                  <ng-option [value]="'local'">{{'LOCAL' | translate}}</ng-option>
                  <ng-option [value]="'s3'">{{'S3' | translate}}</ng-option>
                </ng-select>
              </div>
              <div class="col-md-3">
                <input [max]="max" class="form-control" placeholder="{{'CREATED_DATE' | translate}}"
                  [formControl]="createdDate" [owlDateTimeTrigger]="date1" [owlDateTime]="date1">
                <owl-date-time #date1 [pickerType]="'calendar'"></owl-date-time>
              </div>
              <div class="col-md-3">
                <ng-select (change)="onClientChange($event)" placeholder="{{ 'SELECT_CLIENT' | translate }}">
                  <ng-option *ngFor="let client of clientStore.clients()" [value]="client.id">
                    <span> {{ client.companyName }} </span>
                  </ng-option>
                </ng-select>
              </div>
              <div class="col-md-3">
                <ng-select (change)="onDocumentStatusChange($event)" placeholder="{{'SELECT_STATUS' | translate}}">
                  <ng-option *ngFor="let documentStatus of documentStatusStore.statusList()"
                    [value]="documentStatus.id">
                    <span [ngStyle]="{'color': documentStatus?.colorCode}"> {{
                      documentStatus.name }} </span>
                  </ng-option>
                </ng-select>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <div class="table-responsive">
                  <div class="grid-height-small">
                    <table mat-table [dataSource]="dataSource" class="w-100" matSort matSortActive="createdDate"
                      matSortDirection="desc" matSortDisableClear>
                      <ng-container matColumnDef="select">
                        <th class="table-column-fix-30" mat-header-cell *matHeaderCellDef>
                          <ng-container *ngIf="selection.isEmpty()">
                            <mat-checkbox (change)="$event ? masterToggle() : null" color="primary"
                              [checked]="selection.hasValue() && isAllSelected()"
                              [indeterminate]="selection.hasValue() && !isAllSelected()">
                            </mat-checkbox>
                          </ng-container>
                          <ng-container *ngIf="!selection.isEmpty()">
                            <button mat-mini-fab class="btn btn-primary btn-sm" matTooltipPosition="above"
                              (click)="onSharedSelectDocument()" *hasClaim="'ALL_DOCUMENTS_SHARE_DOCUMENT'">
                              <mat-icon>share</mat-icon>
                            </button>
                          </ng-container>
                        </th>
                        <td mat-cell *matCellDef="let row">
                          <mat-checkbox (click)="$event.stopPropagation()" color="primary"
                            (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
                          </mat-checkbox>
                        </td>
                      </ng-container>
                      <ng-container matColumnDef="action">
                        <th mat-header-cell *matHeaderCellDef>{{'ACTION' | translate}}
                        </th>
                        <td mat-cell class="table-column-fix-100" *matCellDef="let document">
                          <div class="row">
                            <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Action">
                              <mat-icon>more_vert</mat-icon>
                            </button>
                            <mat-menu #menu="matMenu">
                              <button *hasClaim="'ALL_DOCUMENTS_EDIT_DOCUMENT'" mat-menu-item
                                class="btn btn-light btn-sm" (click)="editDocument(document)">
                                <mat-icon>edit</mat-icon>
                                {{'EDIT' | translate}}
                              </button>
                              <button *hasClaim="'ALL_DOCUMENTS_SHARE_DOCUMENT'" mat-menu-item
                                class="btn btn-light btn-sm" (click)="manageDocumentPermission(document)" type="button">
                                <mat-icon>share</mat-icon>
                                {{'SHARE'| translate}}
                              </button>
                              <button *hasClaim="'ALL_DOCUMENTS_MANAGE_SHARABLE_LINK'" mat-menu-item
                                (click)="onCreateShareableLink(document)">
                                <mat-icon> link</mat-icon>
                                {{'GET_SHAREABLE_LINK' | translate}}
                              </button>
                              <button mat-menu-item (click)="signDocument(document)"
                                *hasClaim="'ALL_DOC_ADD_SIGNATURE'">
                                <mat-icon> draw</mat-icon>
                                {{'DOCUMENT_SIGNATURE' | translate}}
                              </button>
                              <button mat-menu-item (click)="generateSummary(document)"
                                *hasClaim="'ALL_DOC_GENERATE_SUMMARY'">
                                <mat-icon> memory</mat-icon>
                                {{'AI_POWERED_SUMMARY' | translate}}
                              </button>
                              <ng-container *ngIf="!document.documentWorkflowId || document.isWorkflowCompleted">
                                <button *hasClaim="'ALL_DOCUMENTS_START_WORKFLOW'" mat-menu-item
                                  class="btn btn-light btn-sm" (click)="manageWorkflowInstance(document)">
                                  <mat-icon>sync_alt</mat-icon>
                                  {{ "START_WORKFLOW" | translate }}
                                </button>
                              </ng-container>
                              <button *hasClaim="'ALL_DOCUMENTS_VIEW_DETAIL'" class="btn btn-light btn-sm" mat-menu-item
                                [routerLink]="['/document-details', document.id]" type="button">
                                <mat-icon>info</mat-icon>
                                {{'DETAILS' | translate}}
                              </button>
                              <button class="btn btn-light btn-sm" *hasClaim="'ALL_DOCUMENTS_DOWNLOAD_DOCUMENT'"
                                mat-menu-item (click)="downloadDocument(document)" type="button">
                                <mat-icon>download</mat-icon>
                                {{'DOWNLOAD' | translate}}
                              </button>
                              <button mat-menu-item (click)="watermarkDocument(document)" *hasClaim="'ALL_DOC_WATERMARK'">
                                <mat-icon> branding_watermark</mat-icon>
                                {{'ADD_WATERMARK' | translate}}
                              </button>
                              <button mat-menu-item class="btn btn-light btn-sm"
                                *hasClaim="'ALL_DOCUMENTS_UPLOAD_NEW_VERSION'" (click)="uploadNewVersion(document)"
                                type="button">
                                <mat-icon>upload</mat-icon>
                                {{'UPLOAD_NEW_VERSION_FILE' | translate}}
                              </button>
                              <button mat-menu-item *hasClaim="'ALL_DOCUMENTS_VIEW_VERSION_HISTORY'"
                                (click)="onVersionHistoryClick(document)">
                                <mat-icon> history</mat-icon>
                                {{'VERSION_HISTORY' | translate}}
                              </button>
                              <button class="btn btn-light btn-sm" *hasClaim="'ALL_DOCUMENTS_MANAGE_COMMENT'"
                                mat-menu-item (click)="addComment(document)" type="button">
                                <mat-icon> chat</mat-icon>
                                {{'COMMENT' | translate}}
                              </button>
                              <button class="btn btn-light btn-sm" *hasClaim="'ALL_DOCUMENTS_ADD_REMINDER'"
                                mat-menu-item (click)="addReminder(document)" type="button">
                                <mat-icon>notifications</mat-icon>
                                {{'ADD_REMINDER' | translate}}
                              </button>
                              <button class="btn btn-light btn-sm" *hasClaim="'ALL_DOCUMENTS_SEND_EMAIL'" mat-menu-item
                                (click)="sendEmail(document)" type="button">
                                <mat-icon>forward_to_inbox</mat-icon>
                                {{'SEND_EMAIL' | translate}}
                              </button>
                              <ng-container *ngIf="document.isIndexable && !document.isIndexed">
                                <button *hasClaim="'DEEP_SEARCH_ADD_INDEXING'" mat-menu-item
                                  class="btn btn-light btn-sm" (click)="addIndexing(document)" type="button">
                                  <mat-icon>find_in_page</mat-icon>
                                  {{'ADD_INDEXING' | translate}}
                                </button>
                              </ng-container>
                              <ng-container *ngIf="document.isIndexable && document.isIndexed">
                                <button *hasClaim="'DEEP_SEARCH_REMOVE_INDEXING'" mat-menu-item
                                  class="btn btn-light btn-sm" (click)="removeIndexing(document)" type="button">
                                  <mat-icon>zoom_out</mat-icon>
                                  {{'REMOVE_INDEXING' | translate}}
                                </button>
                              </ng-container>
                              <button *hasClaim="'ALL_DOCUMENTS_ARCHIVE_DOCUMENT'" mat-menu-item
                                class="btn btn-light btn-sm" (click)="archiveDocument(document)" type="button">
                                <mat-icon>archive</mat-icon>
                                {{'ARCHIVE' | translate}}
                              </button>
                              <button *hasClaim="'ALL_DOCUMENTS_DELETE_DOCUMENT'" mat-menu-item
                                class="btn btn-light btn-sm" (click)="deleteDocument(document)" type="button">
                                <mat-icon>delete</mat-icon>
                                {{'DELETE' | translate}}
                              </button>
                            </mat-menu>
                            <ng-container *ngIf="document.commentCount > 0">
                              <button *hasClaim="'ALL_DOCUMENTS_MANAGE_COMMENT'" (click)="addComment(document)"
                                mat-icon-button class="ms-2" aria-label="Comments">
                                <mat-icon>chat</mat-icon>
                              </button>
                            </ng-container>
                            <ng-container *ngIf="document.versionCount > 0">
                              <button (click)="onVersionHistoryClick(document)" mat-icon-button class="ms-2"
                                *hasClaim="'ALL_DOCUMENTS_MANAGE_COMMENT'" aria-label="History">
                                <mat-icon>history</mat-icon>
                              </button>
                            </ng-container>
                          </div>
                        </td>
                      </ng-container>
                      <ng-container matColumnDef="workflowName">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>
                          {{'WORKFLOW_NAME' | translate}} </th>
                        <td mat-cell *matCellDef="let document">
                          <a class="doc-link" (click)="viewVisualWorkflow(document)">
                            <span
                              [ngClass]="{'text-success': document?.documentWorkflowStatus == 'Completed', 'text-danger':document?.documentWorkflowStatus == 'Cancelled'}">
                              {{document.workflowName}}
                            </span>
                          </a>
                        </td>
                      </ng-container>
                      <ng-container matColumnDef="name">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'NAME' | translate}} </th>
                        <td mat-cell *matCellDef="let document" class="doc-name">
                          <a class="doc-link" (click)="onDocumentView(document)">{{document.name}}</a>
                        </td>
                      </ng-container>
                      <ng-container matColumnDef="categoryName">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'DOCUMENT_CATEGORY' | translate}}</th>
                        <td mat-cell *matCellDef="let document"> {{document.categoryName}} </td>
                      </ng-container>
                      <ng-container matColumnDef="location">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'STORAGE' | translate}}</th>
                        <td mat-cell *matCellDef="let document"> {{document.location.toUpperCase() | translate}} </td>
                      </ng-container>
                      <ng-container matColumnDef="companyName">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'CLIENT' | translate}}</th>
                        <td mat-cell *matCellDef="let document"> {{document?.companyName | translate}} </td>
                      </ng-container>
                      <ng-container matColumnDef="statusName">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'STATUS' | translate}}</th>
                        <td mat-cell *matCellDef="let document"> <span [ngStyle]="{'color': document?.colorCode}">
                            {{document?.statusName | translate}} </span> </td>
                      </ng-container>
                      <ng-container matColumnDef="createdDate">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'CREATED_DATE' | translate}} </th>
                        <td mat-cell *matCellDef="let document"> {{document?.createdDate | utcToLocalTime:'shortDate' }}
                        </td>
                      </ng-container>
                      <ng-container matColumnDef="createdBy">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'CREATED_BY' | translate}} </th>
                        <td mat-cell *matCellDef="let document"> {{document.createdByName}} </td>
                      </ng-container>
                      <ng-container matColumnDef="signDate">
                        <th mat-header-cell *matHeaderCellDef> {{'SIGN_DATE' | translate}} </th>
                        <td mat-cell *matCellDef="let document">
                          @if(document?.signDate){
                          {{document?.signDate | utcToLocalTime:'shortDate'}}
                          }
                        </td>
                      </ng-container>
                      <ng-container matColumnDef="signByUserName">
                        <th mat-header-cell *matHeaderCellDef> {{'SIGN_BY' | translate}} </th>
                        <td mat-cell *matCellDef="let document">
                          @if(document?.signByUserName){
                          <span class="bg-success text-light">
                            <i-feather name="check" class="small-icon"></i-feather></span> {{document?.signByUserName}}
                          }
                        </td>
                      </ng-container>
                      <ng-container matColumnDef="retentionPeriod">
                        <th mat-header-cell *matHeaderCellDef> {{'RETENTION_PERIOD' | translate}} </th>
                        <td mat-cell *matCellDef="let document">
                          @if(document?.retentionAction?.toString()){
                          <small>
                            {{document?.retentionPeriod}} ({{'DAYS' | translate}}) {{document?.retentionAction |
                            retentionAction}}
                          </small>
                          }
                        </td>
                      </ng-container>
                      <ng-container matColumnDef="footer">
                        <td mat-footer-cell colspan="13" *matFooterCellDef>
                          <mat-paginator [length]="documentResource.totalCount" [pageSize]="documentResource.pageSize"
                            [pageSizeOptions]="[10, 20, 30]">
                          </mat-paginator>
                        </td>
                      </ng-container>
                      <tr *matNoDataRow>
                        <td colspan="13">
                          <div class="m-2">
                            <b> {{'NO_DATA_FOUND' | translate}}</b>
                          </div>
                        </td>
                      </tr>
                      <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"></tr>
                      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                      <tr mat-footer-row *matFooterRowDef="footerToDisplayed;sticky: true"></tr>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>