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

  <ng-container class="modal-content">
    <form name="flowForm"
          #frm="ngForm"
          [formGroup]="currentFormGroupContext"
          novalidate>
      <div class="modal-body">
        <div class="form-group row">
          <label class="cd-col-form-label required"
                 for="flow_id"
                 i18n>Name</label>
          <div class="cd-col-form-input">
            <input class="form-control"
                   type="text"
                   placeholder="Flow Name..."
                   id="flow_id"
                   name="flow_id"
                   formControlName="flow_id"/>
          </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"/>
            <span class="invalid-feedback"
                  *ngIf="currentFormGroupContext.showError('bucket_name', frm, 'bucketNameNotAllowed')"
                  i18n>The bucket with chosen name does not exist.</span>
          </div>
        </div>
        <ng-container *ngIf="groupType == flowType.symmetrical; else directionalFlow">
          <div class="form-group row">
            <label class="cd-col-form-label required"
                   for="zones">
              <ng-container i18n>Zones</ng-container>
              <cd-helper>
                <span i18n>Flow need to be associated with atleast one zone</span>
              </cd-helper>
            </label>
            <div class="cd-col-form-input">
              <ng-container *ngTemplateOutlet="zoneMultiSelect;context: { name: 'zones', zone: zones }"></ng-container>
            </div>
          </div>
        </ng-container>
        <ng-template #directionalFlow>
          <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="sourceAndDestZone;context: { name: 'source_zone', zones: zones }"></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="sourceAndDestZone;context: { name: 'destination_zone', zones: zones }"></ng-container>
            </div>
          </div>
        </ng-template>
      </div>
      <div class="modal-footer">
        <cd-form-button-panel (submitActionEvent)="submit()"
                              [form]="currentFormGroupContext"
                              [submitText]="(action | titlecase) + ' ' + (groupType | upperFirst) + ' ' + 'Flow'"></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)="zoneSelection()">
  </cd-select-badges>
  <i *ngIf="zone.data.selected.length <= 0"
     i18n-title
     title="Flow should be associated with {{name?.split('_').join(' ')}}"
     class="{{ icons.warning }} icon-warning-color">
  </i>
  <span class="invalid-feedback"
        *ngIf="currentFormGroupContext.showError(name, frm, 'required')"
        i18n>{{name?.split('_').join(' ')}} selection is required!
  </span>
</ng-template>

<ng-template #sourceAndDestZone
             let-name="name"
             let-zones="zones">
  <select [id]="name"
          [name]="name"
          class="form-select"
          (change)="onChangeZoneDropdown(name, $event)"
          [autofocus]="editing">
  <option i18n
          *ngIf="zones.data.available.length == 0"
          [ngValue]="null">Loading...</option>
  <option i18n
          *ngIf="zones.data.available.length > 0"
          [ngValue]="null">-- Select {{name.split('_').join(' ')}} --</option>
  <option *ngFor="let destinationZone of zones.data.available"
          [value]="destinationZone.name">{{ destinationZone.name }}</option>
  </select>
  <span class="invalid-feedback"
        *ngIf="currentFormGroupContext.showError(name, frm, 'required')"
        i18n>This field is required.</span>
</ng-template>
