<cd-modal [pageURL]="pageURL">
  <span class="modal-title"
        i18n>{{ action | titlecase }} {{ resource | upperFirst }}</span>
  <ng-container class="modal-content">
    <form
      #frm="ngForm"
      [formGroup]="syncPolicyForm"
      *cdFormLoading="loading"
      novalidate>
      <div class="modal-body">
        <!-- Group Id -->
        <div class="form-group row">
          <label
            class="cd-col-form-label required"
            for="group_id"
            i18n>Group Name</label>
          <div class="cd-col-form-input">
            <input
              id="group_id"
              name="group_id"
              class="form-control"
              type="text"
              i18n-placeholder
              placeholder="Group Name..."
              formControlName="group_id"
              [readonly]="editing"/>
            <span
              class="invalid-feedback"
              *ngIf="syncPolicyForm.showError('group_id', frm, 'required')"
              i18n>This field is required.</span>
          </div>
        </div>
        <!-- Status -->
        <div class="form-group row">
          <label
            class="cd-col-form-label required"
            for="status"
            i18n>Status</label>
          <div class="cd-col-form-input">
            <select
                id="status"
                name="status"
                class="form-select"
                formControlName="status">
              <option
                i18n
                value="{{syncPolicyStatus.ENABLED}}">{{syncPolicyStatus.ENABLED | upperFirst }}</option>
              <option
                i18n
                value="{{syncPolicyStatus.ALLOWED}}">{{syncPolicyStatus.ALLOWED | upperFirst }}</option>
              <option
                i18n
                value="{{syncPolicyStatus.FORBIDDEN}}">{{syncPolicyStatus.FORBIDDEN | upperFirst }}</option>
            </select>
            <span
              class="invalid-feedback"
              *ngIf="syncPolicyForm.showError('status', frm, 'required')"
              i18n>This field is required.</span>
          </div>
        </div>
        <!-- Bucket Name -->
        <div class="form-group row">
          <label
            class="cd-col-form-label"
            for="bucket_name"
            i18n>Bucket Name</label>
          <div class="cd-col-form-input">
            <input
              id="bucket_name"
              name="bucket_name"
              class="form-control"
              type="text"
              i18n-placeholder
              placeholder="Bucket Name..."
              formControlName="bucket_name"
              [ngbTypeahead]="bucketDataSource"/>
            <span
              class="invalid-feedback"
              *ngIf="syncPolicyForm.showError('bucket_name', frm, 'bucketNameNotAllowed')"
              i18n>The bucket with chosen name does not exist.</span>
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <div class="text-right">
          <cd-form-button-panel (submitActionEvent)="submit()"
                                [form]="syncPolicyForm"
                                [disabled]="syncPolicyForm.pending || syncPolicyForm.pristine || syncPolicyForm.invalid"
                                [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"></cd-form-button-panel>
        </div>
      </div>
    </form>
  </ng-container>
</cd-modal>
