@if (expandedRow) {
  <nav
    ngbNav
    #nav="ngbNav"
    class="nav-tabs"
    cdStatefulTab="sync-policy-details">
    <ng-container ngbNavItem="flow">
      <a
        ngbNavLink
      i18n>Flow</a>
      <ng-template ngbNavContent>
        <legend>
          Symmetrical
          <cd-help-text>
            It can define symmetrical data flow, in which multiple zones sync data from each other.
          </cd-help-text>
        </legend>
        <cd-table
          #table
          [autoReload]="false"
          [data]="symmetricalFlowData"
          [columns]="symmetricalFlowCols"
          columnMode="flex"
          selectionType="multiClick"
          [searchableObjects]="true"
          [hasDetails]="false"
          [serverSide]="false"
          [count]="0"
          [maxLimit]="25"
          [toolHeader]="true"
          (updateSelection)="updateSelection($event, flowType.symmetrical)"
          (fetchData)="loadData($event)">
          <div class="table-actions">
            <cd-table-actions
              [permission]="permission"
              [selection]="symFlowSelection"
              class="btn-group"
              [tableActions]="symFlowTableActions" >
            </cd-table-actions>
          </div>
        </cd-table>
        <legend>
          Directional
          <cd-help-text>
            It can define directional data flow, in which the data moves in one way, from one zone to another.
          </cd-help-text>
        </legend>
        <cd-table
          #table
          [autoReload]="false"
          [data]="directionalFlowData"
          [columns]="directionalFlowCols"
          columnMode="flex"
          selectionType="multiClick"
          [searchableObjects]="true"
          [hasDetails]="false"
          [serverSide]="false"
          [count]="0"
          [maxLimit]="25"
          [toolHeader]="true"
          (updateSelection)="updateSelection($event, flowType.directional)"
          (fetchData)="loadData($event)">
          <div class="table-actions">
            <cd-table-actions
              [permission]="permission"
              [selection]="dirFlowSelection"
              class="btn-group"
              [tableActions]="dirFlowTableActions">
            </cd-table-actions>
          </div>
        </cd-table>
      </ng-template>
    </ng-container>
    <ng-container ngbNavItem="pipe">
      <a ngbNavLink
         i18n>Pipe</a>
      <ng-template ngbNavContent>
        <legend i18n>
          Pipe
          <cd-help-text>
            A pipe defines the actual buckets that can use these data flows, and the properties that are associated with it.
          </cd-help-text>
        </legend>
        <cd-table
          #table
          [data]="pipeData"
          [columns]="pipeCols"
          selectionType="multiClick"
          [searchableObjects]="true"
          [hasDetails]="false"
          [serverSide]="false"
          [toolHeader]="true"
          (updateSelection)="pipeSelection = $event"
          (fetchData)="loadData($event)">
          <div class="table-actions">
            <cd-table-actions
              [permission]="permission"
              [selection]="pipeSelection"
              class="btn-group"
              [tableActions]="pipeTableActions">
            </cd-table-actions>
          </div>
        </cd-table>
      </ng-template>
    </ng-container>
  </nav>
  <div [ngbNavOutlet]="nav"></div>
}

<ng-template #deleteTpl>
  <cd-alert-panel type="danger"
                  i18n>
    Deleting {{ resourceType | upperFirst }} may disrupt data synchronization
  </cd-alert-panel>
</ng-template>