<fieldset class="c8y-fieldset c8y-fieldset--lg">
  <legend>{{ 'Dashboard template' | translate }}</legend>
  <div class="d-flex p-b-16 gap-16">
    <label class="c8y-switch flex-no-shrink">
      <input
        type="checkbox"
        [checked]="value"
        [disabled]="disabled"
        (click)="toggle()"
      />
      <span></span>
      <span>{{ typedDashboardStatus | translate }}</span>
    </label>
    <div class="flex-grow d-flex d-col">
      <div
        class="flex-grow"
        [innerHtml]="infoText | translate: { displayDeviceTypeValue: displayDeviceTypeValue }"
      ></div>
      <button
        class="btn-link p-0 m-r-auto"
        type="button"
        *ngIf="allowTypeDashboard === 'allow_if_type_filled' && showSourceNavigationLink$ | async"
        (click)="goToDeviceView()"
      >
        {{
          deviceManagementLinkTitle
            | translate
              : {
                  deviceManagementAppName:
                    userDeviceManagementApp$ | async | humanizeAppName | async
                }
        }}
        <i c8yIcon="external-link"></i>
      </button>
    </div>
  </div>

  <c8y-type-dashboard-info
    *ngIf="allowTypeDashboard === 'allow'"
    [context]="mo"
    [deviceTypeValue]="deviceTypeValue"
    [displayDeviceTypeValue]="displayDeviceTypeValue"
  ></c8y-type-dashboard-info>

  <div
    class="p-t-8 p-b-16"
    *ngIf="mo?.c8y_Dashboard && value"
  >
    <button
      class="btn btn-default btn-sm"
      type="button"
      c8yProductExperience
      [actionName]="PRODUCT_EXPERIENCE.DASHBOARD.EVENTS.DASHBOARD_TEMPLATE"
      [actionData]="{
        component: PRODUCT_EXPERIENCE.DASHBOARD.COMPONENTS.TYPED_DASHBOARD_SETTINGS,
        action: PRODUCT_EXPERIENCE.DASHBOARD.ACTIONS.DUPLICATE_AS_REGULAR_DASHBOARD
      }"
      (click)="onDuplicateWithoutType.emit()"
      [disabled]="formInvalid"
    >
      {{ 'Duplicate as regular dashboard' | translate }}
    </button>
  </div>
</fieldset>