<div class="row">
  <div class="col-lg-{{ 12 / columns }} col-xs-12">
    <fieldset class="c8y-fieldset c8y-fieldset--lg">
      <legend *ngIf="dashboardSettings">{{ 'Default theme' | translate }}</legend>
      <legend *ngIf="!dashboardSettings">{{ 'Theme' | translate }}</legend>
      <ul class="list-group">
        <li
          class="list-group-item d-flex a-i-center p-l-0 p-r-0 fit-w"
          *ngFor="let themeClassItem of possibleStylingTheme; let i = index"
        >
          <div
            class="list-item-checkbox"
            style="max-width: calc(100% - 24px)"
          >
            <label class="c8y-radio">
              <input
                name="content"
                type="radio"
                [id]="'groupradiocontentclass' + i"
                [value]="themeClassItem.class"
                [ngModel]="themeClass"
                (click)="themeClassClick(themeClassItem.class)"
              />
              <span></span>
              <span
                class="text-truncate"
                title="{{ themeClassItem.label | translate }}{{
                  themeClassItem.class === defaultThemeClass
                    ? ' | ' + (dashboardDefaultLabel | translate)
                    : ''
                }}"
              >
                <span>{{ themeClassItem.label | translate }}</span>
                <br />
                <small
                  class="text-muted"
                  *ngIf="themeClassItem.class === defaultThemeClass"
                >
                  {{ dashboardDefaultLabel | translate }}
                </small>
              </span>
            </label>
          </div>

          <button
            class="btn-help btn-help--sm m-l-auto"
            [attr.aria-label]="'Help' | translate"
            popover="{{ themeClassItem.description | translate }}"
            placement="right"
            triggers="focus"
            container="body"
            type="button"
          ></button>
        </li>
      </ul>
    </fieldset>
  </div>
  <div class="col-lg-{{ 12 / columns }} col-xs-12">
    <fieldset class="c8y-fieldset c8y-fieldset--lg">
      <legend *ngIf="dashboardSettings">
        {{ 'Default widget header style' | translate }}
      </legend>
      <legend *ngIf="!dashboardSettings">
        {{ 'Widget header style' | translate }}
      </legend>
      <ul class="list-group">
        <li
          class="list-group-item d-flex a-i-center p-l-0 p-r-0"
          *ngFor="let headerClassItem of possibleStylingHeader; let i = index"
        >
          <div
            class="list-item-checkbox"
            style="max-width: calc(100% - 24px)"
          >
            <label class="c8y-radio">
              <input
                name="header"
                type="radio"
                [id]="'groupradioheaderclass' + i"
                [value]="headerClassItem.class"
                [ngModel]="headerClass"
                (click)="headerClassClick(headerClassItem.class)"
              />
              <span></span>
              <span
                class="text-truncate"
                title="{{ headerClassItem.label | translate }}{{
                  headerClassItem.class === defaultHeaderClass
                    ? ' | ' + (dashboardDefaultLabel | translate)
                    : ''
                }}"
              >
                <span>{{ headerClassItem.label | translate }}</span>
                <br />
                <small
                  class="text-muted"
                  *ngIf="headerClassItem.class === defaultHeaderClass"
                >
                  {{ dashboardDefaultLabel | translate }}
                </small>
              </span>
            </label>
          </div>
          <button
            class="btn-help btn-help--sm m-l-auto"
            [attr.aria-label]="'Help' | translate"
            popover="{{ headerClassItem.description | translate }}"
            placement="right"
            triggers="focus"
            container="body"
            type="button"
          ></button>
        </li>
      </ul>
    </fieldset>
  </div>
  <ng-content></ng-content>
</div>