<ul class="me-2">
  <ng-template #upToDateTpl>
    <li class="badge badge-success"
        i18n>Up to Date</li>
  </ng-template>
  <cds-toggletip  [dropShadow]="true"
                  [align]="align">
    <div  cdsToggletipButton
          class="toggleTipBtn">
    <ng-template #showStatus>
      <a  *ngIf="zone.syncstatus !== 'Not Syncing From Zone'"
          class="lead text-primary"
          i18n>{{ zone.syncstatus | titlecase }}</a>
      <a  *ngIf="zone.syncstatus === 'Not Syncing From Zone'"
          class="lead text-primary"
          i18n>Not Syncing</a>
    </ng-template>
    <li><b>Status:</b></li>
    <li *ngIf="zone.syncstatus?.includes('failed') || zone.syncstatus?.includes('error'); else showStatus">
      <i  [ngClass]="[icons.danger]"
          class="text-danger"></i>
      <a  class="lead text-danger"
          i18n>Error</a>
    </li>
  </div>
  <div cdsToggletipContent>
    <ul class="text-center">
      <li><h5><b i18n>Sync Status:</b></h5></li>
      <li *ngFor="let status of zone.fullSyncStatus">
        <span *ngIf="!status?.includes(zone.name) && !status?.includes(zone.syncstatus) && !status?.includes('failed') && !status?.includes('error')">
          <span *ngIf="status?.includes(':')">
            <b>{{ status.split(': ')[0] | titlecase }}</b>:{{ status.split(': ')[1] | titlecase}}
          </span>
          <span *ngIf="!status?.includes(':')">
            <b>{{ status | titlecase }}</b>
          </span>
        </span>
        <span *ngIf="status?.includes('failed') || status?.includes('error')">
          {{ status | titlecase }}
        </span>
      </li>
    </ul>
  </div>
  </cds-toggletip>
  <li class="mt-4 fw-bold"
      i18n>
      Last Synced:
  </li>
  <li class="badge badge-info"
      *ngIf="zone.timestamp; else upToDateTpl">{{ zone.timestamp | relativeDate }}</li>
</ul>
