<div [formGroup]="appearanceSettingsForm">
  <c8y-appearance-settings
    [themeClass]="styling.themeClass"
    [headerClass]="styling.headerClass"
    (themeClassChange)="changeThemeClass($event)"
    (headerClassChange)="changeHeaderClass($event)"
    [dashboardSettings]="true"
    [columns]="3"
  >
    <div class="col-md-4">
      <fieldset class="c8y-fieldset c8y-fieldset--lg">
        <legend translate>Misc</legend>
        <c8y-form-group>
          <label for="margin">{{ 'Widget margin' | translate }}</label>
          <div class="input-group">
            <input
              class="form-control"
              id="margin"
              placeholder="{{ DEFAULT_DASHBOARD_MARGIN }}"
              name="margin"
              type="number"
              formControlName="widgetMargin"
            />
            <span class="input-group-addon">px</span>
          </div>
        </c8y-form-group>

        <c8y-form-group>
          <label translate>Widget titles</label>
          <label
            class="c8y-checkbox"
            title="{{ 'Translate if possible' | translate }}"
          >
            <input
              name="translateWidgetTitle"
              type="checkbox"
              formControlName="translateWidgetTitle"
            />
            <span></span>
            <span>{{ 'Translate if possible' | translate }}</span>
          </label>
        </c8y-form-group>
      </fieldset>
    </div>
  </c8y-appearance-settings>
</div>