<div
  class="row"
  [formGroup]="generalSettingsForm"
>
  <div
    class="col-xs-12 p-b-24"
    [ngClass]="{ 'col-md-6': !isReport, 'col-md-8': isReport }"
    *ngIf="!isNamedDashboard || 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">
        <div
          class="col-lg-7 col-xs-12"
          *ngIf="!isReport"
        >
          <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>

        <div
          class="col-xs-6"
          *ngIf="isReport"
        >
          <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>

        <div
          class="col-xs-6"
          *ngIf="isReport && generalSettingsForm.value.c8y_IsNavigatorNode"
        >
          <c8y-form-group>
            <label
              class="d-block"
              for="position"
            >
              {{ 'Position in navigator' | translate }}
              <ng-template #positionInNavPop>
                <span>
                  {{ positionInNavigationExampleLabel | translate }}&nbsp;
                  {{ 'Existing nodes:' | translate }}
                </span>
                <ul class="list-unstyled m-t-16 m-b-0">
                  <li
                    class="p-t-4 p-b-4"
                    title="{{ node.label | translate }}"
                    *ngFor="let node of navigatorNodes$ | async"
                  >
                    <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>
    <c8y-dashboard-availability
      *ngIf="
        !!isReport === false &&
        allowTypeDashboard &&
        deviceTypeValue &&
        generalSettingsForm.controls['deviceType'] &&
        !hideAvailability
      "
      [(globalRolesIds)]="globalRolesIds"
      (globalRolesIdsChange)="changeGlobalRoleIds()"
    ></c8y-dashboard-availability>
  </div>

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