<ion-content>
  <ion-grid>
    <ion-row class="ion-justify-content-center">
      <ion-col size="12" size-xl="3">
        @if (factory) {
          <ion-card>
            <ion-item>
              <ion-icon size="large" slot="start" [name]="componentIcon" color="primary"></ion-icon>
              <ion-label>
                <ion-card-title class="ion-text-wrap" color="primary">{{ factory.name }}</ion-card-title>
                <ion-card-subtitle class="ion-text-wrap">{{ factory.description }}</ion-card-subtitle>
              </ion-label>
            </ion-item>
            @if (formGroup !== null) {
              <ion-card-content>
                <form [formGroup]="formGroup">
                  <ion-item lines="full" class="noPadding">
                    <ion-input formControlName="alias" [label]="'GENERAL.CURRENT_NAME' | translate"
                      label-placement="stacked">
                    </ion-input>
                  </ion-item>
                </form>
                <ion-row class="ion-justify-content-center">
                  <ion-col size="6" class="ion-text-center">
                    <ion-button expand="full" (click)="updateAlias(formGroup.controls['alias'].value)"
                      translate>
                      GENERAL.APPLY
                    </ion-button>
                  </ion-col>
                  <ion-col size="6" class="ion-text-center">
                    <ion-button expand="full" (click)="updateAlias('')" translate>
                      GENERAL.RESET
                    </ion-button>
                  </ion-col>
                </ion-row>
              </ion-card-content>
            }
          </ion-card>
        }
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
