<div class="da-personalize-config">
  <div class="da-personalize-title">
    <div class="da-title">{{ 'personalize.title' | translate }}</div>
  </div>
  <da-layout-row [daGutter]="[12, 12]">
    <da-col-item *ngFor="let item of configs; let i = index;" [daSpan]="24" [daMl]="8" [daOrder]="i">
      <div class="item">
        <div class="da-item-title">
          <!-- TODO: add prefix da- -->
          <div class="icon-content">
            <i class="icon" [ngClass]="item.icon"></i>
          </div>
          <span class="da-item-title-text">{{
            "personalize." + item.name | translate
          }}</span>
        </div>
        <d-radio-group
          [name]="'theme'"
          [(ngModel)]="currentValue[item.name]"
          (change)="onChange(item.name, $event)"
        >
          <d-radio
            [name]="item.name"
            *ngFor="let value of item.items"
            [value]="value.id"
          >
            <span
              class="da-inline over-flow-ellipsis"
              [title]="('personalize.' + value.id) | translate"
              >{{ "personalize." + value.id | translate }}</span
            >
          </d-radio>
        </d-radio-group>
      </div>
    </da-col-item>
    <da-row-item class="da-color-picker"  [daOrderMl]="2">
      <da-layout-col  class="themes" *ngFor="let theme of themeColors" [daSpan]="24" [daMl]="12">
        <div class="da-theme-name">
          <i class="icon {{ theme.icon }}"></i>{{ theme?.name }}
        </div>
        <da-layout-row class="da-theme-colors">
          <div
            class="da-color-avatar"
            [ngClass]="{
              'is-active': customColor === color && customDark === theme.isDark
            }"
            *ngFor="let color of theme.colors"
            [style.backgroundColor]="color"
            (click)="selectColor(color, theme)"
          >
            <i
              class="icon icon-right"
              *ngIf="
                customColor === color &&
                customDark === theme.isDark &&
                currentTheme === themeType.Custom
              "
            ></i>
          </div>
        </da-layout-row>
      </da-layout-col>
    </da-row-item>
  </da-layout-row>
</div>