<form
  class="d-contents"
  name="form"
  #stepForm="ngForm"
>
  <div class="container-fluid flex-no-shrink fit-w">
    <div class="row separator-bottom">
      <div class="col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 p-t-24 p-l-16 p-r-16">
        <h3
          data-cy="c8y-cockpit-setup-step1--step1-header-title"
          class="text-medium l-h-base"
          translate
        >
          Title, icon, and navigator collapse
        </h3>
        <p
          class="lead text-normal"
          translate
        >
          Change the icon, the title, and set the initial navigator state.
        </p>
      </div>
    </div>
  </div>
  <div class="inner-scroll flex-grow">
    <div class="container-fluid fit-w">
      <div class="row">
        <div class="col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
          <div class="d-flex a-i-start gap-16 p-t-16">
            <div class="form-group d-inline-block">
              <label>{{ 'Icon' | translate }}</label>
              <c8y-icon-selector-wrapper
                [selectedIcon]="(app$ | async)?.config?.icon?.class || 'c8y-cockpit'"
                [iconSize]="24"
                (onSelect)="iconSelectionChange($event)"
              ></c8y-icon-selector-wrapper>
            </div>
            <div class="form-group flex-grow">
              <label
                for="confAppTitle"
                translate
              >
                Change application title
              </label>
              <input
                class="form-control"
                id="confAppTitle"
                placeholder="{{ 'e.g. Cockpit' | translate }} "
                type="text"
                maxlength="254"
                [(ngModel)]="config.appTitle"
                [ngModelOptions]="{ standalone: true }"
              />
            </div>
          </div>

          <c8y-misc-config [config]="config"></c8y-misc-config>
        </div>
      </div>
    </div>
  </div>
  <c8y-cockpit-setup-stepper-buttons
    [index]="stepper.selectedIndex"
    (onNext)="next()"
    (onBack)="back()"
  ></c8y-cockpit-setup-stepper-buttons>
</form>