<admin-page-header [title]="'Notification view'"></admin-page-header>
<div class="col-xl-12 col-lg-12 col-md-12">
    <div class="card">
        @if(notifications){
            <div class="card-header d-block border-0">
                <h4 class="card-title">
                    {{notifications?.data?.['mailsubject']}}
                    <span class="badge badge-success badge-notify br-13 ms-2 mt-0"
                        style="background-color: url('{{notifications?.data?.mailsendtagcolor}}')">{{notifications?.data?.['mailsendtag']}}</span>
                </h4>
                <div class="mt-2">
                    <span class="badge badge-light mx-1">{{notifications?.created_at | custtimezone : setting?.date_format :
                        undefined : timezone ?? 'UTC'}}</span>
                    <span class="badge badge-light">{{notifications?.created_at | custtimezone : undefined
                        :setting?.time_format== 'h:i A' ? 'h:mm a' : setting?.time_format : timezone ?? 'UTC' }}</span>
                </div>
            </div>
            <div class="card-body pt-1" [innerHTML]="sanitizeHtml(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>
</div>