<div
  class="row"
  [formGroup]="generalSettingsForm"
>
  @if (!isNamedDashboard || isReport) {
    <div
      class="col-xs-12 p-b-24"
      [class.col-md-6]="!isReport"
      [class.col-md-8]="isReport"
    >
      <fieldset class="c8y-fieldset c8y-fieldset--lg m-b-24">
        <legend>{{ 'Navigation' | translate }}</legend>
        <div class="d-flex gap-16">
          <c8y-form-group>
            <label>{{ 'Icon' | translate }}</label>
            <c8y-icon-selector-wrapper
              [iconSize]="24"
              name="icon"
              formControlName="icon"
            ></c8y-icon-selector-wrapper>
          </c8y-form-group>
          <c8y-form-group class="flex-grow">
            <label for="menuLabel">
              {{ 'Menu label' | translate }}
              <button
                class="btn-help btn-help--sm"
                [attr.aria-label]="'Help' | translate"
                popover="{{
                  'Menu label to display in submenu when dashboard is attached' | translate
                }}"
                placement="right"
                triggers="focus"
                container="body"
                type="button"
              ></button>
            </label>
            <input
              class="form-control"
              id="menuLabel"
              placeholder="{{ namePlaceholder | translate }}"
              name="name"
              type="text"
              formControlName="name"
            />
          </c8y-form-group>
        </div>

        <c8y-form-group>
          <label for="description">{{ 'Description ' | translate }}</label>
          <textarea
            class="form-control"
            id="description"
            name="description"
            c8y-textarea-autoresize
            formControlName="description"
          ></textarea>
        </c8y-form-group>

        <div class="row">
          @if (!isReport) {
            <div class="col-lg-7 col-xs-12">
              <c8y-form-group>
                <label for="position">
                  {{ 'Position in tabs' | translate }}
                  <button
                    class="btn-help btn-help--sm"
                    [attr.aria-label]="'Help' | translate"
                    popover="{{ positionInTabsExampleLabel | translate }}"
                    placement="right"
                    triggers="focus"
                    container="body"
                    type="button"
                  ></button>
                </label>
                <input
                  class="form-control"
                  id="positionNav"
                  placeholder="{{ priorityExampleLabel | translate: { example: '500' } }}"
                  name="priority"
                  for="position"
                  type="number"
                  formControlName="priority"
                />
              </c8y-form-group>
            </div>
          }

          @if (isReport) {
            <div class="col-xs-6">
              <label translate>Navigator menu item</label>
              <c8y-form-group>
                <label
                  class="c8y-switch"
                  title="{{ 'Show in navigator' | translate }}"
                >
                  <input
                    type="checkbox"
                    formControlName="c8y_IsNavigatorNode"
                  />
                  <span></span>
                  <span>{{ 'Show in navigator' | translate }}</span>
                </label>
              </c8y-form-group>
            </div>
          }

          @if (isReport && generalSettingsForm.value.c8y_IsNavigatorNode) {
            <div class="col-xs-6">
              <c8y-form-group>
                <label
                  class="d-block"
                  for="position"
                >
                  {{ 'Position in navigator' | translate }}
                  <ng-template #positionInNavPop>
                    <span>
                      {{ positionInTabsExampleLabel | translate }}&nbsp;
                      {{ 'Existing nodes:' | translate }}
                    </span>
                    <ul class="list-unstyled m-t-16 m-b-0">
                      @for (node of navigatorNodes$ | async; track node.label) {
                        <li
                          class="p-t-4 p-b-4"
                          title="{{ node.label | translate }}"
                        >
                          <div class="icon-flex fit-w">
                            <i [c8yIcon]="node.icon"></i>
                            <span class="text-truncate m-l-4 m-r-16 flex-grow">
                              {{ node.label | translate }}
                            </span>
                            <span class="text-medium flex-no-shrink">{{ node.priority }}</span>
                          </div>
                        </li>
                      }
                    </ul>
                  </ng-template>
                  <button
                    class="btn-help btn-help--sm"
                    [attr.aria-label]="'Help' | translate"
                    [popover]="positionInNavPop"
                    placement="right"
                    triggers="focus"
                    container="body"
                    type="button"
                  ></button>
                </label>
                <input
                  class="form-control"
                  placeholder="{{ priorityExampleLabel | translate: { example: '500' } }}"
                  name="priority"
                  for="position"
                  type="number"
                  formControlName="priority"
                />
              </c8y-form-group>
            </div>
          }
        </div>
      </fieldset>
      @if (
        !!isReport === false &&
        allowTypeDashboard &&
        deviceTypeValue &&
        generalSettingsForm.get('deviceType') &&
        !hideAvailability
      ) {
        <c8y-dashboard-availability
          [(globalRolesIds)]="globalRolesIds"
          (globalRolesIdsChange)="changeGlobalRoleIds()"
        ></c8y-dashboard-availability>
      }
    </div>
  }

  <div class="col-xs-12 col-md-6 p-b-24">
    @if (allowTypeDashboard !== 'disallow') {
      <c8y-typed-dashboard-settings
        formControlName="deviceType"
        [deviceTypeValue]="deviceTypeValue"
        [displayDeviceTypeValue]="displayDeviceTypeValue"
        [formInvalid]="generalSettingsForm.invalid"
        [mo]="mo"
        [isDevice]="isDevice"
        [allowTypeDashboard]="allowTypeDashboard"
        (onDuplicateWithoutType)="duplicateWithoutType()"
      ></c8y-typed-dashboard-settings>
    }
    @if (
      !!isReport === false &&
      (!allowTypeDashboard || !deviceTypeValue || !generalSettingsForm.get('deviceType')) &&
      !hideAvailability
    ) {
      <c8y-dashboard-availability
        [(globalRolesIds)]="globalRolesIds"
        (globalRolesIdsChange)="changeGlobalRoleIds()"
      ></c8y-dashboard-availability>
    }
  </div>
</div>