@if (props && props.options[0].component) {
  <oe-navigation-view [formGroup]="form" [component]="props.options[0].component"
    (emitForm)="setForm($event)">
    <ngx-spinner name="formly-field-modal"></ngx-spinner>
    @for (entry of props.options; track entry) {
      @for (line of entry.lines; track line) {
        @switch (line.type) {
          <!-- OeFormlyField.ChannelLine -->
          @case ('channel-line') {
            <oe-modal-line [filter]="line.filter"
              [textIndent]="line.indentation ?? '0%'" [name]="line.name" [channelAddress]="line.channel"
              [converter]="line.converter">
            </oe-modal-line>
          }
          <!-- OeFormlyField.ChildrenLine -->
          @case ('children-line') {
            <oe-modal-line [filter]="line.filter"
              [textIndent]="line.indentation ?? '0%'" [name]="line.name">
              @for (lineItem of line.children; track lineItem) {
                <!-- OeFormlyField.Item -->
                <oe-modal-line-item [channelAddress]="lineItem.channel" [filter]="lineItem.filter"
                  [converter]="lineItem.converter">
                </oe-modal-line-item>
              }
            </oe-modal-line>
          }
          <!-- OeFormlyField.InfoLine -->
          @case ('info-line') {
            <oe-modal-info-line [info]="line.name">
            </oe-modal-info-line>
          }
          <!-- OeFormlyField.HorizontalLine -->
          @case ('horizontal-line') {
            <oe-modal-horizontal-line></oe-modal-horizontal-line>
          }
          @case ('value-from-channels-line') {
            <oe-modal-value-line
              [channelsToSubscribe]="line.channelsToSubscribe" [textIndent]="line.indentation ?? '0%'"
            [valueCallback]="line.value" [filters]="line.filter ?? null" [name]="line.name"></oe-modal-value-line>
          }
          <!-- FormGrouped -->
          @case ('value-from-form-control-line') {
            <oe-modal-line [controlName]="line.controlName" [formGroup]="form" [name]="line.name"
              [control]="{type: 'TEXT', valueConverter: line.converter}">
            </oe-modal-line>
          }
          @case ('buttons-from-form-control-line') {
            @if (form.controls[line.controlName] !== null) {
              <oe-modal-buttons [formGroup]="form"
                [controlName]="line.controlName" [component]="component" [buttons]="line.buttons"
                [channelAddress]="line.channel?.toString() ?? null">
              </oe-modal-buttons>
            }
          }
          <!-- OeFormlyField.RangeButtonFromFormControlLine -->
          @case ('range-button-from-form-control-line') {
            <oe-modal-line [controlName]="line.controlName"
              [control]="{type: 'RANGE', properties: line.properties}" [formGroup]="form">
            </oe-modal-line>
          }
        }
      }
    }
  </oe-navigation-view>
}