<div class="legend form-block">
  <span translate>Layout</span>
</div>
<div class="row">
  <div class="col-sm-6 m-b-32">
    <label translate>Theme</label>
    <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
              type="radio"
              [id]="'groupradiocontentclass' + i"
              name="content"
              [value]="themeClassItem.class"
              [ngModel]="themeClass"
              (click)="themeClassClick(themeClassItem.class)"
            />
            <span></span>
            <span
              class="text-truncate"
              title="{{ themeClassItem.label | translate }}{{
                themeClassItem.class === defaultThemeClass
                  ? ' | ' + ('Dashboard default' | translate)
                  : ''
              }}"
            >
              <span>{{ themeClassItem.label | translate }}</span>
              <br />
              <small
                *ngIf="themeClassItem.class === defaultThemeClass"
                class="text-muted"
                translate
              >
                Dashboard default
              </small>
            </span>
          </label>
        </div>

        <button
          class="btn-help btn-help--sm m-l-auto"
          [attr.aria-label]="'Help' | translate"
          type="button"
          popover="{{ themeClassItem.description | translate }}"
          container="body"
          placement="top"
          triggers="focus"
        ></button>
      </li>
    </ul>
  </div>
  <div class="col-sm-6">
    <label translate>Widget header style</label>
    <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
              type="radio"
              [id]="'groupradioheaderclass' + i"
              name="header"
              [value]="headerClassItem.class"
              [ngModel]="headerClass"
              (click)="headerClassClick(headerClassItem.class)"
            />
            <span></span>
            <span
              class="text-truncate"
              title="{{ headerClassItem.label | translate }}{{
                headerClassItem.class === defaultHeaderClass
                  ? ' | ' + ('Dashboard default' | translate)
                  : ''
              }}"
            >
              <span>{{ headerClassItem.label | translate }}</span>
              <br />
              <small
                *ngIf="headerClassItem.class === defaultHeaderClass"
                class="text-muted"
                translate
              >
                Dashboard default
              </small>
            </span>
          </label>
        </div>
        <button
          class="btn-help btn-help--sm m-l-auto"
          [attr.aria-label]="'Help' | translate"
          type="button"
          popover="{{ headerClassItem.description | translate }}"
          container="body"
          placement="top"
          triggers="focus"
        ></button>
      </li>
    </ul>
  </div>
</div>