<div class="d-flex">
    <span mat-dialog-title class="dialog-title">{{'EMAIL_LOG_DETAIL' | translate}} </span>
    <button mat-icon-button class="ms-auto" (click)="close()">
        <mat-icon class="close-icon" color="warn">close</mat-icon>
    </button>
</div>
<mat-dialog-content>
    <div class="modal-body">
        <div class="row">
            <div class="col-md-12 mb-2">
                <label class="fw-bold">{{'DATE' | translate}}: </label>
                <span>{{data.sentAt | utcToLocalTime:'short'}}</span>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 mb-2">
                <label for="staticEmail" class="fw-bold">
                    {{"FROM" | translate}}
                </label>
                <span class="form-control">{{data.senderEmail}}</span>
            </div>
            <div class="col-md-6 mb-2">
                <label for="source" class="fw-bold">
                    {{"TO" | translate}}
                </label>
                <span type="text" class="form-control">{{data.recipientEmail}}</span>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 mb-2">
                <label for="staticEmail" class="fw-bold">
                    {{"SUBJECT" | translate}}
                </label>
                <span class="form-control">{{data.subject}}</span>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 mb-2">
                <label for="staticEmail" class="fw-bold">
                    {{"BODY" | translate}}
                </label>
                <div class="border p-3" [innerHTML]="data.body"></div>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-md-4">
                <label for="staticEmail" class="fw-bold me-2">
                    {{"STATUS" | translate}} :
                </label>
                <span *ngIf="data?.status.toLocaleLowerCase() =='sent'" class="badge bg-success">
                    {{'SUCCESS' | translate}}
                </span>
                <span *ngIf="data?.status.toLocaleLowerCase() =='failed'" class="badge bg-danger">
                    {{'FAILED' | translate}}
                </span>
            </div>
            <div class="col-md-8" *ngIf="data?.emailLogAttachments?.length > 0">
                <label for="staticEmail" class="fw-bold me-2">
                    {{"ATTACHMENTS" | translate}} :
                </label>
                <div *ngFor="let attachment of data.emailLogAttachments">
                    <a class="link-primary">{{attachment.name}}</a>
                    <span (click)="downloadAttachment(attachment)">
                        <i-feather name="download" class="small-icon text-success ms-2 cursor-pointer"></i-feather>
                    </span>
                </div>
            </div>
        </div>
        <div class="row" *ngIf="data.errorMessage">
            <div class="col-md-12">
                <label><strong> {{'ERROR' | translate}} : </strong></label>
                <span class="text-danger form-control">{{data.errorMessage}}</span>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-md-12">
                <button class="btn btn-danger btn-sm" (click)="close()">
                    <i-feather name="x-circle" class="small-icon"></i-feather> {{'CANCEL' | translate}}
                </button>
            </div>
        </div>
    </div>
</mat-dialog-content>