<span *ngIf="metadataSyncInfo === 'no sync (zone is master)'">
  <ul class="me-2">
    <li><b i18n>Status:</b></li>
    <li>No Sync</li>
  </ul>
</span>
<span *ngIf="metadataSyncInfo !== 'no sync (zone is master)'">
  <ul class="me-2">
    <ng-template #upToDateTpl>
      <li i18n>
        <cds-tag class="tag-success">
          Up to Date
        </cds-tag>
      </li>
    </ng-template>
    <cds-toggletip  [dropShadow]="true"
                    [align]="align">
      <div cdsToggletipButton
           class="toggleTipBtn">
        <ng-template #showMetadataStatus>
          <a  *ngIf="metadataSyncInfo.syncstatus !== 'Not Syncing From Zone'"
              class="lead text-primary"
              popoverClass="rgw-overview-card-popover"
              i18n>{{ metadataSyncInfo.syncstatus | titlecase }}</a>
          <a  *ngIf="metadataSyncInfo.syncstatus === 'Not Syncing From Zone'"
              class="lead text-primary"
              i18n>Not Syncing</a>
        </ng-template>
        <li><b i18n>Status:</b></li>
        <li *ngIf="metadataSyncInfo.syncstatus?.includes('failed') || metadataSyncInfo.syncstatus?.includes('error'); else showMetadataStatus">
          <svg  [cdsIcon]="icons.danger"
                [size]="icons.size16"
                class="cds-danger-color"></svg>
          <a class="lead text-danger"
             i18n>Error</a>
        </li>
      </div>
      <div cdsToggletipContent>
        <div class="cds--popover-scroll-container">
          <ul class="text-center">
            <li><h5><b i18n>Metadata Sync Status:</b></h5></li>
            <li *ngFor="let status of metadataSyncInfo.fullSyncStatus">
              <span *ngIf="!status?.includes(metadataSyncInfo.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>
      </div>
    </cds-toggletip>
    <li class="mt-4 fw-bold"
        i18n>
        Last Synced:
    </li>
    <li *ngIf="metadataSyncInfo.timestamp; else upToDateTpl">
      <cds-tag class="tag-info">
        {{ metadataSyncInfo.timestamp | relativeDate }}
      </cds-tag>
    </li>
  </ul>
</span>
