<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 if possible' | translate }}
            <button
              class="btn-help btn-help--sm"
              [attr.aria-label]="'Help' | translate"
              popover="{{
                'Translates dashboard or widget titles if they are written in English and their translations are available in the loaded standard or custom translation resources.'
                  | translate
              }}"
              placement="right"
              triggers="focus"
              type="button"
            ></button>
          </label>
          <label
            class="c8y-checkbox"
            title="{{ 'Translate dashboard title if possible' | translate }}"
          >
            <input
              name="translateDashboardTitle"
              type="checkbox"
              formControlName="translateDashboardTitle"
            />
            <span></span>
            <span>{{ 'Dashboard title' | translate }}</span>
          </label>
          <label
            class="c8y-checkbox"
            title="{{ 'Translate widget titles if possible' | translate }}"
          >
            <input
              name="translateWidgetTitle"
              type="checkbox"
              formControlName="translateWidgetTitle"
            />
            <span></span>
            <span>{{ 'Widget titles' | translate }}</span>
          </label>
        </c8y-form-group>
      </fieldset>
    </div>
  </c8y-appearance-settings>
</div>