<ion-header translucent="true" class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/app/tabs/settings/polls-list"></ion-back-button>
    </ion-buttons>
    <ion-title class="ion-text-center">{{ formInfo.name }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen="true" [ngClass]="ios ? 'zeus' : ''">
  <div class="ion-padding-horizontal">
    <form #form="ngForm" (ngSubmit)="createRequest(form)">
      <div *ngFor="let field of formInfo.fields; let i = index">

        <ion-item *ngIf="field.field_input.name == 'datetime'" class="ion-margin-top">
          <ion-label class="ion-text-wrap">{{ field.name }}</ion-label>
          <ion-datetime displayFormat="DD MMM YYYY H:mm" min="{{ field.min ? field.min : 1900 }}"
            max="{{ field.max ? field.max : currentYear }}" disabled="{{ field.disabled ? true : false }}"
            [(ngModel)]="nameControl[i]" name="{{ field.name_control }}">
          </ion-datetime>
        </ion-item>

        <ion-card
          *ngIf="field.field_input.name != 'datetime' && field.field_input.name != 'select' && field.field_input.name != 'checkbox' && field.field_input.name != 'toggle'">
          <ion-card-header>
            <ion-card-subtitle>{{ field.name }}</ion-card-subtitle>
          </ion-card-header>

          <ion-card-content>
            <ion-grid>
              <ion-row class="ion-align-items-center">
                <ion-col size="{{ field.scale ? '8' : '12' }}" class="ion-align-self-center">
                  <ion-input min="{{ field.min ? field.min : '' }}" max="{{ field.max ? field.max : '' }}"
                    minlength="{{ field.minlength ? field.minlength : 0 }}"
                    maxlength="{{ field.maxlength ? field.maxlength : 1000 }}"
                    placeholder="{{ field.placeholder | translate }}" disabled="{{ field.disabled ? true : false }}"
                    required="{{ field.required ? true : false }}" readonly="{{ field.readonly ? true : false }}"
                    [(ngModel)]="nameControl[i]" name="{{ field.name_control }}" type="{{ field.field_input.name }}"
                    (ionChange)="changeInput(field,i)" style="
                      border-radius: 15px !important; 
                      border-style: solid;
                      border-color: gray !important;
                      border-width: thin;">
                  </ion-input>
                </ion-col>

                <ion-col size="2" class="ion-text-right" *ngIf="field.scale">
                  <ion-button color="medium" fill="clear" (click)="removeScale(i,field)"
                    disabled="{{ field.disabled ? true : false }}">
                    <ion-icon name="remove-circle" slot="icon-only"></ion-icon>
                  </ion-button>
                </ion-col>

                <ion-col size="2" class="ion-float-left" *ngIf="field.scale">
                  <ion-button color="medium" fill="clear" (click)="addScale(i,field)"
                    disabled="{{ field.disabled ? true : false }}">
                    <ion-icon name="add-circle" slot="icon-only"></ion-icon>
                  </ion-button>
                </ion-col>
              </ion-row>
            </ion-grid>
          </ion-card-content>
        </ion-card>

        <ion-card *ngIf="field.field_input.name == 'checkbox'">
          <ion-card-header>
            <ion-card-subtitle>{{ field.name }}</ion-card-subtitle>
          </ion-card-header>

          <ion-card-content>
            <ion-radio-group [(ngModel)]="nameControl[i]" name="{{ field.name_control }}">
              <ion-item lines="none" style="
                  border-style: solid;
                  border-color: gray;
                  border-width: thin;
                  margin-bottom: 10px;">
                <ion-label>Si, por supuesto!</ion-label>
                <ion-radio slot="start" value="true"></ion-radio>
              </ion-item>

              <ion-item lines="none" style="
                border-style: solid;
                border-color: gray;
                border-width: thin;
                margin-bottom: 10px;">
                <ion-label>No lo creo posible</ion-label>
                <ion-radio slot="start" value="false"></ion-radio>
              </ion-item>
            </ion-radio-group>


          </ion-card-content>
        </ion-card>

        <ion-card *ngIf="field.field_input.name == 'toggle'">
          <ion-card-header>
            <ion-card-subtitle>{{ field.name }}</ion-card-subtitle>
          </ion-card-header>

          <ion-card-content>
            <ion-radio-group [(ngModel)]="nameControl[i]" name="{{ field.name_control }}">
              <ion-item lines="none" style="
                border-style: solid;
                border-color: gray;
                border-width: thin;
                margin-bottom: 10px;">
                <ion-label>Si, por supuesto!</ion-label>
                <ion-radio slot="start" value="true"></ion-radio>
              </ion-item>

              <ion-item lines="none" mode="md" style="
              border-style: solid;
              border-color: gray;
              border-width: thin;
              margin-bottom: 10px;">
                <ion-label>No lo creo posible</ion-label>
                <ion-radio slot="start" value="false"></ion-radio>
              </ion-item>
            </ion-radio-group>
          </ion-card-content>
        </ion-card>

        <ion-card *ngIf="field.field_input.name == 'select'">
          <ion-card-header>
            <ion-card-subtitle>{{ field.name }}</ion-card-subtitle>
          </ion-card-header>

          <ion-card-content>
            <ion-radio-group [(ngModel)]="nameControl[i]" name="{{ field.name_control }}" *ngIf="!field.multiple">
              <ion-item *ngFor="let option of optionsControl[i]" lines="none" style="
                border-style: solid;
                border-color: gray;
                border-width: thin;
                margin-bottom: 10px;">
                <ion-label>{{ option.name ? option.name: option.value }}</ion-label>
                <ion-radio slot="start" value="{{option.value}}"></ion-radio>
              </ion-item>
            </ion-radio-group>

            <div class='e-btn-group' *ngIf="field.multiple">
              <div *ngFor="let option of optionsControl[i]" style="
                padding: 14px;
                border-radius: 12px;
                border-style: solid;
                border-color: gray;
                border-width: thin;
                margin-bottom: 10px;">
                <input type="checkbox" id="{{option.id}}" name="align" value="bold"
                  (change)="multiselectDataRegister(option,field.name_control,$event)" />
                <label class="e-btn" for="{{option.id}}" style="margin-left: 30px;color: black;">
                  {{ option.name ? option.name: option.value }}
                </label>
              </div>
            </div>
          </ion-card-content>
        </ion-card>
      </div>

      <div class="ion-margin-top">
        <ion-button type="submit" [disabled]="form.invalid" expand="block">{{ 'all.send' | translate }}
        </ion-button>
      </div>
    </form>
  </div>
</ion-content>