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

import { NzFlexDirective } from 'ng-zorro-antd/flex';
import { NzSelectModule } from 'ng-zorro-antd/select';
import { NzSpaceModule } from 'ng-zorro-antd/space';

@Component({
  selector: '<%= selector %>',
  imports: [FormsModule, NzSelectModule, NzSpaceModule, NzFlexDirective],
  <% if(inlineTemplate) { %>template: `
    <div nz-flex nzGap="large">
      <nz-space nzDirection="vertical" style="flex: 1">
        <nz-select *nzSpaceItem ngModel="lucy" [nzOptions]="options"></nz-select>
        <nz-select *nzSpaceItem ngModel="lucy" nzVariant="filled" [nzOptions]="options"></nz-select>
        <nz-select *nzSpaceItem ngModel="lucy" nzVariant="borderless" [nzOptions]="options"></nz-select>
        <nz-select *nzSpaceItem ngModel="lucy" nzVariant="underlined" [nzOptions]="options"></nz-select>
      </nz-space>
      <nz-space nzDirection="vertical" style="flex: 1">
        <nz-select *nzSpaceItem nzMode="multiple" [ngModel]="['lucy']" [nzOptions]="options"></nz-select>
        <nz-select
          *nzSpaceItem
          nzMode="multiple"
          [ngModel]="['lucy']"
          nzVariant="filled"
          [nzOptions]="options"
        ></nz-select>
        <nz-select
          *nzSpaceItem
          nzMode="multiple"
          [ngModel]="['lucy']"
          nzVariant="borderless"
          [nzOptions]="options"
        ></nz-select>
        <nz-select
          *nzSpaceItem
          nzMode="multiple"
          [ngModel]="['lucy']"
          nzVariant="underlined"
          [nzOptions]="options"
        ></nz-select>
      </nz-space>
    </div>
  `<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>,
  styles: `
    nz-space {
      flex: 1;
    }

    nz-select {
      width: 100%;
    }
  `
})
export class <%= classify(name) %>Component {
  options = [
    { label: 'Jack', value: 'jack' },
    { label: 'Lucy', value: 'lucy' },
    { label: 'Disabled', value: 'disabled', disabled: true }
  ];
}
