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

import { NzDividerModule } from 'ng-zorro-antd/divider';
import { NzGridModule } from 'ng-zorro-antd/grid';

@Component({
  selector: '<%= selector %>',
  imports: [NzDividerModule, NzGridModule],
  <% if(inlineTemplate) { %>template: `
    <nz-divider nzOrientation="left" nzText="Horizontal"></nz-divider>
    <div nz-row [nzGutter]="16">
      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
    </div>
    <nz-divider nzOrientation="left" nzText="Responsive"></nz-divider>
    <div nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32 }">
      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
    </div>
    <nz-divider nzOrientation="left" nzText="Vertical"></nz-divider>
    <div nz-row [nzGutter]="[16, 24]">
      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
      <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
    </div>
  `<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>,
  <% if(inlineStyle) { %>styles: [`
      nz-divider {
        color: #333;
        font-weight: normal;
      }
      .inner-box {
        background: #0092ff;
        padding: 8px 0;
      }
    `]<% } else { %>styleUrls: ['./<%= dasherize(name) %>.component.<%= style %>']<% } %>
})
export class <%= classify(name) %>Component {}
