<cd-modal [modalRef]="activeModal">
  <ng-container i18n="form title"
                class="modal-title">{{ action | titlecase }} Pipe</ng-container>

  <ng-container class="modal-content">
    <form name="pipeForm"
          #frm="ngForm"
          [formGroup]="pipeForm"
          novalidate>
      <div class="modal-body">
        <div class="form-group row">
          <label class="cd-col-form-label required"
                 for="pipe_id"
                 i18n>Name</label>
          <div class="cd-col-form-input">
            <input class="form-control"
                   type="text"
                   placeholder="Pipe Name..."
                   id="pipe_id"
                   name="pipe_id"
                   formControlName="pipe_id"
                   [readonly]="editing"/>
          </div>
        </div>
          <div class="form-group row">
            <label class="cd-col-form-label required"
                   for="source_zone"
                   i18n>Source Zone </label>
            <div class="cd-col-form-input">
              <ng-container *ngTemplateOutlet="zoneMultiSelect;context: { name: 'source_zones', zone: sourceZones }"></ng-container>
            </div>
          </div>
          <div class="form-group row">
            <label class="cd-col-form-label required"
                   for="destination_zone"
                   i18n>Destination Zone</label>
            <div class="cd-col-form-input">
              <ng-container *ngTemplateOutlet="zoneMultiSelect;context: { name: 'destination_zones', zone: destZones }"></ng-container>
            </div>
          </div>
        <div class="form-group row">
          <label class="cd-col-form-label"
                 for="bucket"
                 i18n>Bucket Name</label>
          <div class="cd-col-form-input">
            <input id="bucket"
                   name="bucket"
                   class="form-control"
                   type="text"
                   i18n-placeholder
                   placeholder="Bucket Name..."
                   formControlName="bucket_name"/>
          </div>
        </div>
        <div class="form-group row">
          <label class="cd-col-form-label"
                 for="source_bucket"
                 i18n>Source Bucket</label>
          <div class="cd-col-form-input">
            <input id="source_bucket"
                   name="source_bucket"
                   class="form-control"
                   type="text"
                   i18n-placeholder
                   placeholder="Source Bucket Name..."
                   formControlName="source_bucket"/>
            <cd-help-text>
              <span i18n>{{ allBucketSelectedHelpText }}</span>
            </cd-help-text>
          </div>
          </div>
        <div class="form-group row">
          <label class="cd-col-form-label"
                 for="dest_bucket"
                 i18n>Destination Bucket</label>
          <div class="cd-col-form-input">
            <input id="dest_bucket"
                   name="dest_bucket"
                   class="form-control"
                   type="text"
                   i18n-placeholder
                   placeholder="Destination Bucket Name..."
                   formControlName="destination_bucket"/>
            <cd-help-text>
              <span i18n>{{ allBucketSelectedHelpText }}</span>
            </cd-help-text>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <cd-form-button-panel (submitActionEvent)="submit()"
                              [form]="pipeForm"
                              [submitText]="(action | titlecase) + ' ' + 'Pipe'">
        </cd-form-button-panel>
      </div>
    </form>
  </ng-container>
</cd-modal>

<ng-template #zoneMultiSelect
             let-name="name"
             let-zone="zone">
  <cd-select-badges id="{{ name }}"
                    name="{{ name }}"
                    [customBadges]="zone.customBadges"
                    [customBadgeValidators]="zone.data.validators"
                    [messages]="zone.data.messages"
                    [data]="zone.data.selected"
                    [options]="zone.data.available"
                    (selection)="onZoneSelection(name)">
  </cd-select-badges>
  <i *ngIf="zone.data.selected.length <= 0"
     i18n-title
     title="Pipe should be associated with {{ name?.split('_').join(' ') }}"
     class="{{ icons.warning }} icon-warning-color">
  </i>
  <span class="invalid-feedback"
        *ngIf="pipeForm.showError(name, frm, 'required')"
        i18n>{{ name?.split('_').join(' ') }} selection is required!
  </span>
</ng-template>
