<div class="card">
    @if(data){
        <div class="card-header d-block border-0">
            <h4 class="card-title">

                {{data?.notifications?.data?.['mailsubject']}}
                <span class="badge badge-success badge-notify br-13 ms-2 mt-0"
                    [ngStyle]="{'background-color' : data?.notifications?.data?.mailsendtagcolor}">
                    {{data?.notifications?.data?.['mailsendtag']}}</span>
            </h4>
            <div class="mt-2">
                <span class="badge badge-light mx-1">{{data?.notifications?.created_at | custtimezone :
                    data?.setting?.original?.date_format : undefined : timezone ?? 'UTC' }}</span>
                <span class="badge badge-light">{{data?.notifications?.created_at | custtimezone :
                    data?.setting?.original?.time_format : undefined : timezone ?? 'UTC'}}</span>
            </div>
        </div>
        <div class="card-body pt-1" [innerHTML]="sanitizeHtml(data?.notifications?.data?.['mailtext'])">
        </div>
    }@else {
        <div class="card-header d-block border-0">
            <h4 class="card-title">
                <span class="line-skeleton w-40 d-block me-auto mb-2"></span>
            </h4>
            <div class="mt-2">
                <span class="line-skeleton w-10 d-block  mb-2"></span>
            </div>
            <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
            <span class="line-skeleton w-70 d-block me-auto mb-2"></span>
        </div>
    }
</div>