import { Component } from '@angular/core';

import { NzBadgeModule } from 'ng-zorro-antd/badge';
import { NzDividerModule } from 'ng-zorro-antd/divider';

@Component({
  selector: '<%= selector %>',
  imports: [NzBadgeModule, NzDividerModule],
  <% if(inlineTemplate) { %>template: `
    <nz-divider nzOrientation="left" nzText="Presets" />
    @for (color of presets; track color) {
      <div>
        <nz-badge [nzColor]="color" [nzText]="color" />
      </div>
    }

    <nz-divider nzOrientation="left" nzText="Custom" />
    @for (color of customColors; track color) {
      <div>
        <nz-badge [nzColor]="color" [nzText]="color" />
      </div>
    }
  `<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>
})
export class <%= classify(name) %>Component {
  readonly presets = [
    'pink',
    'red',
    'yellow',
    'orange',
    'cyan',
    'green',
    'blue',
    'purple',
    'geekblue',
    'magenta',
    'volcano',
    'gold',
    'lime'
  ];
  readonly customColors = ['#f50', '#2db7f5', '#87d068', '#108ee9'];
}
