<section class="content">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col mb-2">
                <span class="mb-0 page-title">{{'EMAIL_LOGS' | translate}}
                    <app-page-help-text code="EMAIL_LOGS"></app-page-help-text>
                </span>
            </div>
            <div class="col-auto">
                <ul class="breadcrumb-list">
                    <li class="breadcrumb-item bcrumb-1">
                        <button *hasClaim="'EMAIL_LOG_SET_RETENTION_PERIOD'" (click)="manageLogsRetention()"
                            class="btn btn-primary btn-sm">
                            <i-feather name="settings" class="small-icon me-1"></i-feather>
                            <span class="d-none d-sm-inline"> {{'SETTINGS' | translate}}</span>
                        </button>
                    </li>
                </ul>
            </div>
        </div>
        <div class="card">
            <div class="body">
                <div class="table-responsive">
                    <div class="grid-height-large">
                        <table mat-table [dataSource]="dataSource" matSort matSortActive="sentAt"
                            matSortDirection="desc">
                            <ng-container matColumnDef="action">
                                <th class="table-column-150" mat-header-cell *matHeaderCellDef>
                                    {{'ACTION' | translate}}
                                </th>
                                <td class="table-column-150" mat-cell *matCellDef="let log">
                                    <button type="button" class="btn btn-primary btn-sm"
                                        (click)="openEmailLogDetails(log)">
                                        <i-feather name="info" class="small-icon"></i-feather>
                                    </button>
                                    <button *hasClaim="'LOGS_DELETE_EMAIL_LOG'" type="button"
                                        class="btn btn-danger btn-sm  ms-2" (click)="deleteLog(log)">
                                        <i-feather name="trash" class="small-icon"></i-feather>

                                    </button>
                                </td>
                            </ng-container>
                            <ng-container matColumnDef="sentAt">
                                <th class="table-column-190" mat-header-cell *matHeaderCellDef mat-sort-header>
                                    {{'DATE'| translate}}
                                </th>
                                <td class="table-column-190" mat-cell *matCellDef="let log">
                                    {{log?.sentAt | utcToLocalTime:'short'}} </td>
                            </ng-container>

                            <ng-container matColumnDef="senderEmail">
                                <th class="table-column-190" mat-header-cell *matHeaderCellDef mat-sort-header>
                                    {{'FROM' | translate}} </th>
                                <td class="table-column-190" mat-cell *matCellDef="let log">
                                    {{log.senderEmail}}
                                </td>
                            </ng-container>
                            <ng-container matColumnDef="recipientEmail">
                                <th class="table-column-150" mat-header-cell *matHeaderCellDef mat-sort-header>
                                    {{'TO' | translate}}
                                </th>
                                <td class="table-column-150" mat-cell *matCellDef="let log">
                                    {{log.recipientEmail}}
                                </td>
                            </ng-container>
                            <ng-container matColumnDef="subject">
                                <th class="table-column-150" mat-header-cell *matHeaderCellDef mat-sort-header>
                                    {{'SUBJECT'| translate}}
                                </th>
                                <td class="table-column-150" mat-cell *matCellDef="let log">
                                    {{log.subject}}
                                </td>
                            </ng-container>
                            <ng-container matColumnDef="status">
                                <th class="table-column-150" mat-header-cell *matHeaderCellDef mat-sort-header>
                                    {{'STATUS'| translate}}
                                </th>
                                <td class="table-column-150" mat-cell *matCellDef="let log">
                                    <span *ngIf="log?.status.toLocaleLowerCase() =='sent'"
                                        class="badge bg-success">{{'SUCCESS' | translate}}</span>
                                    <span *ngIf="log?.status.toLocaleLowerCase() =='failed'" class="badge bg-danger">
                                        {{'FAILED' | translate}}
                                    </span>
                                </td>
                            </ng-container>
                            <ng-container matColumnDef="attachment">
                                <th class="table-column-150" mat-header-cell *matHeaderCellDef>
                                    {{'ATTACHMENTS'| translate}}
                                </th>
                                <td class="table-column-150" mat-cell *matCellDef="let log">
                                    {{log.emailLogAttachments.length}}
                                </td>
                            </ng-container>

                            <ng-container matColumnDef="action-search">
                                <th class="table-column-50" class="pr-5" mat-header-cell *matHeaderCellDef> </th>
                            </ng-container>

                            <ng-container matColumnDef="sentAt-search">
                                <th class="table-column-50" class="pr-5" mat-header-cell *matHeaderCellDef>
                                </th>
                            </ng-container>

                            <ng-container matColumnDef="senderEmail-search">
                                <th class="table-column-50" class="pr-5" mat-header-cell *matHeaderCellDef>
                                    <input placeholder="{{'FROM' | translate}}" type="text"
                                        class="form-control form-control-sm" [(ngModel)]="SenderFilter">
                                </th>
                            </ng-container>

                            <ng-container matColumnDef="recipientEmail-search">
                                <th class="table-column-50" class="pr-5" mat-header-cell *matHeaderCellDef>
                                    <input placeholder="{{'TO' | translate}}" type="text"
                                        class="form-control form-control-sm" [(ngModel)]="RecipientFilter">
                                </th>
                            </ng-container>

                            <ng-container matColumnDef="subject-search">
                                <th class="table-column-50" class="pr-5" mat-header-cell *matHeaderCellDef>
                                    <input placeholder="{{'SUBJECT' | translate}}" type="text"
                                        class="form-control form-control-sm" [(ngModel)]="SubjectFilter">
                                </th>
                            </ng-container>

                            <ng-container matColumnDef="status-search">
                                <th class="table-column-50" class="pr-5" mat-header-cell *matHeaderCellDef>
                                </th>
                            </ng-container>
                            <ng-container matColumnDef="attachment-search">
                                <th class="table-column-50" class="pr-5" mat-header-cell *matHeaderCellDef>
                                </th>
                            </ng-container>

                            <ng-container matColumnDef="footer">
                                <td mat-footer-cell colspan="7" *matFooterCellDef>
                                    <mat-paginator [length]="emailLogResource.totalCount"
                                        [pageSize]="emailLogResource.pageSize" [pageSizeOptions]="[10, 20, 30]">
                                    </mat-paginator>
                                </td>
                            </ng-container>
                            <tr *matNoDataRow>
                                <td colspan="9">
                                    <span class="p-4 mt-4">
                                        <b> {{'NO_DATA_FOUND' | translate}}</b>
                                    </span>
                                </td>
                            </tr>
                            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                            <tr mat-header-row *matHeaderRowDef="displayedSearchColumns;sticky: true"
                                class="example-second-header-row"> </tr>
                            <tr mat-footer-row *matFooterRowDef="footerToDisplayed"></tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>