<ion-content>
  @if (factory && form) {
    <ion-grid>
      <ion-row class="ion-justify-content-center">
        <ion-col size="12" size-xl="8">
          <ion-card>
            <ion-item>
              <ion-icon slot="start" [name]="componentIcon" color="primary"></ion-icon>
              <ion-label>
                <ion-card-title style="color: var(--ion-text-color-reverse)" class="ion-text-wrap">{{ factory.name }}
                </ion-card-title>
                <ion-card-subtitle class="ion-text-wrap" style="color: var(--ion-text-color-shade);">
                {{ factory.description }}</ion-card-subtitle>
              </ion-label>
            </ion-item>
            <ion-card-content>
              <form [formGroup]="form" (ngSubmit)="submit()">
                <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
                <ion-item>
                  <ion-button type="submit" color="primary" translate>SETTINGS.SYSTEM_UPDATE.CREATE_COMPONENT
                  </ion-button>
                </ion-item>
              </form>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  }
</ion-content>
