<h6 class="legend form-block"><span translate>Layout</span></h6>
<div class="row ">
  <div class="col-sm-6 m-b-32">
    <label translate>Theme</label>
    <ul class="list-group" style="box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);">
      <li
        class="list-group-item flex-row"
        style="align-items: center; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05);"
        *ngFor="let themeClassItem of possibleStylingTheme; let i = index"
      >
        <div class="list-item-checkbox">
          <label class="c8y-radio">
            <input
              type="radio"
              [id]="'groupradiocontentclass' + i"
              name="content"
              [value]="themeClassItem.class"
              [ngModel]="themeClass"
              (click)="themeClassClick(themeClassItem.class)"
            />
            <span></span>
          </label>
        </div>
        <label [for]="'groupradiocontentclass' + i">
          <span>{{ themeClassItem.label | translate }}</span>
          <br />
          <small *ngIf="themeClassItem.class === defaultThemeClass" class="text-muted" translate
            >Dashboard default</small
          >
        </label>
        <button
          class="btn btn-clean flex-item-top"
          popover="{{ themeClassItem.description | translate }}"
          container="body"
          placement="top"
          triggers="focus"
        >
          <i [c8yIcon]="'question-circle-o'" class="text-primary"></i>
        </button>
      </li>
    </ul>
  </div>
  <div class="col-sm-6">
    <label translate>Widget header style</label>
    <ul class="list-group" style="box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);">
      <li
        class="list-group-item flex-row a-i-center"
        style="box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05);"
        *ngFor="let headerClassItem of possibleStylingHeader; let i = index"
      >
        <div class="list-item-checkbox">
          <label class="c8y-radio">
            <input
              type="radio"
              [id]="'groupradioheaderclass' + i"
              name="header"
              [value]="headerClassItem.class"
              [ngModel]="headerClass"
              (click)="headerClassClick(headerClassItem.class)"
            />
            <span></span>
          </label>
        </div>
        <label [for]="'groupradioheaderclass' + i">
          <span>{{ headerClassItem.label | translate }}</span>
          <br />
          <small *ngIf="headerClassItem.class === defaultHeaderClass" class="text-muted" translate
            >Dashboard default</small
          >
        </label>
        <button
          class="btn btn-clean flex-item-top"
          popover="{{ headerClassItem.description | translate }}"
          container="body"
          placement="top"
          triggers="focus"
        >
          <i [c8yIcon]="'question-circle-o'" class="text-primary"></i>
        </button>
      </li>
    </ul>
  </div>
</div>